<template>
  <div class="customer-css" >
    <!--  查询时间和产品  -->
    <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;" >
      <el-row>
        <el-col :span="24" style="">
          <el-form-item :label="'BU:'">
            <el-input v-model="searchData.buNo" style="width: 130px"></el-input>
          </el-form-item>
          <el-form-item :label="'发货通知单号:'">
            <el-input v-model="searchData.orderNo" style="width: 130px"></el-input>
          </el-form-item>
          <el-form-item :label="'客户编号:'">
            <el-input v-model="searchData.customerId" style="width: 130px"></el-input>
          </el-form-item>
          <el-form-item :label="'客户名称:'">
            <el-input v-model="searchData.customerName" style="width: 130px"></el-input>
          </el-form-item>
          <el-form-item :label="'单据状态'">
            <el-select multiple collapse-tags v-model="searchData.orderStatusList" clearable style="width: 160px">
              <el-option label="待出库" value="待出库"></el-option>
              <el-option label="已出库" value="已出库"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="' '" >
            <el-button class="customer-bun-min" type="primary" @click="getMainData" style="">Query</el-button>
            <el-button @click="exportExcel()" type="primary" style="margin-left: 2px">{{'导出'}}</el-button>

          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table
      :height="height"
      :data="mainDataList"
      border
      ref="mainTable"
      highlight-current-row
      @row-click="changeData"
      v-loading="dataListLoading"
      style="margin-top: 0px; width: 100%;">
      <!--        <el-table-column-->
      <!--          fixed="left"-->
      <!--          header-align="center"-->
      <!--          align="center"-->
      <!--          width="220"-->
      <!--          :label="'操作'">-->
      <!--          <template slot-scope="scope">-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <el-table-column
        v-for="(item,index) in columnArray1" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed==''?false:item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="!item.columnHidden"> {{scope.row[item.columnProp]}}</span>
          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                             style="width: 100px; height: 80px"/></span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页插件 -->
    <el-pagination style="margin-top: 0px"
                   @size-change="sizeChangeHandle"
                   @current-change="currentChangeHandle"
                   :current-page="pageIndex"
                   :page-sizes="[20, 50, 100, 200, 500]"
                   :page-size="pageSize"
                   :total="totalPage"
                   layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <el-tabs v-model="activeName" style="margin-top: 0px; width: 99%;" @tab-click="tabClick" class="customer-tab" type="border-card">
      <el-tab-pane label="装箱清单" name="boxing" style="">
        <boxing ref="boxing"></boxing>
      </el-tab-pane>
      <el-tab-pane label="出库单明细" name="outboundDetail">
        <el-table
          :data="detailList"
          :height="height - 20"
          border
          style="width: 100%;">
          <el-table-column
            v-for="(item,index) in columnDetailList" :key="index"
            :sortable="item.columnSortable"
            :prop="item.columnProp"
            :header-align="item.headerAlign"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :align="item.align"
            :fixed="item.fixed===''?false:item.fixed"
            :min-width="item.columnWidth"
            :label="item.columnLabel">
            <template slot-scope="scope">
              <span v-if="!item.columnHidden">{{scope.row[item.columnProp]}}</span>
              <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>




  </div>
</template>

<script>
/*组件*/


import excel from "@/utils/excel-util.js";
import boxing from "./com_saleBoxManage_boxing.vue"
import {getOutboundDetail, searchOutboundNotification} from '../../../api/qc/outbound_notification'


export default {
  data() {
    return {
      functionId: this.$route.meta.menuId,
      height: 200,
      currentRow: {},
      searchData:{
        orderNo:'',
        customerId:'',
        orderType:'销售出库',
        orderStatus: '',
        orderStatusList: ['待出库'],
        buNo:'',
        customerName:'',
        site:this.$store.state.user.site,
        userName:this.$store.state.user.name,
        page: 1,
        limit: 10,
      },
      pageIndex: 1,
      pageSize: 50,
      totalPage: 0,
      tagNo:'',
      mainDataList:[],
      detailList:[],
      dataListLoading: false,
      activeName: 'boxing',
      columnArray1: [
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1BU',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "buNo",
          headerAlign: "center",
          align: "left",
          columnLabel: "BU",
          columnWidth: '60',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1OrderNo',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "orderNo",
          headerAlign: "center",
          align: "left",
          columnLabel: "发货通知单号",
          columnWidth: '100',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1OrderStatus',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "orderStatus",
          headerAlign: "center",
          align: "left",
          columnLabel: "通知单状态",
          columnWidth: '80',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1CustomerId',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "customerId",
          headerAlign: "center",
          align: "left",
          columnLabel: "客户编号",
          columnWidth: '100',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1CustomerName',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "customerName",
          headerAlign: "center",
          align: "left",
          columnLabel: "客户编号",
          columnWidth: '240',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: '750001Table1RequiredOutboundDate',
          tableId: "750001Table1",
          tableName: "销售发货清单",
          columnProp: "requiredOutboundDate",
          headerAlign: "center",
          align: "left",
          columnLabel: "要求发货日期",
          columnWidth: '120',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
      ],
      columnDetailList: [
        {
          columnProp: 'relatedOrderNo',
          headerAlign: "center",
          align: "left",
          columnLabel: '销售订单号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },
        {
          columnProp: 'relatedOrderLineNo',
          headerAlign: "center",
          align: "right",
          columnLabel: '销售订单行号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },
        {
          columnProp: 'partNo',
          headerAlign: "center",
          align: "left",
          columnLabel: '物料编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120,
        },
        {
          columnProp: 'partDesc',
          headerAlign: "center",
          align: "left",
          columnLabel: '物料名称',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 200,
        },
        {
          columnProp: 'orderQty',
          headerAlign: "center",
          align: "right",
          columnLabel: '销售订单数量',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },
        {
          columnProp: 'requiredQty',
          headerAlign: "center",
          align: "right",
          columnLabel: '要求发货数量',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },
        {
          columnProp: 'unit',
          headerAlign: "center",
          align: "left",
          columnLabel: '单位',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },
      ],
      exportName: '发货通知单'+this.dayjs().format('YYYYMMDDHHmmss'),
    }
  },
  /*组件*/
  components: {
    boxing,
  },

  mounted() {
    this.$nextTick(() => {
      this.height = ( window.innerHeight - 220)/2;
    })
  },
  methods: {

    getMainData(){
      this.searchData.limit = this.pageSize
      this.searchData.page = this.pageIndex
      searchOutboundNotification(this.searchData).then(({data}) => {
        if (data.code === 0) {
          this.mainDataList = data.page.list
          this.pageIndex = data.page.currPage
          this.pageSize = data.page.pageSize
          this.totalPage = data.page.totalCount
          //判断是否全部存在数据
          if (this.totalPage > 0) {
            //设置选中行
            this.$refs.mainTable.setCurrentRow(this.mainDataList[0])
            this.changeData(this.mainDataList[0])

          }else {
            this.changeData(null)
          }
        }
        this.dataListLoading = false
      })
    },
    tabClick(tab, event){
      this.refreshCurrentTabTable()
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getMainData()
    },

    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getMainData()
    },
    changeData(row){
      this.currentRow=JSON.parse(JSON.stringify(row))
      this.refreshCurrentTabTable ();
    },
    refreshCurrentTabTable(){
      if(this.currentRow===''||this.currentRow===null){
        this.currentRow={site:'',supplierNo:''}
      }
      if(this.activeName==='boxing'){
        this.refreshBoxingTable();
      }
      if(this.activeName==='outboundDetail'){
        this.refreshDetailTable();
      }

    },
    async exportExcel() {
      this.searchData.limit = -1
      this.searchData.page = 1
      excel.exportTable({
        url: "/outbound/searchOutboundNotification",
        columnMapping:  this.columnArray1,//可以直接用table，不需要的列就剔除
        mergeSetting: [],//需要合并的列
        params: this.searchData,
        fileName: this.exportName+".xlsx",
        rowFetcher: res => res.data,
        columnFormatter: [],
        dropColumns: [],//需要剔除的列，例如dropColumns: ["netWeight"]，即剔除净重列
      });
    },
    refreshBoxingTable(){
      let inData={
        site: this.currentRow.site,
        buNo: this.currentRow.buNo,
        orderNo: this.currentRow.orderNo,
        boxType: this.currentRow.orderType,
        height:Number(this.height)-25
      }
      this.$refs.boxing.init(inData)
    },
    refreshDetailTable(){
      let templateData = {
        site: this.currentRow.site,
        buNo: this.currentRow.buNo,
        orderNo: this.currentRow.orderNo,
      }
      getOutboundDetail(templateData).then(({data}) => {
        this.detailList = data.rows
      })
    },
  },
  created() {
    //查询报表的类型
    this.getMainData();
  },


}
</script>

<!--当前页面的标签样式-->
<style scoped lang="scss">

/deep/ .customer-tab .el-tabs__content {
  padding: 5px !important;
}


</style>
