<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { updateDictionary, createDictionary } from '../api'
import { useMapStore } from '@/stores/map'
import type { FormInstance, FormRules } from 'element-plus'

const store = useMapStore()
const statusList = store.mapList.filter((item: any) => item.key === 'system_status')[0].values
const ruleFormRef = ref<FormInstance>()
const form = reactive({
  name: '',
  key: '',
  status: '1',
  remark: '',
  can_edit: '1'
})
const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
  key: [{ required: true, message: '请输入字典类型', trigger: 'blur' }]
})
const props = defineProps({
  isShowDialog: {
    type: Boolean,
    required: true
  },
  isEdit: {
    type: Boolean,
    required: true
  },
  rowInfo: {
    type: Object,
    required: true
  }
})
interface Emits {
  (e: 'update:isShowDialog', isShowDialog: boolean): void
  (e: 'updatePage'): void
}

const emit = defineEmits<Emits>()

// 普通属性

const handleCancel = () => {
  emit('update:isShowDialog', false)
}
// 确定
const handleConfirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(valid => {
    if (valid) {
      if (props.isEdit === true) {
        const params = Object.assign({ id: props.rowInfo.id }, form)
        updateDictionary(params).then(() => {
          ElMessage.success('更新成功')
          emit('update:isShowDialog', false)
          emit('updatePage')
        })
      } else {
        // 新增字典
        const params = Object.assign({}, form)
        createDictionary(params).then(() => {
          ElMessage.success('新增成功')
          emit('update:isShowDialog', false)
          emit('updatePage')
        })
      }
    }
  })
}

onMounted(() => {
  if (props.isEdit) {
    form.name = props.rowInfo.name
    form.key = props.rowInfo.key
    form.status = props.rowInfo.status
    form.remark = props.rowInfo.remark
  }
})
</script>
<template>
  <el-dialog
    width="30%"
    :model-value="isShowDialog"
    draggable
    :before-close="handleCancel"
    :title="isEdit === true ? '编辑字典' : '新增字典'"
  >
    <el-form :model="form" ref="ruleFormRef" :rules="rules" label-width="120px" label-suffix="：">
      <el-form-item label="字典名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入字典名称"></el-input>
      </el-form-item>
      <el-form-item label="字典类型" prop="key">
        <el-input v-model="form.key" placeholder="请输入字典类型"></el-input>
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio v-for="(item, index) in statusList" :key="index" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" autosize type="textarea" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span>
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm(ruleFormRef)">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
