<template>
  <PageWrapper>
      <BasicTable :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" ref="tableRef"
        :actionColumn="actionColumn" @selection-change="onSelectionChange">
        <template #tableTitle>
          <el-space>
            <el-input type="text" v-model="params.name" 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-button type="primary"  icon="Plus" @click="handleAdd">新建</el-button>
            <el-button type="danger"  icon="Delete" :disabled="!selectionData.length"@click="handleDelete()">删除</el-button>
          </el-space>
        </template>
      </BasicTable>
    <editDialog v-if="editVisible" :dictId="dictId" :dictItemId="dictItemId" v-model:visible="editVisible" @success="reloadTable">
    </editDialog>
  </PageWrapper>
</template>

<script lang="ts" setup>
import { ref, reactive, h, nextTick, watch, defineAsyncComponent } from 'vue';
import { SearchOutlined } from '@vicons/antd';
import { TableAction } from '@/components/Table';
import { getDictItemList, dictItemDelete, dictItemBatchDelete } from '@/api/data/dictionary';
import { columns } from './columnsItem';
import { message, confirm } from "@/utils/auth";
const editDialog = defineAsyncComponent(() =>
  import('./editItem.vue')
)
const tableRef = ref();
const editVisible = ref(false)
const selectionData = ref([])
const dictItemId = ref(0)
const params = ref({
  name: '',
});
const props = defineProps({
  dictId: {
    type: Number,
    required: true,
    default: 0
  }
});
watch(
    () => props.dictId,
    async (value) => {
      if(value){
        await nextTick()
        reloadTable()
      }
    }
)
const actionColumn = reactive({
  lable: 150,
  title: '操作',
  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),
        }
      ],
    });
  },
});


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

//加载字典项值列表
const loadDataTable = async (res) => {
  const result = await getDictItemList({ ...params.value, dictId:props.dictId, ...res });
  return result;
};
//新建字典
const handleAdd = async () => {
  dictItemId.value=0
  await nextTick();
  editVisible.value=true
};
//编辑字典
const handleEdit = async (record: Recordable) => {
  dictItemId.value=record.row.id
  await nextTick();
  editVisible.value=true
};
//删除字典项
async function handleDelete(record: Recordable) {
  let ids = []
  if (!record) {
    ids = selectionData.value.map(({ id }) => id);
  }
  await confirm('确定要删除？');
  record ? await dictItemDelete(record.row.id) : await dictItemBatchDelete(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>
