<template>
  <a-modal
    title="库内物资查询"
    :visible="visible"
    :footer="null"
    :width="1500"
    @cancel="handleCancel">
    <div class="table-page-search-wrapper" style="margin-bottom: 15px;">
        <a-select v-model="storeCode" placeholder="请选择库房" show-search allowClear option-filter-prop="children" :filter-option="filterOption" style="width: 200px;margin-right: 10px;">
          <a-select-option :value="item.storeCode" v-for="item in storeList" :key="item.storeCode">
              {{ item.storeName }}
            </a-select-option>
        </a-select>
        <a-input v-model="goodsName" @keyup.enter.native="initData" placeholder="请输入物资名称/物资代码" clearable style="width: 200px;margin-right: 10px;"/>
        <a-button type="primary" @click="initData">查询</a-button>
        <a-button style="margin-left: 5px;" @click="reset">重置</a-button>
    </div>
    <a-row :gutter="24">
      <a-col :span="12">
        <a-table rowKey="storeCode" bordered :rowClassName="rowClassName" :data-source="data" :columns="warehouseColumns" :customRow="warehouseRowClick"
         :pagination="ipagination" @change="handleTableChange"/>
        <a-table rowKey="goodsCode" bordered :rowClassName="rowClassName" :data-source="goodsData" :columns="goodsColumns" :customRow="goodsRowClick"
          :pagination="ipagination1" @change="handleTableChange1"/>
      </a-col>
      <a-col :span="12">
        <a-table bordered :data-source="modelData" :columns="modelColumns" :pagination="ipagination2" @change="handleTableChange2"/>
      </a-col>
    </a-row>  
    
  </a-modal>
</template>
<script>
import { postAction, getAction } from '@/api/manage'
export default {
  data() {
    return {
      visible: false,
      url: '/bigSunmmary/getStockSum',
      ipagination:{
        current: 1,
        pageSize: 4,
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        total: 0
      },
      ipagination1:{
        current: 1,
        pageSize: 4,
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        total: 0
      },
      ipagination2:{
        current: 1,
        pageSize: 4,
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        total: 0
      },
      warehouseRowClick: record => ({
        on: {
          click: () => {
            // 点击改行时要做的事情
            this.initGoodsData(record)
          }
        }
      }),
      goodsRowClick: record => ({
        on: {
          click: () => {
            this.initModelData(record)
          }
        }
      }),
      storeList: [],
      data: [],
      goodsData: [],
      modelData: [],
      goodsName: '',
      storeCode: undefined,
      activeWarehouse: '',
      activeGoods: '',
      warehouseColumns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 70,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '库房名称',
          dataIndex: 'storeName'
        },
        {
          title: '总垛位数',
          dataIndex: 'rackQty',
        },
        {
          title: '已用垛位数',
          dataIndex: 'useQty',
        },
        {
          title: '库存数',
          dataIndex: 'stockQty'
        },
      ],
      goodsColumns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 70,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '物资代码',
          dataIndex: 'goodsCode',
        },
        {
          title: '物资名称',
          dataIndex: 'goodsName'
        },
        {
          title: '数量',
          dataIndex: 'qty'
        },
      ],
      modelColumns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 70,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '号型代码',
          dataIndex: 'modelCode',
        },
        {
          title: '号型名称',
          dataIndex: 'modelName'
        },
        {
          title: '所在货位',
          dataIndex: 'positionCode'
        },
        {
          title: '数量',
          dataIndex: 'qty'
        },
      ],
    };
  },
  methods: {
    rowClassName (record, index) {
      let className = "light-row";
      if (index % 2 === 1) className = "dark-row"
      if (record === this.activeWarehouse) className += " table_active"
      if (record === this.activeGoods) className += " table_active"
      return className
    },
    reset() {
      this.goodsName = ''
      this.storeCode = undefined
      this.initData()
    },
    initStore() {
      getAction('/bigSunmmary/getAllStore').then(res => {
        this.storeList = res.data
      })
    },
    initData() {
      var params = {}
      params.pageNo = this.ipagination.current;
      params.pageSize = this.ipagination.pageSize;
      params.goodsCode = this.goodsName
      params.storeCode = this.storeCode
      postAction(this.url, params).then(res => {
        this.data = res.data.records;
        this.ipagination.total = res.data.totalRows - 0;
        if (this.data.length > 0) {
          this.activeWarehouse = this.data[0]
          this.initGoodsData()
        } else {
          this.modelData = []
          this.goodsData = []
        }
      })
    },
    initGoodsData(record) {
      this.activeWarehouse = record || this.activeWarehouse
      postAction('/bigSunmmary/getGoodsSumByStoreCode', {storeCode: this.activeWarehouse.storeCode, goodsCode: this.goodsName}).then(res => {
        this.goodsData = res.data.records;
        this.ipagination1.total = res.data.totalRows - 0;
        if (this.goodsData.length > 0) {
          this.activeGoods = this.goodsData[0]
          this.initModelData()
        } else {
          this.modelData = []
          this.ipagination2.total = 0;
        }
      })
    },
    initModelData(record) {
      this.activeGoods = record || this.activeGoods
      postAction('/bigSunmmary/getGoodsDetailByStoreCode', {storeCode: this.activeWarehouse.storeCode, goodsCode:  this.goodsName || this.activeGoods.goodsCode}).then(res => {
        this.modelData = res.data.records;
        this.ipagination2.total = res.data.totalRows - 0;
      })
    },
    handleCancel(e) {
      this.visible = false;
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      }
      this.ipagination = pagination;
      this.initData();
    },
    handleTableChange1(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      }
      this.ipagination1 = pagination;
      this.initGoodsData();
    },
    handleTableChange2(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      }
      this.ipagination2 = pagination;
      this.initModelData();
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    }
  },
};
</script>


<style>
.light-row {
  background-color: #fff;
}
.dark-row {
  background-color: #fafafa;
}
/* table选中样式 */
.table_active {
  background-color: #e6f7ff;
}
</style>
