<template>
  <el-container style="padding-top: 0px">
    <el-main>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="前方需求计划" name="first">
          <div class="mytable">
            <vxe-grid
              id="id"
              border
              ref="xqjhTableRef"
              resizable
              keep-source
              :height="height"
              :auto-resize="true"
              :columns="xqjhColumn"
              :data="xqjhList"
              :scroll-y="{ enabled: true }"
              @cell-dblclick="getPpxx"
              highlight-hover-row
            >
            </vxe-grid>
          </div>
        </el-tab-pane>
        <el-tab-pane label="前方需求明细" name="second">
          <div class="mytable">
            <vxe-grid
              id="id"
              border
              ref="ljTableRef"
              resizable
              keep-source
              :height="height"
              :auto-resize="true"
              :columns="ljColumn"
              :data="ljList"
              :scroll-y="{ enabled: true }"
              highlight-hover-row
            >
            </vxe-grid>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>

<script>
import {getQfxq} from "@/api/jhzx/qfxq";
import {getBfwz, getList, getPpxx, yppQtcj} from "@/api/jhzxgl/ypp";

export default {
  name: "Yppfk0",
  data() {
    return {
      height:'500px',
      activeName:'first',
      xqjhColumn:[
        { type: 'checkbox', width: 50 },
        { type: 'seq', width: 60, title: '序号' },
        { field: 'dcCh', title: '船只', minWidth: "70",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcPl', title: '批量', minWidth: "70",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'zdh', title: '总段号', minWidth: "70",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcFd', title: '分段号', minWidth: "70",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dzjz', title: '大组极重', minWidth: "70",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'zxfdxq', title: '总装部最新分段需求期', minWidth: "90",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'xzglxq', title: '钢料需求（小组）', minWidth: "100",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dzglxq', title: '钢料需求（大组）', minWidth: "100",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'xdb', title: 'X大板', minWidth: "100",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'xskj', title: 'X数控件', minWidth: "100",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'xpt', title: 'X平铁', minWidth: "100",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'xyw', title: 'X压弯', minWidth: "100",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'xxc', title: 'X型材', minWidth: "100",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'xtxc', title: 'X二次装T型材', minWidth: "100",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'ddb', title: 'D大板', minWidth: "100",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dqb', title: 'D曲板', minWidth: "100",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dxc', title: 'D型材T', minWidth: "100",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dsj', title: 'D散件', minWidth: "100",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'xqzt', title: '需求状态', minWidth: "100",formatter:this.formatterZt,
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'drcs', title: '导入次数', minWidth: "100",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'xzglxqOld', title: '原需求期', minWidth: "100",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'zt', title: '状态', width: 100,formatter: ['dictFormat','ZTLX']
        },
        { field: 'shry', title: '审核人员', width: 110, editRender: { name: 'input' },
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'shrq', title: '审核日期', width: 110, editRender: { name: 'input' },
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        }
      ],
      ljColumn:[
        {type: "seq", width: "50", title: "序号", align: "center", fixed: "left",},
        { field: 'dcCh', title: '船只', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcPl', title: '批量', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcFd', title: '分段号', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcTh', title: '图号', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcZl', title: '组立', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcTz', title: '特征', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcYj', title: '依据', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcYs', title: '页数', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcPb', title: '拼板', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcLph', title: '炉批号', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcTpbh', title: '托盘编号', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcTpmc', title: '托盘名称', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'jldw1', title: '单价重量计量单位', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'wpmc', title: '物品名称', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'wpgg', title: '规格', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'wpxh', title: '材质', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'qy', title: '区域', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
          editRender:{type:'$select',options:[],props:{clearable:true}}
        },
        { field: 'dwh', title: '垛位号', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
          editRender:{type:'$select',options:[],props:{clearable:true}}
        },
        { field: 'wpjb', title: '物品级别', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'wpflm', title: '物品分类', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'abclx', title: 'ABC分类', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'gzlx', title: '加工进度', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'ylzd1', title: '配套表类型', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'lcm1', title: '流程码', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'zt', title: '状态', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'tpxx', title: '托盘信息', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
      ],
      xqjhList:[],
      ljList:[],
    }
  },
  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  methods: {
    qtjc(){
      const data=this.$refs.xqjhTableRef.getCheckboxRecords();
      if (data.length<=0){
        this.$message.warning("请先选择需要检查的数据")
        return;
      }
      yppQtcj(data).then(res=>{
        this.$message.success("检查成功")
      })
    },
    getSelectQfxq(){
      return this.$refs.xqjhTableRef.getCheckboxRecords();
    },
    initXqjh(req){
      getQfxq(req).then(res=>{
        this.xqjhList=res.data
      })
    },
    getPpxx({row}){
      this.activeName='second'
      getList(row).then(res=>{
        this.ljList=res.data
      })
    },
    initBfwz(){
      getBfwz().then(res=>{
        this.bfwzList=res.data
        const _qyList=[]
        const _dwhList=[]
        const table=this.$refs.tableRef
        const qyColumn=table.getColumnByField('qy')
        const dwColumn=table.getColumnByField('dwh')
        this.bfwzList.forEach(item=>{
          _qyList.push({label:item.qy,value:item.qy})
          _dwhList.push({label:item.dwh,value:item.dwh,_parent:item.qy})
        })
        qyColumn.editRender.options=_qyList
        dwColumn.editRender.options=_dwhList
        this.qyList=_qyList;
        this.dwList=_dwhList
      })
    },
    formatterZt({cellValue}){
      if(cellValue==='0'){
        return '正常'
      }
      if(cellValue==='1'){
        return '提前'
      }
      if (cellValue==='2'){
        return '拖期'
      }
      return cellValue
    },
    handleClick(){

    },
    getHeight() {
      this.height = window.innerHeight - 180;
    },
  }
}
</script>

<style lang="scss" scoped >
.el-header {
  margin: 0;
  padding: 5px 0;
  height: auto;
}
.el-container {
  padding: 0;
  margin: 0;
}
.el-main {
  padding: 0;
}
.el-col {
  padding: 0;
}
.el-aside {
  background: #fff;
  padding: 0;
}
.el-container {
  padding: 0;
}
.el-row {
  margin-bottom: 5px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.tableStyles {
  background: #0a76a4;
}
.my-dropdown {
  width: 450px;
  height: 250px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  font-size: 12px;
}
::v-deep .mytable .vxe-input {
  display: flex !important;
}
::v-deep .el-form-item {
  margin-bottom: 0px !important;
}

::v-deep .el-input{
  width: auto !important;
}
</style>
