<template>
  <div>
    <headerTitle title="Bom审批"></headerTitle>
    <BOMSearch @search="reload" :statusOpt="statusOpt" />

    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="datasource"
      class="dict-table"
      tool-class="ele-toolbar-actions"
    >
    </ele-pro-table>
  </div>
</template>

<script>
  import BOMSearch from './BOM-search.vue';
  import { getBomPageCategoryId } from '@/api/bpm/components/bomApprover';

  export default {
    components: {
      BOMSearch
    },
    props: {
      businessId: {
        default: ''
      }
    },
    mixins: [],

    data() {
      return {
        visible: false,
        title: '',

        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: 'dosage',
            label: '用量',
            showOverflowTooltip: true
          },

          {
            prop: 'measuringUnit',
            label: '计量单位',
            showOverflowTooltip: true
          },
          {
            prop: 'versions',
            label: '版本'
          },
          {
            prop: 'status ',
            label: '状态',
            formatter: (row) => {
              return this.statusOpt[+row.status];
            }
          },
          {
            prop: 'createName',
            label: '创建人',
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '创建日期',
            showOverflowTooltip: true
          }
        ],
        statusOpt: {
          '': '全部',
          0: '已停用',
          1: '已发布'
        }
      };
    },
    created() {},
    methods: {
      /* 表格数据源 */
      datasource({ where, page, limit }) {
        return getBomPageCategoryId({
          ...where,
          pageNum: page,
          size: limit,
          id: this.businessId,
        });
      },

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

<style lang="scss" scoped>
  :deep(.el-table__expanded-cell) {
    padding-bottom: 30px !important;
    border-bottom: 12px solid #ccffcc !important;
  }
</style>
