<template>
  <div class='tableList'>
    <!-- 商品详情 -->
    <itemDetail ref='detailItem' :itemId='itemId' />

    <div style='font-size: 16px; color: #333333; font-weight: bold'>{{ pickOrderId }}</div>
    <!-- 是否有数据 -->
    <div v-if='data.length'>
      <!-- 未绑定任务数 boundTask_notNum-->
      <div class='orderNo' v-if='boundTask_notNum'>
        <span style='font-size: 16px; font-weight: bold'>
          <span class='green'>已绑定任务：{{ boundTask_num + ' / ' + data.length }}</span>
          <span class='red' style='margin-left: 39px'>未绑定任务：{{ boundTask_notNum }}</span>
        </span>
        <p-input
          ref='scan'
          v-model='containerCode'
          placeholder='请扫描容器码或输入后按回车绑定任务'
          @pressEnter='pressEnter'
          allowClear
        >
          <a-icon slot='prefix' type='scan' />
        </p-input>
      </div>
      <div v-else style='display: flex; justify-content: center; align-items: center; margin-bottom: 20px'>
        <p-icon type='check-circle' theme='filled' style='color: #2da641; font-size: 25px' />
        <span style='font-size: 18px; color: #1890ff; text-align: center; line-height: 32px; font-weight: bold'>
          所有容器都已绑定成功！
        </span>
      </div>
    </div>
    <!--
		:expandedRowKeys="" 展开的行，控制属性。可用 .sync 后缀, 参见 update:expandedRowKeys
		 expandRowByClick 	通过点击行来展开子行
	-->
    <p-table
      dragle
      auto-width
      :columns='columns'
      :data-source='data'
      rowKey='pickTaskId'
      class='components-table-demo-nested'
      style='margin-top: 30px'
      :row-select-type='0'
      :hasRow-count='false'
      expand-row-by-click
      :expandedRowKeys='[rows.pickTaskId]'
      @expand='checkRow'
      @change='changePagination'
      :pagination='pagination'
      :loading='loading'
    >
      <template slot='status' slot-scope='text, rows, index'>
        {{ text | statusFilter }}
      </template>
      <p-table
        dragle
        auto-width
        :scroll='{ x: true }'
        slot='expandedRowRender'
        slot-scope='text'
        rowKey='pickTaskDId'
        :columns='columns2'
        :data-source='data2'
        :rowSelectType='0'
        @change='changePagination2'
        :pagination='pagination2'
        :loading='loading2'
      >
        <template slot='title'> 任务明细</template>
        <!-- <template slot="footer"> <span>&nbsp; &nbsp; </span></template> -->
        <template v-slot:operation='txet, rows, index'>
          <a @click='checkItem(rows)'>详情</a>
        </template>
      </p-table>
    </p-table>
  </div>
</template>

<script>
// 商品详情
import itemDetail from '@/views/kzyWMS/components/itemDetail'
import { list_picktaskh, list_picktaskd, picktask_bind_container } from '../../config/api.js'

const columns = [
  /* { title: '主表id', dataIndex: 'pickTaskId',ellipsis:false  }, */
  { title: '容器编号', dataIndex: 'containerCode' },
  { title: '状态', dataIndex: 'status', key: 'status', scopedSlots: { customRender: 'status' } },
  { title: '已拣数量', dataIndex: 'pickQty' },
  { title: '拣选数量', dataIndex: 'qty' },
  { title: '待拣数量', dataIndex: 'unPickQty' }
]
const data = []
const columns2 = [
  { dataIndex: 'srcCode', title: '订单编号', width: 120 },
  { title: '批号', dataIndex: 'manufacturerLotNum', width: 120 },
  { title: '商品编号', dataIndex: 'itemCode', width: 120 },
  { title: '商品名称', dataIndex: 'itemName', width: 150 },
  { title: '数量', dataIndex: 'qty', width: 80 },
  { title: '已拣数量', dataIndex: 'pickQty', width: 80 },
  { dataIndex: 'uom', title: '单位', width: 80 },
  { dataIndex: 'conversionRate', title: '包装数量', width: 80 },
  { dataIndex: 'manufacturer', title: '生产厂家', width: 120 },
  /* { title: '复核数量', dataIndex: 'checkQty' }, */
  { title: '库区编号', dataIndex: 'warehouseAreaCode', width: 80 },
  { title: '货位编号', dataIndex: 'locatorCode', width: 80 },
  //   {title: '生产日期',dataIndex: 'productionDate',width:120},
  //   {title: '有效期至',dataIndex: 'expiredDate',width:120},
  { title: '生产日期', dataIndex: 'productionDateShow', width: 120 },
  { title: '有效期至', dataIndex: 'expiredDateShow', width: 120 },
  { title: '操作', dataIndex: 'operation', scopedSlots: { customRender: 'operation' }, fixed: 'right' }
]

const data2 = []

export default {
  components: { itemDetail },
  filters: {
    statusFilter(value) {
      if (value === '0') return '待索取'
      if (value === '1') return '待确认'
      if (value === '2') return '待复核'
      if (value === '3') return '已完成'
      return ''
    }
  },
  props: {
    pickOrderId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      data,
      columns,
      columns2,
      data2,
      rows: {},
      itemId: null,
      boundTask_num: 0, //已绑定任务
      boundTask_notNum: 0, //未绑定任务
      containerCode: '', //扫描容器条码
      loading: false,
      loading2: false,
      pagination: {
        total: 0,
        pageSize: 10, //每页中显示10条数据
        current: 1,
        showSizeChanger: true,
        pageSizeOptions: ['10', '15', '20'], //每页中显示的数据
        showTotal: (total) => `共有 ${total} 条数据` //分页中显示总的数据
      },
      pagination2: {
        total: 5,
        pageSize: 10, //每页中显示10条数据
        current: 1,
        showSizeChanger: true,
        pageSizeOptions: ['10', '15', '20'], //每页中显示的数据
        showTotal: (total) => `共有 ${total} 条数据` //分页中显示总的数据
      }
    }
  }, //data
  methods: {
    async getData(params) {
      params = {
        pageNum: this.pagination.current,
        pageSize: this.pagination.pageSize,
        ...params
      }
      if (!params.pickOrderId) return
      this.loading = true
      await list_picktaskh(params)
        .then((res) => {
          if (res.success) {
            this.data = res.data
            this.pagination.total = Number(res.data.totalCount)
            this.loading = false
          } else {
            this.loading = false
            this.$exception(res)
          }
        })
        .finally(() => {
          this.loading = false
        })
      // 计算已绑定任务数 ,过滤容器编号containerCode不为空或null或undefinde的记录
      let temp = this.data.filter((item) => {
        console.log('判断item.containerCode || \'\'：', item.containerCode || '')
        return item.containerCode || ''
      })
      this.boundTask_num = temp.length
      console.log('已绑定:', this.boundTask_num + ' / ' + this.data.length)
      // 未绑定任务数 =  总记录 - 已绑定任务
      this.boundTask_notNum = this.data.length - this.boundTask_num
      console.log('未绑定:', this.boundTask_notNum + ' / ' + this.data.length)
    },
    getData2(params) {
      params = {
        pageNum: this.pagination2.current,
        pageSize: this.pagination2.pageSize,
        ...params
      }
      // if (!params.pickOrderId) return
      this.loading2 = true
      list_picktaskd(params).then((res) => {
        if (res.success) {
          this.data2 = res.data
          // 扫描监管码数据
          // this.$emit('emitData',[...res.data]);
          this.pagination2.total = Number(res.data.totalCount)
          this.loading2 = false
        } else {
          this.loading2 = false
          this.$exception(res)
        }
      })
    },
    // 控制展开的行，控制属性。可用 .sync 后缀,
    checkRow(bool, selectedRows) {
      if (bool) {
        this.rows = { ...selectedRows }
        this.getData2({ pickTaskId: this.rows.pickTaskId })
      } else {
        this.rows = ''
      }
      console.log('展开行:', bool, selectedRows, this.rows)
    },
    changePagination(pagination, filters, sorter) {
      // 分页变化
      console.log(pagination, filters, sorter, '分页变化分页变化')
      this.pagination = pagination
      this.getData({ pickOrderId: this.pickOrderId }) //分页查询所有列表
    },
    changePagination2(pagination, filters, sorter) {
      // 分页变化
      console.log(pagination, filters, sorter, '分页变化分页变化')
      this.pagination2 = pagination
      this.getData2({ pickTaskId: this.rows.pickTaskId }) //分页查询所有列表
    },
    // 请扫描容器条码绑定任务
    pressEnter(e) {
      console.log('请扫描容器码绑定或输入后按回车绑定', e)
      if (this.containerCode) {
        picktask_bind_container({ pickOrderId: this.pickOrderId, containerCode: this.containerCode }).then((res) => {
          if (res.success) {
            this.$message.success(this.containerCode + '容器任务绑定成功')
            this.getData({ pickOrderId: this.pickOrderId })
            this.$emit('getDataEmit')
            this.containerCode = ''
          } else {
            this.$exception(res)
          }
        })
      } else {
        this.$message.warning('容器编号为空！')
      }
    },
    // 商品详情
    checkItem(item) {
      this.itemId = item.itemId
      this.$refs.detailItem.open()
    }
  }, //methods
  watch: {
    // 监控拣选单id
    pickOrderId(nVal, oVal) {
      if (nVal) {
        this.getData({ pickOrderId: nVal })
      } else {
        this.data = []
      }
    }
  },
  created() {
    // this.getData();  //分页查询所有列表
  }
}
</script>

<style scoped='scoped' lang='less'>
.tableList {
  .orderNo {
    margin-top: 15px;

    ::v-deep .ant-input-affix-wrapper {
      display: inline-block;
      width: 426px;
      margin-left: 129px;

      .ant-input {
        height: 50px;
        line-height: 50px;
        border-radius: 2px;
        padding-left: 5em;
        font-size: 18px;
        font-weight: bold;
      }

      i.anticon {
        margin-left: 20px;
        color: #bababa;
        font-size: 25px;
      }
    }
  }

  .table_list {
    height: calc(100% - 125px);
    overflow-x: hidden;
    overflow-y: visible;
  }
}
</style>
