<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <search @search="reload" ref="search" />
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        :selection.sync="selection"
        row-key="id"
        height="calc(100vh - 400px)"
        :toolbar="!isModal"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar="{ row }">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="open(null, 'add')"
          >
            新建
          </el-button>
        </template>
        <!-- 编码列 -->
        <template v-slot:code="{ row }">
          <el-link type="primary" :underline="false" @click="details(row)">
            {{ row.code }}
          </el-link>
        </template>
        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="open(row, 'edit')"
          >
            编辑
          </el-link>
          <el-popconfirm
            class="ele-action"
            title="确定要删除吗？"
            @confirm="remove(row)"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-card>

    <infoEdit ref="edit" @refresh="reload"></infoEdit>
  </div>
</template>

<script>
  import { listOrganizations } from '@/api/system/organization';
  import dictMixins from '@/mixins/dictMixins';
  import infoEdit from './edit';
  import search from './search.vue';
  import {
    getDisposalList,
    removeDisposal
  } from '@/api/equipmentDisposal/index.js';

  export default {
    mixins: [dictMixins],
    components: {
      infoEdit,
      search
    },
    props: {
      isModal: {
        default: false
      },
      disabledList: {
        default: () => []
      }
    },
    data() {
      return {
        loading: false,
        // 表格列配置
        columns: [],
        selection: [],
        treeData: []
      };
    },
    computed: {},
    created() {
      this.columns = [
        {
          width: 45,
          columnKey: 'selection',
          reserveSelection: true,
          type: 'selection',
          align: 'center',
          selectable: (row, index) => {
            return !this.disabledList.map((item) => item.id).includes(row.id);
          }
        },
        {
          columnKey: 'index',
          type: 'index',
          label: '序号',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },

        {
          prop: 'name',
          align: 'center',
          label: '名称'
        },
        {
          prop: 'type',
          align: 'center',
          label: '类型',
          formatter: (row, column, cellValue) => {
            return cellValue == 1
              ? '输入框'
              : cellValue == 2
              ? '部门选择框'
              : cellValue == 3
              ? '日期选择框'
              : '';
          }
        },

        {
          prop: 'value',
          align: 'center',
          label: '内容',
          formatter: (row, column, cellValue) => {
            if (row.type == 1 || row.type == 3) {
              return cellValue;
            } else {
              return this.findLabelByValue(this.treeData, cellValue);
            }
          }
        },
        {
          prop: 'createUserName',
          align: 'center',
          label: '创建人'
        },
        {
          prop: 'createTime',
          align: 'center',
          label: '创建时间'
        },
        {
          columnKey: 'action',
          slot: 'action',
          align: 'center',
          label: '操作',
          width: 240,
          fixed: 'right',
          show: !this.isModal
        }
      ];
      this.getData();
    },
    methods: {
      findLabelByValue(tree, value) {
        for (const node of tree) {
          if (node.id === value) {
            return node.name;
          } else if (node.children) {
            const foundLabel = this.findLabelByValue(node.children, value);
            if (foundLabel) {
              return foundLabel;
            }
          }
        }
        return null; // 如果未找到，返回null
      },
      async getData(parmas = {}) {
        const data = await listOrganizations(parmas);
        this.treeData = this.$util.toTreeData({
          data: data || [],
          idField: 'id',
          parentIdField: 'parentId'
        });
      },
      /* 表格数据源 */
      async datasource({ page, limit, where }) {
        const row = await getDisposalList({
          ...where,
          pageNum: page,
          size: limit
        });
        return row;
      },

      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ pageNum: 1, where: where });
      },
      open(row, type) {
        this.$refs.edit.open(row, type);
      },
      getValue() {
        let select = JSON.parse(JSON.stringify(this.selection));
        this.$refs.table.setSelectedRows([]);
        this.selection = [];
        return select;
      },
      remove(row) {
        removeDisposal([row.id]).then((res) => {
          this.$message.success('删除成功！');
          this.reload();
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  @media print {
    #printSection {
      font-size: 34px;
      span {
        font-size: 34px;
      }
    }
  }
</style>
