<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="initLj"
              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 {getList} from "@/api/jhzxgl/ypp";

export default {
  name: "Yppfk0",
  data() {
    return {
      height:'500px',
      activeName:'first',
      xqjhColumn:[
        {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', },
        },
      ],
      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: '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: '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;
      }

    },
    initXqjh(req){
      getQfxq(req).then(res=>{
        this.xqjhList=res.data
      })
    },
    initLj({row}){
      this.activeName='second'
      getList(row).then(res=>{
        this.ljList=res.data
      })
    },
    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>
