<template>
  <PageWrapper>
    <el-row :gutter="10" class="mt-3">
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="mb-4">
        <el-card shadow="hover" class="border-0">
          <template #header>
            <el-space>
                <el-input type="text" v-model="params.name" clearable placeholder="请输入字典名称">
                  <template #prefix>
                    <el-icon class="el-input__icon">
                      <SearchOutlined />
                    </el-icon>
                  </template>
                </el-input>
                <el-button type="primary" icon="Search" @click="reloadTable"> 查询 </el-button>
            </el-space>
            <div style="margin-top:15px;">
              <el-button type="primary" @click="dictRefresh"  icon="RefreshRight" v-perm="['sys:dict:cache']">刷新缓存</el-button>
              <el-button type="primary" @click="addDict" icon="Plus" v-perm="['sys:dict:add']">新建</el-button>
              <el-button type="danger" v-perm="['sys:dict:delete']" icon="Delete" :disabled="!selectionData.length" @click="handleDelete()">删除</el-button>
            </div>
          </template>
          <BasicTable :columns="columns" :showTableSetting="false" :request="loadDataTable" :row-key="(row) => row.id"
            ref="tableRef" :actionColumn="actionColumn" @selection-change="onSelectionChange" highlight-current-row
            @row-click="onCheckedRow" :pagination="{ small: true, layout: 'total,prev, pager, next,jumper' }" />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" class="mb-4">
        <el-card shadow="hover" class="mb-4 border-0 proCard">
          <dictItem :dictId="dictId" v-if="dictItemShow"></dictItem>
        </el-card>
      </el-col>
    </el-row>
    <editDialog v-if="editVisible" :dictId="dictId" v-model:visible="editVisible" @success="reloadTable">
    </editDialog>
  </PageWrapper>
</template>

<script lang="ts" setup>
import { ref, reactive, h, nextTick, defineAsyncComponent } from 'vue';
import { SearchOutlined } from '@vicons/antd';
import { TableAction } from '@/components/Table';
import { getDictList, refreshCache, dictDelete, dictBatchDelete } from '@/api/data/dictionary';
import { columns } from './columns';
import dictItem from './dictItem.vue';
import { message, confirm } from "@/utils/auth";
const editDialog = defineAsyncComponent(() =>
  import('./edit.vue')
)
const dictId = ref(0)
const dictItemShow = ref(false)
const tableRef = ref();
const selectedKey = ref('');
const rowKeysName = ref('');
const currentRow = ref();
const editVisible = ref(false)
const selectionData = ref([])
const params = ref({
  name: '',
});

const actionColumn = reactive({
  width: 200,
  label: '操作',
  prop: 'action',
  fixed: 'right',
  render(record) {
    return h(TableAction as any, {
      style: 'text',
      actions: [
        {
          label: '编辑',
          icon:'Edit',
          type: 'warning',
          onClick: handleEdit.bind(null, record),
        },
        {
          label: '删除',
          icon:'Delete',
          type: 'danger',
          onClick: handleDelete.bind(null, record),
        }
      ],
    });
  },
});


//新建字典
const addDict = async () => {
  dictId.value=0
  await nextTick();
  editVisible.value=true
};
//编辑字典
const handleEdit = async (record: Recordable) => {
  dictId.value=record.row.id
  await nextTick();
  editVisible.value=true
};
//选择字典项
function onCheckedRow(row) {
  dictId.value = row.id
}

//刷新字典项值列表
function reloadTable() {
  tableRef.value.reload({ pageNo: 1 });
}

//加载字典项值列表;
const loadDataTable = async (res) => {
  const result = await getDictList({ ...params.value, ...res });
  dictId.value = result?.records[0]?.id
  dictItemShow.value = true
  nextTick(() => {
    const tables = tableRef.value.getTableRef();
    tables.setCurrentRow(result?.records[0])
  })
  return result;
};

//刷新缓存
async function dictRefresh() {
  await refreshCache();
  message("刷新成功");
}
//删除字典项
async function handleDelete(record: Recordable) {
  let ids = []
  if (!record) {
    ids = selectionData.value.map(({ id }) => id);
  }
  await confirm('确定要删除？');
  record ? await dictDelete(record.row.id) : await dictBatchDelete(ids);
  message("删除成功");
  reloadTable()
}
function onSelectionChange(value) {
  selectionData.value = value
}
</script>
<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
