<template>
  <!-- 新增 预装箱单-成衣-->
  <div id="addAdvancePacking">
    <a-drawer
      title="新增预装箱单-成衣"
      width="89%"
      placement="right"
      :closable="true"
      :visible="visible"
      @close="handleCancel"
    >
      <!-- 主表信息 填写 -->
      <a-card :bordered="false">
        <div class="table-page-search-wrapper">
          <!-- :rules="validatorRules" -->
          <a-form-model layout="inline" ref="form" :model="addAdpacking">
            <a-row :gutter="24">
              <a-col :md="6" :sm="8">
                <a-form-model-item label="订单号" prop="orderNumber">
                  <a-input placeholder="请输入订单号" v-model="addAdpacking.orderNumber"></a-input>
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="款号" prop="styleNum">
                  <a-input placeholder="请输入款号" v-model="addAdpacking.styleNum"></a-input>
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="品名" prop="productName">
                  <a-input placeholder="请输入品名" v-model="addAdpacking.productName"></a-input>
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="尺码范围" prop="sizeRange">
                  <a-input placeholder="请输入尺码范围" v-model="addAdpacking.sizeRange"></a-input>
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="客户" prop="customer">
                  <a-input placeholder="请输入客户" v-model="addAdpacking.customer"></a-input>
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="集装箱代号" prop="containerCode">
                  <a-input placeholder="请输入集装箱代号" v-model="addAdpacking.containerCode"></a-input>
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="集装箱号" prop="containerNumber">
                  <a-input placeholder="请输入集装箱号" v-model="addAdpacking.containerNumber"></a-input>
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="备注" prop="memo">
                  <a-input placeholder="请输入备注" v-model="addAdpacking.memo"></a-input>
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="成衣工厂" prop="garmentFactory">
                  <a-input placeholder="请输入成衣工厂" v-model="addAdpacking.garmentFactory"></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </div>
      </a-card>

      <!-- 参照发运明细 増行-->
      <a-card :bordered="false" style="margin:10px 0 60px 0;">
        <div class="table-operator">
          <a-button type="primary" @click="referShipmentDetails" icon="ordered-list">参照发运明细</a-button>
          <a-button type="primary" @click="handleAddColumn" icon="plus" style="margin-left: 20px">増行</a-button>
        </div>

        <!-- 子表 ipagination :rules="validatorRules"-->
        <a-spin :spinning="confirmLoading">
          <a-form-model ref="formRef">
            <a-table
              bordered
              rowKey="id"
              :columns="columns"
              :data-source="data"
              :loading="loading"
              :pagination="false"
              :scroll="{ x: 1500 }"
              @change="handleTableChange"
            >
              <!-- 结束箱号 输入框-->
              <template slot="endCaseNumberSlot" slot-scope="text, record, index">
                <a-form-model-item prop="endCaseNumber">
                  <a-input style="width:100%" type="text" v-model="record.endCaseNumber" />
                </a-form-model-item>
              </template>

              <!-- 颜色（中英文） -->
              <template slot="colourSlot" slot-scope="text, record, index">
                <a-form-model-item prop="colour">
                  <a-input style="width:100%" type="text" v-model="record.colour" />
                </a-form-model-item>
              </template>

              <!-- 箱数  -->
              <template slot="boxNumberSlot" slot-scope="text, record, index">
                <a-form-model-item prop="boxNumber">
                  <a-input style="width:100%" type="text" v-model="record.boxNumber" />
                </a-form-model-item>
              </template>

              <!-- 总件数 -->
              <template slot="totalSlot" slot-scope="text, record, index">
                <a-form-model-item prop="total">
                  <a-input style="width:100%" type="text" v-model="record.total" />
                </a-form-model-item>
              </template>

              <!-- 总净重 -->
              <template slot="totalNetWeightSlot" slot-scope="text, record, index">
                <a-form-model-item prop="totalNetWeight">
                  <a-input style="width:100%" type="text" v-model="record.totalNetWeight" />
                </a-form-model-item>
              </template>

              <!-- 总毛重 -->
              <template slot="totalGrossWeightSlot" slot-scope="text, record, index">
                <a-form-model-item prop="totalGrossWeight">
                  <a-input style="width:100%" type="text" v-model="record.totalGrossWeight" />
                </a-form-model-item>
              </template>

              <!-- 外箱宽度 -->
              <template slot="outerBoxWidthSlot" slot-scope="text, record, index">
                <a-form-model-item prop="outerBoxWidth">
                  <a-input style="width:100%" type="text" v-model="record.outerBoxWidth" />
                </a-form-model-item>
              </template>

              <!-- 外箱高度 -->
              <template slot="outerBoxHeightSlot" slot-scope="text, record, index">
                <a-form-model-item prop="outerBoxHeight">
                  <a-input style="width:100%" type="text" v-model="record.outerBoxHeight" />
                </a-form-model-item>
              </template>

              <!-- 总体积 -->
              <template slot="totalVolumeSlot" slot-scope="text, record, index">
                <a-form-model-item prop="totalVolume">
                  <a-input style="width:100%" type="text" v-model="record.totalVolume" />
                </a-form-model-item>
              </template>

              <!-- 总价 -->
              <template slot="totalPriceSlot" slot-scope="text, record, index">
                <a-form-model-item prop="totalPrice">
                  <a-input style="width:100%" type="text" v-model="record.totalPrice" />
                </a-form-model-item>
              </template>

              <!-- 操作 -->
              <span slot="operationSlot" slot-scope="text, record">
                <a-popconfirm title="确定删除吗?" ok-text="是" cancel-text="否" @confirm="handleDelete(record.id)">
                  <a href="javascript:void(0);" style="color:red;">删除</a>
                </a-popconfirm>
                <a-divider type="vertical" />
                <a @click="copy(record)">复制</a>
              </span>
            </a-table>
          </a-form-model>
        </a-spin>
      </a-card>

      <!-- 页面底部提交取消 -->
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1
        }"
      >
        <a-popconfirm title="确定放弃新增？" @confirm="handleCancel" okText="确定" cancelText="取消">
          <a-button :style="{ marginRight: '8px' }">取消</a-button>
        </a-popconfirm>
        <a-button type="primary" @click="saveAdd">
          保存
        </a-button>
      </div>
    </a-drawer>

    <!-- 参照发运明细弹框 -->
    <referShipmentDetails-modal
      ref="referShipmentDetailsModal"
      @bao="getSon"
      @ok="modalFormOk"
    ></referShipmentDetails-modal>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import moment from 'moment'

import ReferShipmentDetailsModal from '@views/advance-packingList/referShipmentDetailsModal.vue'

import { addAdvPac } from '@api/document/advance-packingList.js'

export default {
  name: 'AddAdvancePacking', // 新增预装箱单
  mixins: [JeecgListMixin],
  components: { JEllipsis, moment, ReferShipmentDetailsModal }, // 参照发运明细弹框
  data() {
    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略

    return {
      // 表头
      columns: [
        {
          title: '账套',
          dataIndex: 'acSetNo',
          width: 120,
          fixed: 'left',
          className: 'replacecolor'
        },
        {
          title: '成衣工厂',
          dataIndex: 'garmentFactory',
          width: 120,
          fixed: 'left',
          className: 'replacecolor'
        },
        {
          title: 'HOD',
          dataIndex: 'hod',
          width: 120,
          fixed: 'left',
          className: 'replacecolor'
        },
        {
          title: 'STYLE NO.',
          dataIndex: 'styleNo',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: 'PO NO.',
          dataIndex: 'poNo',
          width: 120,
          className: 'replacecolor'
        },

        {
          title: 'ITEM NO./SKU NO./UPC NO./PACKS CODE',
          dataIndex: 'itemCode',
          width: 340,
          className: 'replacecolor'
        },
        {
          title: '分销点/DC/LABEL',
          dataIndex: 'distributionPoint',
          width: 180,
          className: 'replacecolor'
        },

        {
          title: 'PREPACK SKU',
          dataIndex: 'prepackSku',
          width: 140,
          className: 'replacecolor'
        },

        {
          title: 'S',
          dataIndex: 's',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: 'M',
          dataIndex: 'm',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: 'L',
          dataIndex: 'l',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: 'XL',
          dataIndex: 'xl',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: 'XXL',
          dataIndex: 'xxl',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '3XL',
          dataIndex: 'xxxl',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '起始箱号',
          dataIndex: ' startingBoxNumber.',
          width: 120,
          className: 'replacecolor'
        },

        {
          title: '结束箱号',
          dataIndex: 'endCaseNumber',
          scopedSlots: { customRender: 'endCaseNumberSlot' },
          width: 140,
          className: 'replacecolor'
        },

        {
          title: '颜色(中英文)',
          dataIndex: 'colour',
          scopedSlots: { customRender: 'colourSlot' },
          width: 140,
          // customRender: t => ellipsis(t),
          className: 'replacecolor'
        },
        {
          title: '配码--根据U8订单来显示',
          dataIndex: 'withCode',
          width: 240,
          className: 'replacecolor'
        },
        {
          title: '件数/箱',
          dataIndex: 'piecesBox',
          width: 90,
          className: 'replacecolor'
        },
        {
          title: '箱数',
          dataIndex: 'boxNumber',
          scopedSlots: { customRender: 'boxNumberSlot' },
          width: 140,
          className: 'replacecolor'
        },

        {
          title: '总件数',
          dataIndex: 'total',
          scopedSlots: { customRender: 'totalSlot' },
          width: 140,
          className: 'replacecolor'
        },
        {
          title: '净重/箱',
          dataIndex: 'netWeight',
          width: 90,
          className: 'replacecolor'
        },
        {
          title: '总净重',
          dataIndex: 'totalNetWeight',
          scopedSlots: { customRender: 'totalNetWeightSlot' },
          width: 140,
          className: 'replacecolor'
        },

        {
          title: '毛重/箱',
          dataIndex: 'grossWeight',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '总毛重',
          dataIndex: 'totalGrossWeight',
          scopedSlots: { customRender: 'totalGrossWeightSlot' },
          width: 140,
          className: 'replacecolor'
        },
        {
          title: '外箱长度',
          dataIndex: 'outerBoxLength',
          width: 120,
          className: 'replacecolor'
        },

        {
          title: '外箱宽度',
          dataIndex: 'outerBoxWidth',
          scopedSlots: { customRender: 'outerBoxWidthSlot' },
          width: 140,
          className: 'replacecolor'
        },
        {
          title: '外箱高度',
          dataIndex: 'outerBoxHeight',
          scopedSlots: { customRender: 'outerBoxHeightSlot' },
          width: 140,
          className: 'replacecolor'
        },

        {
          title: '总体积',
          dataIndex: 'totalVolume',
          scopedSlots: { customRender: 'totalVolumeSlot' },
          width: 140,
          className: 'replacecolor'
        },
        {
          title: '净净重',
          dataIndex: 'netWeightToo',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '单价',
          dataIndex: 'unitPrice',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '总价',
          dataIndex: 'totalPrice',
          scopedSlots: { customRender: 'totalPriceSlot' },
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '备注(U8)',
          dataIndex: 'u8Remarks',
          width: 140,
          fixed: 'right',
          customRender: t => ellipsis(t),
          className: 'replacecolor'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operationSlot' },
          width: 160,
          fixed: 'right',
          className: 'replacecolor'
        }
      ],

      data: [], //子表数据
      loading: false, // 表格加载
      visible: false,
      dateFormat: 'YYYY-MM-DD',

      addAdpacking: {}, //主表信息
      confirmLoading: false,
      msgFormSon: 'test' // 子组件传来数据的变量
      // state: '0', // 单据状态初始未【仅保存】
      // pushState: '0' // 推送状态初始未【仅保存】

      // 待确定还有哪些必填信息 ----------------------------
      // validatorRules: {
      //   orderNumber: [{ required: true, message: '订单号不能为空', trigger: 'blur' }],
      //   styleNum: [{ required: true, message: '款号不能为空', trigger: 'blur' }],
      //   name: [{ required: true, message: '品名不能为空', trigger: 'blur' }]
      // },
    }
  },
  // 接收父组件查询方法
  props: {
    fatherList: {
      type: Function,
      default: null
    }
  },

  methods: {
    getSon(val) {
      // console.log('勾选发运明细数据', val)
      // for (var i in val) {
      //   val[i]['orderQuantity'] = val[i].quantity
      //   val[i]['orderRemainingQuantity'] = val[i].surplusNum
      //   val[i]['salesUnitPrice'] = val[i].unitPriceIncludingTax
      //   val[i]['customerOrder'] = val[i].customerOrderNumber
      //   val[i]['shipmentQuantity'] = val[i].surplusNum //订单剩余数量 赋值给发货数量
      // }
      this.msgFormSon = val
      this.data = this.msgFormSon
      console.log('新增页 子表信息', this.data)
    },

    // 参照发运明细
    referShipmentDetails() {
      // console.log('打开参照发运明细')
      this.$refs.referShipmentDetailsModal.referShipDetModVis = true
    },

    //  保存
    saveAdd() {
      var newObj = {} // 新增对象
      newObj.orderNumber = this.addAdpacking.orderNumber
      newObj.styleNum = this.addAdpacking.styleNum
      newObj.productName = this.addAdpacking.productName
      newObj.sizeRange = this.addAdpacking.sizeRange
      newObj.customer = this.addAdpacking.customer

      newObj.containerCode = this.addAdpacking.containerCode
      newObj.containerNumber = this.addAdpacking.containerNumber
      newObj.memo = this.addAdpacking.memo
      newObj.garmentFactory = this.addAdpacking.garmentFactory

      newObj.data = this.data // 子表信息赋值F
       newObj.outerBoxWidth = this.data.outerBoxWidth

      // 必须选择子表 --- 参照订单数据
      if (newObj.data.length == 0) {
        this.$message.error('请选择参照发运明细')
      } else {
        addAdvPac(newObj).then(res => {
          if (res.success) {
            this.$message.success('新增成功')
            console.log('新增的对象', newObj)
            this.close()
            //清空信息
            newObj = {}
            newObj.data = []
            this.fatherList() // 调用父组件 查询方法
            // this.msgFormSon = {}  清空子表信息
          }
        })
      }

      // const that = this
      // // 触发表单验证
      // this.$refs.form.validate(valid => {
      //   if (valid) {
      //     that.confirmLoading = true
      //   }
      // })
    },

    // 増行
    handleAddColumn() {
      console.log('増行')
      const addrow = {
        acSetNo: '',
        garmentFactory: '',
        hod: '',
        styleNo: '',
        poNo: '',
        itemCode: '',
        distributionPoint: '',
        prepackSku: '',
        s: '',
        m: '',
        l: '',
        xl: '',
        xxl: '',
        xxxl: '',
        startingBoxNumber: '',
        endCaseNumber: '',
        colour: '',
        withCode: '',
        piecesBox: '',
        boxNumber: '',
        total: '',
        netWeight: '',
        totalNetWeight: '',
        roughWeight: '',
        totalGrossWeight: '',
        outerBoxLength: '',
        outerBoxWidth: '',
        outerBoxHeight: '',
        totalVolume: '',
        netWeightToo: '',
        unitPrice: '',
        totalPrice: '',
        u8Remarks: '',
        operation: ''
      }
      this.data.push(addrow)
    },

    //  操作按钮 删除
    handleDelete(index) {
      return this.data.splice(index, 1)
    },
    // 复制
    copy(record) {
      this.data.push(record)
    },

    // 抽屉 取消
    handleCancel() {
      this.close()
    },

    close() {
      this.$emit('close')
      this.visible = false
      this.addAdpacking = {}
      this.data = []
    },
    aa() {},
    modalFormOk() {
      this.$refs.referShipmentDetailsModal.referShipmentDetailsModVis = true
    }
  },
  computed: {},
  mounted() {}
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
/deep/ .ant-table-thead > tr > th {
  text-align: center;
  // font-weight: 700;
}
/deep/ .ant-table-tbody {
  text-align: center;
}
// /deep/ th.replacecolor {
//   background-color: #ccc;
// }
// 抽屉里的card样式
/deep/ .ant-drawer-content {
  background-color: #f0f2f5;
}
/deep/ .ant-drawer-body {
  padding: 10px;
}
</style>
