<template>
  <div class="ele-body">
    <el-card shadow="never">
      <BOMSearch
        @search="reload"
        :statusOpt="statusOpt"
        :categoryCode="where.categoryCode"
      />
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="EBOM" name="4"> </el-tab-pane>
        <el-tab-pane label="PBOM" name="1"> </el-tab-pane>
        <el-tab-pane label="MBOM" name="2"> </el-tab-pane>
        <el-tab-pane label="ABOM" name="3"> </el-tab-pane>

        <ele-pro-table
          ref="table"
          :columns="columns"
          :datasource="datasource"
          :initLoad="false"
          class="dict-table"
          tool-class="ele-toolbar-actions"
        >
          <template v-slot:approvalStatus="{ row }">
            <el-link
              type="primary"
              :underline="false"
              @click="handleDetails(row)"
            >
              {{ approvalStatusOpt[+row.approvalStatus] }}
            </el-link>
          </template>

          <template v-slot:isTemp="{ row }">
            <el-tag size="mini" v-if="row.isTemp == 1">主数据</el-tag>
          </template>

          <!-- 表头工具栏 -->
          <template v-slot:action="{ row }">
            <el-link type="primary" @click="handelDetail(row)">详情</el-link>

            <el-link
              v-if="row.status != 1 && (row.approvalStatus == 0  || row.approvalStatus == 3)"
              type="primary"
              @click="handSubmit(row)"
              >发布</el-link
            >

            <el-link
              type="danger"
              :underline="false"
              v-if="activeName == 1 && row.status != 1 && (row.approvalStatus == 0  || row.approvalStatus == 3)"
              @click="handDel(row)"
            >
              删除
            </el-link>
          </template>
        </ele-pro-table>
      </el-tabs>
    </el-card>

    <el-dialog
      title="发布"
      :visible.sync="isSubmit"
      v-if="isSubmit"
      width="30%"
      center
    >
      <div>
        <el-radio v-model="radioSubmit" :label="1">药品</el-radio>
        <el-radio v-model="radioSubmit" :label="2">器械</el-radio>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isSubmit = false">取 消</el-button>
        <el-button type="primary" @click="handJsSubmit()">确 定</el-button>
      </span>
    </el-dialog>

    <LCdetail ref="detailRef"></LCdetail>

    <BomDetailsPop  ref="bomDrawer"  ></BomDetailsPop>
  </div>
</template>

<script>
  import BOMSearch from './components/BOM-search.vue';
  import {
    getBomPageList,
    startAndStop,
    bomSubmit,
    jsBomSubmit,
    deviceBomSubmit,
    deleteBomTreeList
  } from '@/api/material/BOM';
  import LCdetail from './components/LCdetail.vue';

    import BomDetailsPop from '../BOMmanage/detailsPop.vue'
  export default {
    name: 'SystemDictionary',
    components: { BOMSearch, LCdetail, BomDetailsPop },
    data() {
      return {
        // 表格列配置
        columns: [
          {
            label: '序号',
            columnKey: 'index',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'code',
            label: 'BOM编码',
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: 'BOM名称',
            showOverflowTooltip: true
          },
          {
            prop: 'categoryCode',
            label: '编码',
            showOverflowTooltip: true
          },
          {
            prop: 'categoryName',
            label: '名称',
            showOverflowTooltip: true
          },
          {
            prop: 'versions',
            label: '版本'
          },
          {
            prop: 'status ',
            label: '状态',
            formatter: (row) => {
              return this.statusOpt[+row.status];
            }
          },
          {
            prop: 'approvalStatus',
            label: '审核状态',
            slot: 'approvalStatus'
          },

          {
            width: 100,
            prop: 'isTemp',
            slot: 'isTemp',
            label: '主数据'
          },

          {
            prop: 'createName',
            label: '创建人',
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '创建日期',
            showOverflowTooltip: true
          },
          {
            action: 'action',
            slot: 'action',
            label: '操作'
          }
        ],
        statusOpt: {
          0: '草稿',
          1: '已发布',
          2: '已停用'
        },

        approvalStatusOpt: {
          0: '未提交',
          1: '审核中',
          2: '审核通过',
          3: '审核不通过'
        },
        loading: false,
        loadingInstance: null,
        where: {},

        activeName: '1',

        isSubmit: false,
        JsRId: null,
        radioSubmit: 1
      };
    },

    computed: {
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      }
    },

    mounted() {
      this.initData();
    },
    activated() {
      this.initData();
    },
    methods: {
      initData() {
        let { categoryId, code } = this.$route.query;
        if (categoryId && code) {
          this.where.categoryCode = code;
          this.where.categoryId = categoryId;
          getBomPageList({
            status: 1,
            categoryCode: this.where.categoryCode,
            pageNum: 1,
            size: 10
          }).then((data) => {
            this.$refs.table.setData(data.list || []);
          });
        } 
      },
      /* 启用关闭BOM */
      openBom(row, boolean) {
        this.loadingInstance = this.$loading({
          lock: true,
          text: boolean ? '启用中...' : '关闭中...',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        startAndStop({ id: row.id, status: row.status }).then(() => {
          this.$message.success('操作成功');
          this.loadingInstance.close();
        });
        setTimeout(() => {}, 2000);
      },

      handSubmit(row) {
        if (this.clientEnvironmentId == 4) {
          this.JsRId = row.id;
          this.isSubmit = true;
        } else {
          this.$alert('确定要发布吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              bomSubmit({ businessId: row.id }).then((res) => {
                this.$message.success('发布成功');
                this.reload();
              });
            })
            .catch(() => {});
        }
      },

      handJsSubmit() {
        let URL = this.radioSubmit == 1 ? jsBomSubmit : deviceBomSubmit;
        this.$alert('确定要发布吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            URL({ businessId: this.JsRId }).then((res) => {
              this.isSubmit = false;
              this.$message.success('发布成功');
              this.reload();
           
            });
          })
          .catch(() => {});
      },

      /* 表格数据源 */
      datasource({ where, page, limit }) {
        return getBomPageList({
          ...where,
          bomType: Number(this.activeName),
          isTemp: true,
          pageNum: page,
          size: limit
        });
      },
      handelDetail(row) {
        let rowData = {
          categoryId: row.categoryId,
          categoryName: row.categoryName,
          code: row.code,
          versions: row.versions,
          rootPathIdParent: row.categoryLevelPathIdParent,
          isProduct:true,
          bomType: Number(this.activeName),
          isTemp: row.isTemp
        };
        this.$refs.bomDrawer.open(rowData);

      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ where });
      },

      handleClick(tab) {
        this.activeName = tab.name;
        this.reload();
      },

      handDel(row) {
        this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            deleteBomTreeList([row.id]).then(() => {
              this.reload();
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
      },

      handleDetails(row) {
        if (!row.processInstanceId) {
          this.$message.info('未提交没有审核流程');
        } else {
          this.$refs.detailRef.open(row.processInstanceId);
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .ele-body {
    height: 100%;
    ::v-deep .el-card {
      height: 100%;
      .el-card__body {
        height: 100%;
        display: flex;
        flex-direction: column;
        .dict-table {
          flex: 1;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          .el-table {
            flex: 1;
            overflow-y: auto;
          }
        }
      }
    }
  }
</style>
