<template>
  <!-- 列表页  装箱单-面料  from【生产进度报表】 -->
  <div id="packinglistFabricsDrawer">
    <a-drawer
      title="装箱单-面料"
      width="78%"
      placement="right"
      :closable="true"
      :visible="visible"
      @close="handleCancel"
    >
      <a-card :bordered="true">
        <!-- 列表-->
        <a-table
          bordered
          :columns="packinglistFabricsColumns"
          :data-source="packinglistFabricsData"
          :loading="loading"
          :pagination="pagination"
          :row-key="record => record.id"
        >
          <!-- 订单号  链接-->
          <span slot="orderNum" slot-scope="text">
            <a>{{ text }}</a>
          </span>
        </a-table>
      </a-card>

      <!-- 【订单号】 装箱单-面料 抽屉 -->
      <detailsFabric-drawer ref="detailsFabricDrawer" @ok="modalFormOk"></detailsFabric-drawer>
    </a-drawer>
  </div>
</template>

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

import detailsFabricDrawer from '@views/reportForms/pro-progress-report/detailsFabricDrawer.vue' //装箱单-面料（查看详情）

// import { packinglistFabricsList } from '@api/reportForms/pro-progress-report.js'

export default {
  name: 'PackinglistFabricsDrawer', // 装箱单-面料列表
  mixins: [JeecgListMixin],
  components: { JEllipsis, moment, detailsFabricDrawer },

  data() {
    // let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} />
    return {
      // 表头
      packinglistFabricsColumns: [
        {
          title: '订单号',
          dataIndex: 'orderNum',
          width: 160,
          customCell: this.orderDetailsDrawer,
          scopedSlots: { customRender: 'orderNum' },
          className: 'replacecolor'
        },
        {
          title: '外销发票号',
          dataIndex: 'exportInvoiceNo',
          width: 160,
          className: 'replacecolor'
        },
        {
          title: '集装箱号',
          dataIndex: 'containerNo',
          width: 140,
          scopedSlots: { customRender: 'containerNo' },
          className: 'replacecolor'
        },

        {
          title: '装柜日期',
          dataIndex: 'loadingDate ',
          width: 120,
          // customRender: text => {
          //   return moment(text).format('YYYY-MM-DD')
          // },
          className: 'replacecolor'
        },
        {
          title: '成衣工厂',
          dataIndex: 'clothesFactory',
          width: 160,
          className: 'replacecolor'
        },
        {
          title: '发票号',
          dataIndex: 'invoiceNum',
          width: 160,
          className: 'replacecolor'
        },

        {
          title: '制单人',
          dataIndex: 'preparedBy',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '制单日期',
          dataIndex: 'preparedDate',
          width: 120,
          // customRender: text => {
          //   return moment(text).format('YYYY-MM-DD')
          // },
          className: 'replacecolor'
        },
        {
          title: '托书号',
          dataIndex: 'bookNum',
          width: 160,
          className: 'replacecolor'
        },
        {
          title: '预托书号',
          dataIndex: 'preBookNum',
          width: 120,
          className: 'replacecolor'
        }
      ],

      packinglistFabricsData: [{ orderNum: 'AAAA' }, {}, {}],
      loading: false, // 表格加载
      // 分页
      pagination: {
        // total: '',
        // current: 0,
        // pageSize: 0
      },
      visible: false,
      dateFormat: 'YYYY-MM-DD'
    }
  },
  created() {
    this.getpackinglistFabricsList()
  },
  methods: {
    // 物料卡  装箱单-面料 - 列表
    getpackinglistFabricsList() {
      this.$nextTick(() => {
        // packinglistFabricsList({}).then(res => {
        //   if (res.success) {
        //     this.packinglistFabricsData = res.result.records
        //     console.log('装箱单列表', this.packinglistFabricsData)
        //     this.pagination = {
        //       total: res.result.total,
        //       current: 1,
        //       pageSize: res.result.size
        //     }
        //   }
        // })
      })
    },

    // 订单号详情--【装箱单-面料】 抽屉
    orderDetailsDrawer(record) {
      return {
        on: {
          click: event => {
            console.log('【装箱单列表 -- 订单号】', record)
            this.$refs.detailsFabricDrawer.visible = true
            this.$refs.detailsFabricDrawer.record = record //接口参数,获取（主表 + 所有页签信息）
            this.$refs.detailsFabricDrawer.getDetailsFabric()
          }
        }
      }
    },
    handleTableChange(pagination, filters, sorter) {
      // console.log('当前页信息>>>>',pagination)
      this.queryParam.pageNo = pagination.current
      this.getpackinglistFabricsList()
    },
    // 抽屉 取消
    handleCancel() {
      this.close()
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.$refs.form.resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/overwriter.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;
// }
</style>
