<script>
import {queryQuoteDetailBomTree} from "@/api/quote/quoteDetailBomTree";

export default {
  name: "quoteDetailRouting",
  props:{
    quoteDetail:{
      type:Object,
      required:true
    },
  },
  model:{
    prop: "quoteDetail",
    event: "update"
  },
  data(){
    return{
      isAllBom:false,
      dataList:[],
      treeData:[],
      columns: [
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5OperationNo',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'operationNo',
          headerAlign: "center",
          align: "center",
          columnLabel: '工序号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 60,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5OperationName',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'operationName',
          headerAlign: "center",
          align: "left",
          columnLabel: '工序名称',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5PartNo',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'partNo',
          headerAlign: "center",
          align: "left",
          columnLabel: '物料编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5PartDesc',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'partDesc',
          headerAlign: "center",
          align: "left",
          columnLabel: '物料描述',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 200,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5Version',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'version',
          headerAlign: "center",
          align: "center",
          columnLabel: '版本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5AlternativeNo',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'alternativeNo',
          headerAlign: "center",
          align: "left",
          columnLabel: '替代编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5AlternativeDesc',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'alternativeDesc',
          headerAlign: "center",
          align: "left",
          columnLabel: '替代描述',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5WorkCenterNo',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'workCenterNo',
          headerAlign: "center",
          align: "left",
          columnLabel: '加工中心编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5WorkCenterDesc',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'workCenterDesc',
          headerAlign: "center",
          align: "left",
          columnLabel: '加工中心名称',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 200,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5WorkCenterCost',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'workCenterCost',
          headerAlign: "center",
          align: "left",
          columnLabel: '加工中心成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5EfficiencyFactor',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'efficiencyFactor',
          headerAlign: "center",
          align: "right",
          columnLabel: '效率%',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5MachRunFactor',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'machRunFactor',
          headerAlign: "center",
          align: "right",
          columnLabel: '机器单位产出',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5MachSetupTime',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'machSetupTime',
          headerAlign: "center",
          align: "right",
          columnLabel: '调机时间',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5RunTimeDesc',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'runTimeDesc',
          headerAlign: "center",
          align: "center",
          columnLabel: '产出单位',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5LaborRunFactor',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'laborRunFactor',
          headerAlign: "center",
          align: "right",
          columnLabel: '人工单位产出',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5LaborSetupTime',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'laborSetupTime',
          headerAlign: "center",
          align: "right",
          columnLabel: '人工调机时间',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5CrewSize',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'crewSize',
          headerAlign: "center",
          align: "right",
          columnLabel: '生产过程人数',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5SetupCrewSize',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'setupCrewSize',
          headerAlign: "center",
          align: "right",
          columnLabel: '调机过程人数',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5LaborClassNo',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'laborClassNo',
          headerAlign: "center",
          align: "left",
          columnLabel: '人员等级',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5SetupLaborClassNo',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'setupLaborClassNo',
          headerAlign: "center",
          align: "left",
          columnLabel: '调机过程中人员等级',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 140,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5LaborClassCost',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'laborClassCost',
          headerAlign: "center",
          align: "left",
          columnLabel: '人员等级成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5SetupLaborClassCost',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'setupLaborClassCost',
          headerAlign: "center",
          align: "left",
          columnLabel: '调机人员等级成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5MachineCost',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'machineCost',
          headerAlign: "center",
          align: "right",
          columnLabel: '单位机器成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 140,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5MachineCost',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'unitManufacturingCosts',
          headerAlign: "center",
          align: "right",
          columnLabel: '单位制造成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 140,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5LaborCosts',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'laborCosts',
          headerAlign: "center",
          align: "right",
          columnLabel: '单位人工成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 140,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5QuoteUnitCost',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'quoteUnitCost',
          headerAlign: "center",
          align: "right",
          columnLabel: '单位报价成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: 'right',
          columnWidth: 120,
        },
      ],
      props:{
        children: 'list',
        label: (data,node)=>{
          return `${data.partNo}-${data.engChgLevel}-${data.alternativeNo}-${data.bomType}`;
        },
      },
      queryTreeLoading:false,
    }
  },
  methods:{
    handleQueryQuoteDetailBomTree(){
      let params = {
        id: this.quoteDetail.id,
      }
      this.queryTreeLoading = true;
      queryQuoteDetailBomTree(params).then(({data})=>{
        if (data && data.code === 0){
          this.treeData = data.rows;
          if (this.treeData.length > 0){
            this.$nextTick(()=>{
              this.$refs.tree.setCurrentKey(this.treeData[0].id);

            })
          }
          this.queryTreeLoading = false;
        }else {
          this.$message.warning(data.msg);
          this.queryTreeLoading = false;
        }
      }).catch((error)=>{
        this.$message.error(error);
      })
    },
    nodeClick(data){

    },
  },
  created() {
    if (this.quoteDetail && this.quoteDetail.id){
      this.handleQueryQuoteDetailBomTree();
    }
  },
  watch:{
    'quoteDetail.id'(newVal,oldVal){
      this.handleQueryQuoteDetailBomTree();
    },
  }
}
</script>

<template>
  <div>
    <div style="margin-bottom: 10px">
      <el-link style="margin-right: 20px">切换版本</el-link>
      <el-checkbox v-model="isAllBom">全级Routing结构</el-checkbox>
    </div>
    <el-container>
      <el-aside width="300px" v-loading="queryTreeLoading">
        <el-tree
          :data="treeData"
          :props="props"
          :default-expand-all="true"
          :expand-on-click-node="false"
          node-key="id"
          highlight-current
          @node-click="nodeClick" ref="tree">

        </el-tree>
      </el-aside>
      <el-main style="padding: 0">
        <el-table :data="dataList" border style="width: 100%" :height="420">
          <el-table-column
            v-for="(item,index) in columns" :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-main>
    </el-container>
  </div>
</template>

<style scoped>

</style>
