// bom信息展示
<template>
  <div>
    <el-dialog title="BOM查看" :visible.sync="bomInfoVisible"  :before-close="closeBomInfo" :close-on-click-modal="false" :close-on-press-escape="false">
      <div>
        <el-row style="margin-bottom: 10px">
          <el-col :span="12">  <span>产品代码: </span><span>{{bomData.code}}</span></el-col>
          <el-col :span="12">  <span>BOM版本: </span><span>{{bomData.version}}</span></el-col>
        </el-row>
        <el-row style="margin-bottom: 10px">
          <el-col :span="12">  <span>物料代码: </span><span>{{bomData.materiaCode}}</span></el-col>
          <el-col :span="12">  <span>物料名称: </span><span>{{bomData.materiaName}}</span></el-col>
        </el-row >
        <el-row style="margin-bottom: 10px">
          <el-col :span="12">  <span>BOM类型: </span><span>{{  formatterDict("useType",bomData.useType)}}</span></el-col>
          <el-col :span="12">  <span>BOM状态: </span><span>{{formatterDict("status",bomData.status)}}</span></el-col>
        </el-row>
        <el-row style="margin-bottom: 10px">
          <el-col :span="12">  <span>备注: </span><span> {{bomData.remark}}</span></el-col>
        </el-row>
      </div>
      <el-row class="el-dialog__title" style="margin-bottom: 5px;margin-top: 20px">
        BOM项
      </el-row>
      <el-table
          size="mini"
          :data="bomItemData"
          border
          max-height="300"
          highlight-current-row
      >
        <!-- <el-table-column label="序号" align width="60px">
          <template slot-scope="scope">
            <div>{{scope.$index}}</div>
          </template> 
        </el-table-column>-->
        <el-table-column prop="materiaCode" label="物料代码">
        </el-table-column>
        <el-table-column prop="materiaName" label="物料名称">
        </el-table-column>

        <el-table-column prop="useNum" label="用量" />
        <el-table-column prop="lossRate" label="损耗率" />

        <el-table-column
            prop="required"
            :formatter="formatter"
            label="必选料"
        />

        <el-table-column
            prop="supplyType"
            :formatter="formatter"
            label="补给方式"
        />

        <el-table-column
            prop="supplierId"
            :formatter="formatter"
            label="供应商"
        />
        <!-- <el-table-column
            prop="createTime"
            :formatter="formatterDate"
            label="创建时间"
        > 
        </el-table-column>-->
      </el-table>
      <div class="pagination-wapper flex" v-if="bomItemPageInfo.totalResult > 0">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="bomItemPageInfo.currPage"
            :page-sizes="[10, 20, 50, 100, 200]"
            :page-size="bomItemPageInfo.prePageResult"
            layout="sizes, total, prev, pager, next, jumper"
            :total="bomItemPageInfo.totalResult">
        </el-pagination>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size='mini' type="primary" @click="closeBomInfo">关 闭</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import table from "@/assets/mixins/table";
import {formatter, formatterDate} from "@/assets/utils/table";
export default {
   mixins: [table],
  methods: {

    //查询Bom信息
    async getBomData(bomId) {
      this.$post("/materia/bom/view", {id: bomId} )
          .then(({data})=>{
            console.log(data);
            if(data.entity){
              this.bomData = data.entity;
            }else{
              this.bomData = {};
            }

          })
          .catch(error=>{
            if(error.message == '自动取消ajax操作') return
            this.$message.error(error.message);
          })
          .then(data=>{
            clearTimeout(this.loadingTimer);
            this.loadingTimer = setTimeout(() => {
              this.bomData.loading = false;
            }, 300);
          })
    },

    //查询Bom信息
    async getBomItemData(bomId) {
      this.$post("/materia/bom/item/list", {
        "query.bomId": bomId, pageInfo:this.bomItemPageInfo
      }).then(({data})=>{
            console.log(data);
            this.bomItemPageInfo = data.pageInfo;
            if(data.result){
              this.bomItemData = data.result;
              this.dict = data.dict;
            }else{
              this.bomItemData = {};
            }

          })
          .catch(error=>{
            if(error.message == '自动取消ajax操作') return
            this.$message.error(error.message);
          })
          .then(data=>{
            clearTimeout(this.loadingTimer);
            this.loadingTimer = setTimeout(() => {
              this.bomItemData.loading = false;
            }, 300);
          })
    },
    formatter(row, column, val) {
      const key = column.property;
      console.log(this.dict);
      if(this.dict && this.dict[key]){
        const dict = this.dict[key]
        return dict[val] || val;
      }
      return val;
    },

    formatterDict(key, val) {
      if(this.dict && this.dict[key]){
        const dict = this.dict[key]
        return dict[val] || val;
      }
      return val;
    },
    closeBomInfo(){
      this.$emit('closeBomInfo', false)
    },
    handleSizeChange(currSize) {
      this.bomItemPageInfo.prePageResult = currSize;
      this.getBomItemData(this.bomId);
    },
    handleCurrentChange(currPage) {
      this.bomItemPageInfo.currPage = currPage;
      this.getBomItemData(this.bomId);
    },
    //初始化分页信息
    initPageInfo(){
      this.bomItemPageInfo = {
        beginIndex: 0,
        currPage: 1,
        displayPageSize: 5,
        hasNextPage: true,
        hasPrePage: false,
        prePageResult: 10,
        totalPage: 0,
        totalResult: 0
      }
    }

  },
  watch: {
    bomInfoVisible: function (val) {
      this.bomData ={};
      this.bomItemData =[];
      if(val){
        this.initPageInfo();
       this.getBomData(this.bomId);
       this.getBomItemData(this.bomId);

     }
    },
  },
  data() {
    return {
      dict: {},
      bomData:{},
      //bom 子项数据
      bomItemData: [],
      //分页信息
      bomItemPageInfo:{},

    }
  },
  props: {
    bomId: { // bomId
      type: Number,
      default: -1,
    },
    bomInfoVisible: {
      type: Boolean,
      default: false,
    }
  },
}
</script>
