<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <user-search @search="reload" />
      <!-- 数据表格 -->
      <ele-pro-table
        ref="tableParameter"
        :columns="columns"
        :datasource="datasource"
        :selection.sync="selection"
        row-key="id"
      >
        <template v-slot:status="{ row }">
          {{ checkType(row.categoryType) }}
        </template>
        <!-- 状态列 -->
      </ele-pro-table>
    </el-card>
    <!-- 编辑弹窗 -->

    <!-- 导入弹窗 -->
  </div>
</template>

<script>
  import UserSearch from './components/user-search.vue';
  import UserEdit from './components/user-edit.vue';

  import parameter from '@/api/technology/parameter';

  export default {
    name: 'technologyParameter',
    components: {
      UserSearch,
      UserEdit
    },
    props: {
      data: Array
    },
    data() {
      return {
        // 表格列配置
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center',
            selectable: (row, index) => {
              return !this.data.some((it) => it.paramId == row.id);
              // return row.id < 3; // 这里是让 id < 3 的禁用，根据自己业务修改
            },
            reserveSelection: true
          },
          {
            prop: 'code',
            label: '参数编码',
            // sortable: 'custom',
            showOverflowTooltip: true,
            align: 'center',

            minWidth: 110
          },
          {
            prop: 'name',
            label: '参数名称',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            align: 'center',
            prop: 'description',
            label: '文本描述',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'maxValue',
            label: '参数上限',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'minValue',
            label: '参数下限',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'defaultValue',
            label: '默认值',
            align: 'center',

            showOverflowTooltip: true
          },
          {
            prop: 'categoryType',
            label: '参数分类',
            align: 'center',
            slot: 'status',
            showOverflowTooltip: true
          }
        ],
        statusList: [
          { label: '工艺', value: 0 },
          { label: '工序', value: 1 },
          { label: '产品', value: 2 },
          { label: '原料', value: 3 },
          { label: '设备', value: 4 },
          { label: '其他', value: 5 }
        ],
        // 表格选中数据
        selection: [],
        // 当前编辑数据
        current: null,
        // 是否显示编辑弹窗
        showEdit: false,
        // 是否显示导入弹窗
        showImport: false
      };
    },
    methods: {
      /*回显类型 */
      checkType(id) {
        const obj = this.statusList.find((item) => item.value == id);
        return obj.label;
      },
      /* 表格数据源 */
      async datasource({ page, limit, where, order }) {
        const res = await parameter.list({
          ...where,
          ...order,
          pageNum: page,
          size: limit
        });
        return res;
      },

      /* 刷新表格 */
      reload(where) {
        this.$refs.tableParameter.reload({ page: 1, where: where });
      },
      /* 打开编辑弹窗 */
      openEdit(row) {
        this.current = row;
        this.showEdit = true;
        this.$refs.userEdit.$refs.form &&
          this.$refs.userEdit.$refs.form.clearValidate();
      },

      /* 删除 */
      remove(row) {
        const loading = this.$loading({ lock: true });

        parameter
          .delete([row.id])
          .then((msg) => {
            loading.close();
            this.$message.success('删除' + msg);
            this.reload();
          })
          .catch((e) => {
            loading.close();
            // this.$message.error(e.message);
          });
      }
    },
    watch: {
      data: {
        handler() {
          this.$nextTick(() => {
            this.reload();
          });
        },
        immediate: true
      }
    }
  };
</script>
<style lang="scss" scoped>
  :deep(.el-checkbox__input.is-disabled) {
    .el-checkbox__inner {
      background-color: rgba(142, 128, 128, 0.584) !important;
    }
  }
</style>
