<template>
  <!-- 编辑 预装箱单 回显信息，有文本框-->
  <div id="editAdpackingDrawer">
    <a-drawer title="编辑" width="89%" placement="right" :closable="true" :visible="visible" @close="onClose">
      <!-- 主表信息 填写 :rules="validatorRules" -->
      <a-card :bordered="true">
        <div class="table-page-search-wrapper">
          <a-form-model layout="inline" ref="form" :model="editAdpacking">
            <a-row :gutter="24">
              <a-col :md="6" :sm="8">
                <a-form-model-item label="订单号" prop="orderNumber">
                  <a-input placeholder="请输入订单号" v-model="editAdpacking.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="editAdpacking.styleNum"></a-input>
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="品名" prop="name">
                  <a-input placeholder="请输入品名" v-model="editAdpacking.name"></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="editAdpacking.sizeRange"></a-input>
                  <!-- <a-select placeholder="请选择尺码范围">
                <a-select-option value="">请选择</a-select-option>
                <a-select-option value="0">客户1</a-select-option>
                <a-select-option value="1">客户2</a-select-option>
                <a-select-option value="2">客户3</a-select-option>
              </a-select> -->
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="客户" prop="customer">
                  <a-input placeholder="请输入客户" v-model="editAdpacking.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="editAdpacking.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="editAdpacking.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="editAdpacking.memo"></a-input>
                </a-form-model-item>
              </a-col>

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

      <!--操作按钮区域 参照发运明细 増行-->
      <a-card :bordered="true" 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>

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

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

          <!-- 箱数 -->
          <template slot="boxes" 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="totalPackagesNum" slot-scope="text, record, index">
            <a-form-model-item prop="totalPackagesNum">
              <a-input style="width:100%" type="text" v-model="record.totalPackagesNum" />
            </a-form-model-item>
          </template>

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

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

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

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

          <!-- 总体积 -->
          <template slot="totalVolume" 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>

          <!-- 操作 -->
          <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="saveEdit">
          保存
        </a-button>
      </div>
    </a-drawer>

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

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

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

import { itemByMainId, editById } from '@api/document/advance-packingList.js'

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

    return {
      editAdpacking: {}, // 主表编辑预装箱单-成衣
      // 表头
      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.',
          width: 140,
          className: 'replacecolor'
        },

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

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

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

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

        {
          title: '总体积',
          dataIndex: 'totalVolume',
          width: 140,
          className: 'replacecolor'
        },
        {
          title: '净净重',
          dataIndex: 'netWeightToo',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '单价',
          dataIndex: 'unitPrice',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '总价',
          dataIndex: 'totalPrice',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '备注(U8)',
          dataIndex: 'u8Remarks',
          width: 140,
          fixed: 'right',
          customRender: t => ellipsis(t),
          className: 'replacecolor'
        }
      ],
      data: [], //子表信息
      loading: false, // 表格加载
      visible: false,
      // validatorRules: {
      //   orderNumber: [{ required: true, message: '订单号不能为空', trigger: 'blur' }],
      //   styleNum: [{ required: true, message: '款号不能为空', trigger: 'blur' }],
      //   name: [{ required: true, message: '品名不能为空', trigger: 'blur' }]
      //   // 待确定还有哪些必填信息
      // },

      // confirmLoading: false,
      dateFormat: 'YYYY-MM-DD',
      record: {}
    }
  },

  // 接收父组件查询方法
  props: {
    fatherList: {
      type: Function,
      default: null
    }
  },
  created() {
    this.getEditInfo()
  },
  methods: {
    getEditInfo() {
      this.$nextTick(() => {
        itemByMainId({ id: this.record.id }).then(res => {
          if (res.code == 0) {
            console.log('点击的对象', res.result)
            this.editAdpacking = res.result //主表信息
            this.data = res.result.syPreAssembledPackingListItemList //子表信息
          }
        })
      })
    },

    //  保存
    saveEdit() {
      console.log('保存编辑、刷新预装箱单-成衣')
      // const that = this
      // // 触发表单验证
      // this.$refs.form.validate(valid => {
      //   if (valid) {
      //     that.confirmLoading = true
      //   }
      // })
      this.close()
      // this.getShipmentList() // 刷新 预装箱单-成衣列表
    },
    // 参照发运明细
    referShipmentDetails() {
      console.log('打开发运明细')
      this.$refs.referShipmentDetailsModal.referShipmentDetailsModVis = 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(record) {},

    // 复制
    copy(record) {},

    onClose() {
      this.visible = false
    },
    handleCancel() {
      console.log('where')
    },
    aa() {},
    modalFormOk() {}
  },
  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>
