<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { useMapStore } from '@/stores/map'
import { getDictionaryList, delDictionary } from '../api'
import AddDialog from '../components/AddDialog.vue'

const router = useRouter()
const appList = ref()
const isShowDialog = ref(false) // 新增字典弹框状态
const isEdit = ref(false) //是否可编辑
const rowInfo = ref({})
const store = useMapStore()

// 状态
//表单每行数据
const listOptions = $computed(() => {
  return {
    remote: {
      httpRequest: getDictionaryList,
      params: {
        status: '',
        type: '',
        created_time_start: '',
        created_time_end: ''
      }
    },
    filters: [
      { type: 'input', prop: 'name', label: '字典名称：', placeholder: '请输入字典名称' },
      { type: 'input', prop: 'key', label: '字典类型：', placeholder: '请输入字典类型' },
      {
        type: 'select',
        prop: 'status',
        placeholder: '请选择字典状态',
        label: '字典状态:',
        options: store.mapList?.filter((item: any) => item.key === 'system_status')[0]?.values
      },
      {
        type: 'input',
        label: '创建时间:',
        slots: 'created_time_start',
        prop: 'created_time_start'
      },
      { slots: 'created_time_end', prop: 'created_time_end' }
    ],
    columns: [
      { label: '字典主键', prop: 'id', width: 224, align: 'center' },
      { label: '字典名称', prop: 'name', align: 'center' },
      { label: '字典类型', prop: 'key', 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', width: 300, fixed: 'right' }
    ]
  }
})
// 新增弹窗
const handleAdd = () => {
  isShowDialog.value = true
  isEdit.value = false
}
// 编辑弹窗
const handleEdit = (row: any) => {
  rowInfo.value = row
  isShowDialog.value = true
  isEdit.value = true
}
//删除
const handleDelete = (row: any) => {
  ElMessageBox.confirm('确定要删除吗？', '提示').then(() => {
    const params = { id: row.id }
    delDictionary(params).then(() => {
      ElMessage.success('删除成功')
      handleUpdate()
    })
  })
}
// 跳转列表
const handleList = (row: any) => {
  router.push({
    path: '/system/dictionary/rowList',
    query: {
      id: row.id,
      type: row.key
    }
  })
}

// 确定
const handleUpdate = () => {
  appList.value.refetch()
}
</script>

<template>
  <AppCard title="数据字典">
    <AppList v-bind="listOptions" ref="appList" border stripe>
      <el-row>
        <el-button
          type="primary"
          @click="handleAdd"
          style="margin-bottom: 20px"
          v-permission="'v1-backend-data-dictionary-create'"
          >新增字典</el-button
        >
      </el-row>
      <template v-slot:created_time_start="{ params }">
        <el-date-picker v-model="params.created_time_start" type="date" placeholder="开始时间"> </el-date-picker>
        <p class="separator">&nbsp;&nbsp;&nbsp;&nbsp;-</p>
      </template>
      <template v-slot:created_time_end="{ params }">
        <el-date-picker v-model="params.created_time_end" type="date" placeholder="结束时间"> </el-date-picker>
      </template>
      <template #table-operate="{ row }">
        <el-space>
          <el-link type="primary" plain @click="handleEdit(row)" v-permission="'v1-backend-data-dictionary-update'"
            >编辑</el-link
          >

          <el-link type="primary" plain @click="handleList(row)" v-permission="'v1-backend-data-dictionary-value-list'"
            >列表</el-link
          >
          <el-link type="primary" plain @click="handleDelete(row)" v-permission="'v1-backend-data-dictionary-delete'"
            >删除</el-link
          >
        </el-space>
      </template>
      <template v-if="isShowDialog === true">
        <AddDialog v-model:isShowDialog="isShowDialog" :isEdit="isEdit" :rowInfo="rowInfo" @updatePage="handleUpdate" />
      </template>
    </AppList>
  </AppCard>
</template>
<style lang="scss" scoped></style>
