<template>
  <admin-layout>
    <admin-todo-list title="筛选条件" filters icon="filter">
      <template #options>
        <a-button type="dashed" @click="resetQuery" icon="reload">重置</a-button>
        <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
      </template>
      <HSearchForm label="字典名称">
        <a-input placeholder="请输入字典名称" v-model="queryParams.dictName"></a-input>
      </HSearchForm>
      <HSearchForm label="字典编号">
        <a-input placeholder="请输入字典编号" v-model="queryParams.dictCode"></a-input>
      </HSearchForm>
    </admin-todo-list>

    <admin-todo-list title="字典列表" icon="table">
      <template #options>
        <a-button type="primary" icon="plus" @click="handleAdd">添加 </a-button>
        <a-button
          v-if="isDisabledAuth('dict:export')"
          type="primary"
          icon="download"
          @click="handleExportFile('字典信息')"
          class="mr10"
          >导出
        </a-button>
        <a-button
          v-if="isDisabledAuth('dict:recycleBin')"
          type="primary"
          icon="hdd"
          @click="openDeleteList"
          class="mr10"
          >回收站
        </a-button>
      </template>
      <a-table
        bordered
        ref="table"
        rowKey="id"
        size="small"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="pagination"
        :loading="tableLoading"
        @change="handlePaginationChange"
      >
        <span slot="action" slot-scope="text, record">
          <a v-if="isDisabledAuth('dict:edit')" class="mr5" @click="handleEdit(record)">
            <a-icon type="edit" /> 编辑
          </a>
          <a-divider type="vertical" />
          <a class="mr5" @click="editDictItem(record)"><a-icon type="setting" /> 字典配置</a>
          <a-divider type="vertical" />
          <a-popconfirm
            v-if="isDisabledAuth('dict:del')"
            class="mr5"
            placement="left"
            title="确定删除吗?"
            @confirm="() => handleDelete(record.id)"
          >
            <a style="color: #f5222d"><a-icon type="delete" /> 删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </admin-todo-list>

    <DictModal ref="modalEditRef" @on-ok="handleOk"></DictModal>
    <DictItemListDrawer ref="dictItemList" />
    <DictDeleteListModal ref="dictDeleteList" @on-ok="handleOk" />
  </admin-layout>
</template>

<script>
import { PageListMixin } from '@/mixins/PageListMixin'
import { FileMixin } from '@/mixins/FileMixin'
import HSearchForm from '@/components/hrhx/form/HSearchForm'
import DictModal from '@/views/system/modules/dict/DictModal'
import DictItemListDrawer from '@/views/system/modules/dict/DictItemListDrawer'
import DictDeleteListModal from '@/views/system/modules/dict/DictDeleteListModal'

export default {
  name: 'DictList',
  components: { DictDeleteListModal, DictItemListDrawer, DictModal, HSearchForm },
  mixins: [PageListMixin, FileMixin],
  data() {
    return {
      description: '这是数据字典页面',
      visible: false,
      queryParams: {
        dictCode: '',
        dictName: ''
      },
      // 表头
      columns: Object.freeze([
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: '50px',
          align: 'center',
          customRender: (t, r, i) => parseInt(i + 1)
        },
        {
          title: '字典名称',
          align: 'center',
          ellipsis: true,
          dataIndex: 'dictName'
        },
        {
          title: '字典编号',
          align: 'center',
          ellipsis: true,
          dataIndex: 'dictCode'
        },
        {
          title: '描述',
          align: 'center',
          ellipsis: true,
          dataIndex: 'description'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: '230px',
          scopedSlots: { customRender: 'action' }
        }
      ]),
      dict: '',
      labelCol: {
        xs: { span: 8 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 16 },
        sm: { span: 19 }
      },
      tableScroll: { x: 5 * 147 + 50 },
      interface: {
        list: '/sys/dict/list',
        delete: '/sys/dict/delete',
        file: 'sys/dict/exportXls',
        excelTemplateUrl: '/sys/dict/downLoadTemplated'
      }
    }
  },
  methods: {
    //编辑字典数据
    editDictItem(record) {
      this.$refs.dictItemList.edit(record)
    },

    openDeleteList() {
      this.$refs.dictDeleteList.show()
    }
  }
}
</script>
