<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="库区">
              <a-form-model-item prop="zoneOptions">
                <j-multi-select-tag
                  v-model="queryParam.zoneCode"
                  :options="zoneOptions"
                  placeholder="请选择库区">
                </j-multi-select-tag>
              </a-form-model-item>
            </a-form-item>
          </a-col>


          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="物料编码">
              <a-input placeholder="请输入物料编码" v-model="queryParam.materialCode" ></a-input>
            </a-form-item>
          </a-col>

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: true }"
        bordered
        :columns="columns"
        rowKey="id"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:'radio'}"
        class="j-table-force-nowrap"
        @change="handleTableChange"
        :customRow="clickThenSelect"
        :rowClassName="rowClassName"
      >
       <span slot="zoneCode" slot-scope="zoneCode">
          <a-tag :key="zoneCode" color=blue>
            {{ solutionZoneCode(zoneCode) }}
          </a-tag>
        </span>

        <span slot="companyCode" slot-scope="companyCode">
          <a-tag :key="companyCode" color="blue">
            {{ solutionCompany(companyCode) }}
          </a-tag>
        </span>

      </a-table>
    </div>

    <a-tabs defaultActiveKey="1">
      <a-tab-pane tab="库存详情" key="1">
        <InventoryDetailList :mainId="selectedMainId"></InventoryDetailList>
      </a-tab-pane>
    </a-tabs>
  </j-modal>
</template>

<script>
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {mixinDevice} from '@/utils/mixin'
import InventoryDetailList from "../../inventory/InventoryDetailList";
import {getZoneList, getCompanyList} from "@api/api";
import '@/assets/less/TableExpand.less'

export default {
  name: "SelectInvContainerHeader",
  mixins: [JeecgListMixin, mixinDevice],
  components: {InventoryDetailList},
  data() {
    return {
      title: "选择容器",
      width: 1200,
      visible: false,
      model: {},
      selectedMainId: '',
      selectedCode: '',
      selectIndex: null,
      zoneOptions: [],
      companyList: [],
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      dataSource: [],
      ipagination: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['5', '10', '20'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      // 表头
      columns: [
        {
          title: '货主',
          align: 'center',
          dataIndex: 'companyCode',
          key: 'companyCode',
          scopedSlots: {customRender: 'companyCode'}
        },
        {
          title: '库区',
          align: "center",
          dataIndex: 'zoneCode',
          key: 'zoneCode',
          scopedSlots: {customRender: 'zoneCode'}
        },
        {
          title: '容器编码',
          align: 'center',
          dataIndex: 'containerCode'
        },
        {
          title: '容器状态',
          align: "center",
          dataIndex: 'containerStatus_dictText',
          scopedSlots: {customRender: 'containerStatus_dictText'}
        },
        {
          title: '库位编码',
          align: 'center',
          dataIndex: 'locationCode'
        },
        {
          title: '物料编码',
          align: 'center',
          dataIndex: 'materialCode'
        },
        {
          title: '物料名称',
          align: 'center',
          dataIndex: 'materialName'
        },
        {
          title: '物料规格',
          align: 'center',
          dataIndex: 'materialSpec'
        },
        {
          title: '物料单位',
          align: 'center',
          dataIndex: 'materialUnit'
        },
        {
          title: '数量',
          align: 'center',
          dataIndex: 'qty'
        },
        {
          title: '任务锁定数量',
          align: 'center',
          dataIndex: 'taskQty'
        },
        // {
        //   title: '托盘填充度',
        //   align: 'center',
        //   dataIndex: 'fillDensity',
        //   customRender: text => {
        //     return text == null ? '' : text + '%'
        //   }
        // },
        {
          title: '库存状态',
          align: 'center',
          dataIndex: 'inventoryStatus_dictText',
          scopedSlots: {customRender: 'inventoryStatus_dictText'}
        },
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   align: 'center',
        //   fixed: 'right',
        //   width: 147,
        //   scopedSlots: {customRender: 'action'}
        // }
      ],

      confirmLoading: false,
      url: {
        list: "inventory/inventoryDetail/selectContainerlist",
      }

    }
  },
  created() {
    this.loadFrom();
  },
  methods: {
    loadFrom() {
      getZoneList().then((res) => {
        if (res.success) {
          this.zoneList = res.result
          //延迟半秒执行,避免组件未加载完,数据已经加载完
          setTimeout(() => {
            //slice可以在数组的任何位置进行删除/添加操作
            this.zoneOptions.splice(0, 1);
            for (let i = 0; i < res.result.length; i++) {
              this.zoneOptions.push({value: res.result[i].code, text: res.result[i].name})
            }
          }, 500)
        }
      });

      getCompanyList().then(res => {
        if (res.success) {
          this.companyList = res.result
        }
      })

    },
    solutionCompany(value) {
      var actions = []
      Object.keys(this.companyList).some(key => {
        if (this.companyList[key].code == '' + value) {
          actions.push(this.companyList[key].name)
          return true
        }
      })
      return actions.join('')
    },
    solutionZoneCode(value) {
      var actions = []
      Object.keys(this.zoneList).some((key) => {
        if (this.zoneList[key].code == ('' + value)) {
          actions.push(this.zoneList[key].name)
          return true
        }
      })
      return actions.join('')
    },
    edit(record) {
      this.queryParam.materialCode = record.materialCode
      this.selectedMainId = '';
      this.searchQuery();
      this.visible = true;
    },
    handleOk() {
      if(this.selectedCode==''){
        this.$message.warning('请选择一条容器数据!')
        return falsel
      }
      this.$emit("getContainer", this.selectedCode);
      this.visible = false;

    },
    handleCancel() {
      this.visible = false;
    },
    clickThenSelect(record,index) {
      return {
        on: {
          click: () => {
            this.selectIndex = index
            this.onSelectChange(record.inventoryHeaderId.toString().split(','), [record])
          }
        }
      }
    },
    rowClassName(record, index) {
      return index === this.selectIndex ? 'Rowactive' : ''
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedMainId = ''+selectionRows[0].inventoryHeaderId+'';
      this.selectedCode = selectionRows[0].containerCode;
      this.selectedRowKeys = selectedRowKeys;
      this.selectRecord = selectionRows;
    },
  }
}
</script>

<style scoped>

</style>