<template>
  <div class="mod-config yzz">
    <!-- 查询条件 - rqrq -->
    <el-form label-position="top" style="margin-top: 1px; margin-left: 0px;">
      <el-form :inline="true" label-position="top" style="margin-top: 0px">
        <el-form-item label="工厂">
          <el-input v-model="searchData.site" style="width: 100px" disabled></el-input>
        </el-form-item>
        <el-form-item label="领料单号">
          <el-input v-model="searchData.notifyNo" style="width: 140px" clearable></el-input>
        </el-form-item>
        <el-form-item label="订单号">
          <el-input v-model="searchData.soorderNo" style="width: 140px" clearable></el-input>
        </el-form-item>
        <el-form-item label="订单类型">
          <el-select v-model="searchData.orderType" placeholder="请选择" style="width: 120px">
            <el-option label="全部" value=""></el-option>
            <el-option label="shoporder" value="shoporder"></el-option>
            <el-option label="shipment" value="shipment"></el-option>
            <el-option label="slittingorder" value="slittingorder"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="推送WCS">
          <el-select v-model="searchData.pushWmsFlag" placeholder="请选择" style="width: 100px">
            <el-option label="全部" value=""></el-option>
            <el-option label="是" value="Y"></el-option>
            <el-option label="否" value="N"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="立库取出">
          <el-select v-model="searchData.transportFlag" placeholder="请选择" style="width: 100px">
            <el-option label="全部" value=""></el-option>
            <el-option label="是" value="Y"></el-option>
            <el-option label="否" value="N"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="' '">
          <el-button type="primary" @click="searchTable()">查询</el-button>
        </el-form-item>
      </el-form>
    </el-form>

    <!-- 主表 - 申请单订单列表 - rqrq -->
    <el-table
      :data="dataList"
      @row-click="changeData"
      :height="height"
      border
      highlight-current-row
      ref="mainTable"
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        v-for="(item,index) in columnList1"
        :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">
          <!-- 推送WCS特殊显示 - rqrq -->
          <span v-if="item.columnProp === 'pushWmsFlag'" :style="{color: scope.row.pushWmsFlag === 'Y' ? '#67C23A' : '#909399'}">
            {{ scope.row.pushWmsFlag === 'Y' ? '是' : '否' }}
          </span>
          <!-- 立库取出特殊显示 - rqrq -->
          <span v-else-if="item.columnProp === 'transportFlag'" :style="{color: scope.row.transportFlag === 'Y' ? '#67C23A' : '#909399'}">
            {{ scope.row.transportFlag === 'Y' ? '是' : '否' }}
          </span>
          <!-- 订单类型特殊显示（中文）- rqrq -->
          <span v-else-if="item.columnProp === 'orderType'" :style="{color: getOrderTypeColor(scope.row.orderType), fontWeight: 'bold'}">
            {{ getOrderTypeText(scope.row.orderType) }}
          </span>
          <!-- 普通列显示 -->
          <span v-else-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 - rqrq -->
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[20, 50, 100, 1000]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <!-- 明细表 - 预留标签清单 - rqrq -->
    <el-tabs style="font-size: 12px;min-height: 200px;margin-top:10px" class="customer-tab" v-model="activeName" type="border-card">
      <el-tab-pane label="预留标签清单" name="labelDetail">
        <el-table
          :data="detailList"
          :height="detailHeight"
          border
          v-loading="detailLoading"
          style="width: 100%;">
          <el-table-column
            v-for="(item,index) in columnList2"
            :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">
              <!-- 立库取出特殊显示 - rqrq -->
              <span v-if="item.columnProp === 'outWcsFlag'" :style="{color: scope.row.outWcsFlag === 'Y' ? '#67C23A' : '#909399'}">
                {{ scope.row.outWcsFlag === 'Y' ? '是' : '否' }}
              </span>
              <!-- 发料标志特殊显示 - rqrq -->
              <span v-else-if="item.columnProp === 'issureFlag'" :style="{color: scope.row.issureFlag === 'Y' ? '#67C23A' : '#909399'}">
                {{ scope.row.issureFlag === 'Y' ? '是' : '否' }}
              </span>
              <!-- 订单类型特殊显示（中文）- rqrq -->
              <span v-else-if="item.columnProp === 'orderType'" :style="{color: getOrderTypeColor(scope.row.orderType), fontWeight: 'bold'}">
                {{ getOrderTypeText(scope.row.orderType) }}
              </span>
              <!-- 普通列显示 -->
              <span v-else-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  searchNotifyOrderList,
  searchMaterialListDetail
} from '@/api/automatedWarehouse/notifyDetailQuery.js'

export default {
  name: 'notifyDetailQuery',
  data() {
    return {
      height: 200,
      detailHeight: 200,
      activeName: 'labelDetail',
      dataListLoading: false,
      detailLoading: false,
      dataList: [],
      detailList: [],
      currentRow: null,
      pageIndex: 1,
      pageSize: 50,
      totalPage: 0,
      searchData: {
        page: 1,
        limit: 50,
        site: this.$store.state.user.site,
        notifyNo: '',
        soorderNo: '',
        orderType: '',
        pushWmsFlag: '',
        transportFlag: ''
      },
      // 主表列配置 - rqrq
      columnList1: [
        {
          userId: this.$store.state.user.name,
          functionId: 801001,
          serialNumber: '801001Table1NotifyNo',
          tableId: '801001Table1',
          tableName: '申请单订单列表',
          columnProp: 'notifyNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '领料单号',
          columnHidden: false,
          columnImage: false,
          columnSortable: true,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 140,
          showOverflowTooltip: true
        },
        {
          userId: this.$store.state.user.name,
          functionId: 801001,
          serialNumber: '801001Table1ItemNo',
          tableId: '801001Table1',
          tableName: '申请单订单列表',
          columnProp: 'itemNo',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '序号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 60,
          showOverflowTooltip: true
        },
        {
          userId: this.$store.state.user.name,
          functionId: 801001,
          serialNumber: '801001Table1SoorderNo',
          tableId: '801001Table1',
          tableName: '申请单订单列表',
          columnProp: 'soorderNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '订单号',
          columnHidden: false,
          columnImage: false,
          columnSortable: true,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 140,
          showOverflowTooltip: true
        },
        {
          userId: this.$store.state.user.name,
          functionId: 801001,
          serialNumber: '801001Table1OrderType',
          tableId: '801001Table1',
          tableName: '申请单订单列表',
          columnProp: 'orderType',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '订单类型',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true
        },
        {
          userId: this.$store.state.user.name,
          functionId: 801001,
          serialNumber: '801001Table1FgPartNo',
          tableId: '801001Table1',
          tableName: '申请单订单列表',
          columnProp: 'fgPartNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '工单物料',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true
        },
        {
          userId: this.$store.state.user.name,
          functionId: 801001,
          serialNumber: '801001Table1ReleaseNo',
          tableId: '801001Table1',
          tableName: '申请单订单列表',
          columnProp: 'releaseNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '发布号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80,
          showOverflowTooltip: true
        },
        {
          userId: this.$store.state.user.name,
          functionId: 801001,
          serialNumber: '801001Table1SequenceNo',
          tableId: '801001Table1',
          tableName: '申请单订单列表',
          columnProp: 'sequenceNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '序号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80,
          showOverflowTooltip: true
        },
        {
          userId: this.$store.state.user.name,
          functionId: 801001,
          serialNumber: '801001Table1NeedDate',
          tableId: '801001Table1',
          tableName: '申请单订单列表',
          columnProp: 'needDate',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '要求发料时间',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 130,
          showOverflowTooltip: true
        },
        {
          userId: this.$store.state.user.name,
          functionId: 801001,
          serialNumber: '801001Table1LocationNo',
          tableId: '801001Table1',
          tableName: '申请单订单列表',
          columnProp: 'locationNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '配送站点',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true
        },
        {
          userId: this.$store.state.user.name,
          functionId: 801001,
          serialNumber: '801001Table1AreaDesc',
          tableId: '801001Table1',
          tableName: '申请单订单列表',
          columnProp: 'areaDesc',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '配送区域',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true
        },
        {
          userId: this.$store.state.user.name,
          functionId: 801001,
          serialNumber: '801001Table1PushWmsFlag',
          tableId: '801001Table1',
          tableName: '申请单订单列表',
          columnProp: 'pushWmsFlag',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '推送WCS',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80,
          showOverflowTooltip: true
        },
        {
          userId: this.$store.state.user.name,
          functionId: 801001,
          serialNumber: '801001Table1TransportFlag',
          tableId: '801001Table1',
          tableName: '申请单订单列表',
          columnProp: 'transportFlag',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '立库取出',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80,
          showOverflowTooltip: true
        }
      ],
      // 明细表列配置 - rqrq
      columnList2: [
        {
          userId: this.$store.state.user.name,
          functionId: 801001,
          serialNumber: '801001Table2ItemNo',
          tableId: '801001Table2',
          tableName: '预留标签清单表',
          columnProp: 'itemNo',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '订单序号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80,
          showOverflowTooltip: true
        },
        {
          userId: this.$store.state.user.name,
          functionId: 801001,
          serialNumber: '801001Table2BomItemNo',
          tableId: '801001Table2',
          tableName: '预留标签清单表',
          columnProp: 'bomItemNo',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '订单物料行号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true
        },
        {
          userId: this.$store.state.user.name,
          functionId: 801001,
          serialNumber: '801001Table2ComponentPartNo',
          tableId: '801001Table2',
          tableName: '预留标签清单表',
          columnProp: 'componentPartNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '物料号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120,
          showOverflowTooltip: true
        },
        {
          userId: this.$store.state.user.name,
          functionId: 801001,
          serialNumber: '801001Table2SerialNo',
          tableId: '801001Table2',
          tableName: '预留标签清单表',
          columnProp: 'serialNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '标签号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 150,
          showOverflowTooltip: true
        },
        {
          userId: this.$store.state.user.name,
          functionId: 801001,
          serialNumber: '801001Table2TaskRef',
          tableId: '801001Table2',
          tableName: '预留标签清单表',
          columnProp: 'taskRef',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '立库任务号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120,
          showOverflowTooltip: true
        },
        {
          userId: this.$store.state.user.name,
          functionId: 801001,
          serialNumber: '801001Table2TaskItem',
          tableId: '801001Table2',
          tableName: '预留标签清单表',
          columnProp: 'taskItem',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '立库任务行号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true
        },
        {
          userId: this.$store.state.user.name,
          functionId: 801001,
          serialNumber: '801001Table2TaskSeq',
          tableId: '801001Table2',
          tableName: '预留标签清单表',
          columnProp: 'taskSeq',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '任务序号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80,
          showOverflowTooltip: true
        },
        {
          userId: this.$store.state.user.name,
          functionId: 801001,
          serialNumber: '801001Table2OrderType',
          tableId: '801001Table2',
          tableName: '预留标签清单表',
          columnProp: 'orderType',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '订单类型',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
          showOverflowTooltip: true
        },
        {
          userId: this.$store.state.user.name,
          functionId: 801001,
          serialNumber: '801001Table2OutWcsFlag',
          tableId: '801001Table2',
          tableName: '预留标签清单表',
          columnProp: 'outWcsFlag',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '立库取出',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80,
          showOverflowTooltip: true
        },
      ]
    }
  },
  mounted() {
    // 计算表格高度 - rqrq
    this.height = (window.innerHeight - 280) / 2
    this.detailHeight = (window.innerHeight - 280) / 2
  },
  methods: {
    // 获取订单类型颜色 - rqrq
    getOrderTypeColor(orderType) {
      switch (orderType) {
        case 'shoporder':
          return '#409EFF'  // 蓝色
        case 'shipment':
          return '#67C23A'  // 绿色
        case 'slittingorder':
          return '#E6A23C'  // 橙色
        default:
          return '#909399'  // 灰色
      }
    },
    // 获取订单类型中文文本 - rqrq
    getOrderTypeText(orderType) {
      switch (orderType) {
        case 'shoporder':
          return '生产订单'
        case 'shipment':
          return '销售发货'
        case 'slittingorder':
          return '分切订单'
        default:
          return orderType || '-'
      }
    },
    // 查询主表数据 - rqrq
    searchTable() {
      this.dataListLoading = true
      this.searchData.page = this.pageIndex
      this.searchData.limit = this.pageSize
      searchNotifyOrderList(this.searchData).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
      }).catch(() => {
        this.$message.error('查询失败')
      }).finally(() => {
        this.dataListLoading = false
      })
    },
    // 主表行点击事件 - rqrq
    changeData(row) {
      this.currentRow = JSON.parse(JSON.stringify(row))
      this.getDetailList()
    },
    // 查询明细数据 - rqrq
    getDetailList() {
      if (!this.currentRow) {
        this.detailList = []
        return
      }
      this.detailLoading = true
      const queryData = {
        site: this.currentRow.site,
        notifyNo: this.currentRow.notifyNo,
        itemNo: this.currentRow.itemNo
      }
      searchMaterialListDetail(queryData).then(({ data }) => {
        if (data && data.code === 0) {
          this.detailList = data.rows || []
        } else {
          this.detailList = []
        }
      }).catch(() => {
        this.$message.error('查询明细失败')
      }).finally(() => {
        this.detailLoading = false
      })
    },
    // 分页大小改变 - rqrq
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.searchTable()
    },
    // 当前页改变 - rqrq
    currentChangeHandle(val) {
      this.pageIndex = val
      this.searchTable()
    }
  }
}
</script>

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

