<template>
  <div>
    <el-tabs v-model="activeName" type="border-card" @tab-click="tabsChange">
      <el-tab-pane lazy label="工艺参数" name="工艺参数">
        <ele-pro-table ref="table" :datasource="newBomObj.produceList" :immediate="true" :need-page="false"
          :columns="produceColumns" height="260px">
        </ele-pro-table>
      </el-tab-pane>
      <el-tab-pane lazy label="质检参数" name="质检参数"></el-tab-pane>
      <el-tab-pane lazy label="生产节拍" name="生产节拍">
        <beatInfo :beatParam="newBomObj.beatParam"></beatInfo>
      </el-tab-pane>
      <el-tab-pane lazy label="标准工时" name="标准工时">
        <normalHoursInfo :normalHours="newBomObj.normalHours"></normalHoursInfo>
      </el-tab-pane>
      <el-tab-pane lazy label="材料定额" name="材料定额">
        <ele-pro-table ref="materialQuotaTable" :columns="materialQuotaColumns" :datasource="newBomObj.materialQuota"
          :need-page="false" :immediate="true" height="260px">
          <template v-slot:toolbar>
            基本数量:
            <span style="color: rgb(21, 122, 44)">
              {{ newBomObj.baseCount }} {{ newBomObj.baseCountUnit }}</span>
          </template>

          <template v-slot:isReworkBom="{ row }">
            {{ row.isReworkBom ? '是' : '否' }}
          </template>

          <template v-slot:bomArtFiles="{ row }">
            <el-button size="mini" type="primary" @click="downloadFile(row.bomArtFiles)">下载</el-button>
          </template>
        </ele-pro-table>
      </el-tab-pane>

      <el-tab-pane lazy label="关键设备" name="关键设备">
        <ele-pro-table ref="standardDeviceTable" :columns="standardColumns" :datasource="newBomObj.standardDevice"
          row-key="id" height="260px">
        </ele-pro-table>
      </el-tab-pane>

      <el-tab-pane lazy label="制造资源" name="制造资源">
        <ele-pro-table ref="resourceTable" :columns="materialQuotaColumns" :datasource="newBomObj.resource"
          :need-page="false" :immediate="true" height="260px">
          <template v-slot:isReworkBom="{ row }">
            {{ row.isReworkBom ? '是' : '否' }}
          </template>

          <template v-slot:bomArtFiles="{ row }">
            <el-button size="mini" type="primary" @click="downloadFile(row.bomArtFiles)">下载</el-button>
          </template>
        </ele-pro-table>
      </el-tab-pane>
      <el-tab-pane lazy label="替代料" name="替代料">
        <ele-pro-table ref="replaceMaterialTable" :columns="materialQuotaColumns"
          :datasource="newBomObj.replaceMaterial" :need-page="false" :immediate="true" height="260px">
          <template v-slot:toolbar>
            基本数量:
            <span style="color: rgb(21, 122, 44)">
              {{ newBomObj.baseCount2 }} {{ newBomObj.baseCountUnit2 }}</span>
          </template>

          <template v-slot:isReworkBom="{ row }">
            {{ row.isReworkBom ? '是' : '否' }}
          </template>

          <template v-slot:bomArtFiles="{ row }">
            <el-button size="mini" type="primary" @click="downloadFile(row.bomArtFiles)">下载</el-button>
          </template>
        </ele-pro-table>
      </el-tab-pane>
      <el-tab-pane lazy label="工种" name="工种">
        <ele-pro-table ref="aptitudeParamTable" :columns="aptitudeParamColumns" :datasource="newBomObj.aptitudeParam"
          row-key="id" height="260px">
        </ele-pro-table>
      </el-tab-pane>
      <el-tab-pane lazy label="工艺文件" name="工艺文件">
        <ele-pro-table ref="fileParamTable" :columns="fileParamColumns" :datasource="newBomObj.fileParam" row-key="id"
          height="260px">
          <template v-slot:path="{ row }">
            <el-button v-if="row.path" size="mini" type="primary" @click="downloadFile(row.path)">下载</el-button>
          </template>
        </ele-pro-table>
      </el-tab-pane>
      <el-tab-pane lazy label="标准产出" name="标准产出">
        <ele-pro-table ref="standardTable" :columns="standardColumns" :datasource="newBomObj.standardOutput"
          row-key="id" height="260px">
        </ele-pro-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  produceColumns,
  materialQuotaColumns,
  aptitudeParamColumns,
  fileParamColumns,
  standardColumns
} from './columnsTab.js';

import beatInfo from './components/beatInfo.vue';
import normalHoursInfo from './components/normalHoursInfo.vue';

import { getFile } from '@/api/system/file';
export default {
  components: {
    beatInfo,
    normalHoursInfo
  },

  props: {
    BomObj: {
      type: Object
    }
  },

  watch: {
    BomObj: {
      handler(val) {
        this.newBomObj = JSON.parse(JSON.stringify(val));

        this.$forceUpdate();
      },
      immediate: true,
      deep: true
    }
  },

  data() {
    return {
      activeName: '工艺参数',
      newBomObj: {},

      produceColumns,
      materialQuotaColumns,
      aptitudeParamColumns,
      fileParamColumns,
      standardColumns
    };
  },

  methods: {
    tabsChange(tab) {
      this.activeName = tab.name;
    },

    downloadFile(url) {
      getFile({ objectName: url }, '附件');
    }
  }
};
</script>

<style lang="scss">
.el-tabs__content {
  padding: 4px !important;
}
</style>
