<script setup lang="ts">
import { getDictionaryItemList, delDictionaryItem } from '../api'
import { ElMessage, ElMessageBox } from 'element-plus'
import ListAddDialog from '../components/ListAddDialog.vue'
const route = useRoute()
const appList = ref()
const editData = ref({})
const title = ref('')
const type = route.query.type as string
const dictionaryId = route.query.id as string
const isEdit = ref(false)
const isListAddDialog = ref(false)
const listOptions = {
  remote: {
    httpRequest: getDictionaryItemList,
    params: { data_dictionary_id: route.query.id }
  },

  columns: [
    { label: '字典编码', prop: 'data_dictionary_id', align: 'center' },
    { label: '字典标签', prop: 'label', align: 'center' },
    { label: '字典键值', prop: 'value', align: 'center' },
    {
      label: '状态',
      prop: 'status_name',
      align: 'center'
    },
    { label: '备注  ', prop: 'remark', align: 'center' },
    { label: '创建时间', prop: 'created_time', align: 'center' },
    { label: '操作', slots: 'table-operate', align: 'center', minWidth: '180', fixed: 'right' }
  ]
}
const handleAdd = () => {
  isListAddDialog.value = true
  isEdit.value = false
  editData.value = {}
  title.value = '新增数据'
}
const handleEdit = (row: any) => {
  isEdit.value = true
  editData.value = row
  isListAddDialog.value = true
  title.value = '修改数据'
}
const handleDelete = (row: any) => {
  ElMessageBox.confirm('确定要删除吗？', '提示').then(() => {
    const params = { id: row.id }
    delDictionaryItem(params).then(() => {
      ElMessage.success('删除成功')
      handleUpdate()
    })
  })
}
// 确定
const handleUpdate = () => {
  appList.value.refetch()
}
</script>

<template>
  <AppCard title="字典列表">
    <el-button type="primary" @click="handleAdd" v-permission="'v1-backend-data-dictionary-value-create'"
      >新增</el-button
    >
    <AppList v-bind="listOptions" ref="appList">
      <template #table-operate="{ row }">
        <el-space>
          <el-link
            type="primary"
            plain
            @click="handleEdit(row)"
            v-permission="'v1-backend-data-dictionary-value-update'"
            >编辑</el-link
          >
          <el-link
            type="primary"
            plain
            @click="handleDelete(row)"
            v-permission="'v1-backend-data-dictionary-value-delete'"
            >删除</el-link
          >
        </el-space>
      </template>
    </AppList>
  </AppCard>
  <template v-if="isListAddDialog === true">
    <ListAddDialog
      v-model:isListAddDialog="isListAddDialog"
      @updatePage="handleUpdate"
      :editData="editData"
      :isEdit="isEdit"
      :title="title"
      :type="type"
      :dictionaryId="dictionaryId"
    />
  </template>
</template>
