<template>
  <div class="mod-config">
    <el-form :inline="true" label-position="top" style="margin-top: 1px; margin-left: 0px;" >
      <el-form-item  label="物料">
        <el-input v-model="bomData.partNo" readonly style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item  label="BOM类型">
        <el-input v-model="bomData.bomType" readonly style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item  label="BOM版本">
        <el-input v-model="bomData.engChgLevel" readonly style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item  label="替代编码">
        <el-input v-model="bomData.alternativeNo" readonly style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item  label=" ">
        <el-button type="primary" @click="searchTable()" >刷新</el-button>
        <el-button type="primary" @click="changeBomRev()" >变更</el-button>
        <el-button type="primary" @click="jumpBom()" >跳转至BOM</el-button>
<!--        <el-button type="primary" @click="newData()" v-if="!ifDisableFlag">新增</el-button>-->
      </el-form-item>

      <el-table
        :data="bomList"
        :height="height"
        border
        ref="componentTable"
        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">
            <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-form>

    <el-dialog title="变更BOM" :close-on-click-modal="false" v-drag :visible.sync="modalFlag" width="750px">
      <el-table
        :data="bomDetailList"
        height="300"
        border
        highlight-current-row
        onclick=""
        @row-click="getRow"
        ref="componentTable"
        style="width:100%">
        <el-table-column
          prop="partNo"
          header-align="left"
          align="left"
          min-width="80"
          label="物料编码">
        </el-table-column>
        <el-table-column
          prop="bomType"
          header-align="left"
          align="left"
          min-width="80"
          label="BOM类型">
        </el-table-column>
        <el-table-column
          prop="engChgLevel"
          header-align="left"
          align="left"
          min-width="80"
          label="BOM版本">
        </el-table-column>
        <el-table-column
          prop="alternativeNo"
          header-align="left"
          align="left"
          min-width="80"
          label="替代编码">
        </el-table-column>
        <el-table-column
          prop="alternativeDescription"
          header-align="left"
          align="left"
          min-width="80"
          label="替代名称">
        </el-table-column>
        <el-table-column
          prop="status"
          header-align="left"
          align="left"
          min-width="60"
          label="状态">
        </el-table-column>
        <el-table-column
          prop="effPhaseInDate"
          header-align="left"
          align="left"
          min-width="80"
          label="生效日期">
        </el-table-column>
        <el-table-column
          prop="effPhaseOutDate"
          header-align="left"
          align="left"
          min-width="80"
          label="失效日期">
        </el-table-column>
      </el-table>

      <el-footer style="height:30px;margin-top:20px;text-align:center">
        <el-button type="primary" @click="updateBMBomRev()">确定</el-button>
        <el-button type="primary" @click="modalFlag=false">取消</el-button>
      </el-footer>
    </el-dialog>

    <Chooselist ref="baseList"  @getBaseData="getBaseData"></Chooselist>
  </div>
</template>

<script>
  import {
    searchBMBom,
    searchBMBomDetail,
    updateBMBomRev,
  } from "@/api/sampleManagement/technicalSpecificationList.js"
  import Chooselist from '@/views/modules/common/Chooselist'
  export default {
    components: {
      Chooselist
    },

    data() {
      return {
        modalFlag:false,
        bomFlag:false,
        height:200,
        searchData: {
          site: '',
          username: this.$store.state.user.name,
          codeNo: '',
          buNo:'',
        },
        bomData:{
          site: '',
          partNo:'',
          alternativeNo:'',
          bomType:'',
          engChgLevel:'',
        },
        currentRow:"",
        bomList:[],
        bomDetailList:[],
        columnList1: [
          {
            userId: this.$store.state.user.name,
            functionId: 104002,
            serialNumber: '104002Table2LineSequence',
            tableId: '104002Table2',
            tableName: 'BOM子物料表',
            columnProp: 'lineSequence',
            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: 104002,
            serialNumber: '104002Table2ComponentPart',
            tableId: '104002Table2',
            tableName: 'BOM子物料表',
            columnProp: 'componentPart',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '物料编码',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 120
          },
          {
            userId: this.$store.state.user.name,
            functionId: 104002,
            serialNumber: '104002Table2ComponentPartDesc',
            tableId: '104002Table2',
            tableName: 'BOM子物料表',
            columnProp: 'componentPartDesc',
            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: 104002,
            serialNumber: '104002Table2QtyPerAssembly',
            tableId: '104002Table2',
            tableName: 'BOM子物料表',
            columnProp: 'qtyPerAssembly',
            headerAlign: 'center',
            align: 'right',
            columnLabel: '单位用量',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 80
          },
          {
            userId: this.$store.state.user.name,
            functionId: 104002,
            serialNumber: '104002Table2ComponentScrap',
            tableId: '104002Table2',
            tableName: 'BOM子物料表',
            columnProp: 'componentScrap',
            headerAlign: 'center',
            align: 'right',
            columnLabel: '调机量',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 80
          },
          {
            userId: this.$store.state.user.name,
            functionId: 104002,
            serialNumber: '104002Table2ShrinkageFactor',
            tableId: '104002Table2',
            tableName: 'BOM子物料表',
            columnProp: 'shrinkageFactor',
            headerAlign: 'center',
            align: 'right',
            columnLabel: '损耗率',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 80
          },
          {
            userId: this.$store.state.user.name,
            functionId: 104002,
            serialNumber: '104002Table2PrintUnitName',
            tableId: '104002Table2',
            tableName: 'BOM子物料表',
            columnProp: 'printUnitName',
            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: 104002,
            serialNumber: '104002Table2IssueType',
            tableId: '104002Table2',
            tableName: 'BOM子物料表',
            columnProp: 'issueTypeName',
            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: 104002,
            serialNumber: '104002Table2OperationDesc',
            tableId: '104002Table2',
            tableName: 'BOM子物料表',
            columnProp: 'operationId',
            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: 104002,
            serialNumber: '104002Table2IssueToLoc',
            tableId: '104002Table2',
            tableName: 'BOM子物料表',
            columnProp: 'issueToLocName',
            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: 104002,
            serialNumber: '104002Table2NoteText',
            tableId: '104002Table2',
            tableName: 'BOM子物料表',
            columnProp: 'noteText',
            headerAlign: 'center',
            align: 'left',
            columnLabel: '备注',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 150
          },
        ],



        ifDisableFlag:false,

      }
    },
    mounted () {
      this.$nextTick(() => {
        this.height = window.innerHeight - 100
      })
    },
    methods: {
      // 获取基础数据列表S
      getBaseList (val, type) {
        this.tagNo = val
        this.tagNo1 = type
        this.$nextTick(() => {
          let strVal = ''
          if (val === 1013) {
            if(type==1) {
              strVal = this.dataForm.partType
            }
          }
          this.$refs.baseList.init(val, strVal)
        })
      },
      /* 列表方法的回调 */
      getBaseData (val) {
        if (this.tagNo === 1013) {
          if(this.tagNo1==1) {
            this.dataForm.partType = val.Base_id
            this.dataForm.partTypeDesc = val.Base_desc
          }
        }
      },


      choosePart(row){
        this.dataForm.erpPartNo=row.erpPartNo
        this.dataForm.familyId=row.familyId
        this.dataForm.familyName=row.familyName
        this.dataForm.partDesc=row.partDesc
        this.dataForm.spec=row.spec
        this.partModelFlag=false;
      },
      //初始化组件的参数
      init(inData) {
        if(this.searchData.codeNo!=null&&this.searchData.codeNo!=''){
          return false;
        }
        //初始化参数
        this.searchData = JSON.parse(JSON.stringify(inData));
        if(this.searchData.ifDisableFlag){
          this.ifDisableFlag=true
        }
        //刷新表格
        this.searchTable();

      },
      searchTable(){
        searchBMBom(this.searchData).then(({data}) => {
          this.bomList = data.rows;
          this.bomData = data.row;
        });
      },
      searchDetailTable(){
        searchBMBomDetail(this.bomData).then(({data}) => {
          this.bomDetailList=data.rows;
        });
      },
      changeBomRev(){
        this.searchDetailTable()
        this.currentRow=null
        this.modalFlag=true;

      },
      getRow(row){
        this.currentRow=row
      },
      updateBMBomRev(){
        if(this.currentRow==null){
          this.$alert('请点击选择BOM版本！', '错误', {
            confirmButtonText: '确定'
          })
          return false;
        }
        if(this.currentRow.status!=='Buildable'){
          this.$alert('只有Buildable状态的可以保存！', '错误', {
            confirmButtonText: '确定'
          })
          return false;
        }
        let inData={
          site:this.bomData.site,
          codeNo:this.searchData.codeNo,
          bomType:this.currentRow.bomType,
          engChgLevel:this.currentRow.engChgLevel,
          bomAlternativeNo:this.currentRow.alternativeNo
        }
        updateBMBomRev(inData).then(({data})=>{
          if(data&& data.code===0){
            this.searchTable();
            this.modalFlag=false;
            this.$message.success( '操作成功')
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      jumpBom(){
        let inData={
          site:this.searchData.site,
          partNo:this.bomData.partNo,
          bomType:this.bomData.bomType,
          engChgLevel:this.bomData.engChgLevel,
        }
        localStorage.setItem('bomData', JSON.stringify(inData))
        window.open('#/part-bomManagement');
      },
    },
  }
</script>

<style scoped>

</style>
