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

const ruleFormRef = ref<FormInstance>()

const store = useMapStore()
const statusList = store.mapList.filter((item: any) => item.key === 'system_status')[0].values
const editList = store.mapList.filter((item: any) => item.key === 'system_can_edit')[0].values

const form = reactive({
  label: '',
  value: '',
  key: '',
  type: '',
  status: '1',
  remark: '',
  sort: '',
  can_edit: '1'
})
const rules = reactive<FormRules>({
  label: [{ required: true, message: '请输入字典标签', trigger: 'blur' }],
  value: [{ required: true, message: '请输入字典键值', trigger: 'blur' }],
  sort: [{ required: true, message: '请输入字典排序', trigger: 'blur' }]
})
const props = defineProps({
  isListAddDialog: {
    type: Boolean,
    required: true
  },
  isEdit: {
    type: Boolean,
    required: true
  },
  editData: {
    type: Object,
    required: true
  },
  title: {
    type: String,
    required: true
  },
  type: {
    type: String,
    required: true
  },
  dictionaryId: {
    type: String,
    required: true
  }
})
interface Emits {
  (e: 'update:isListAddDialog', isListAddDialog: boolean): void
  (e: 'updatePage'): void
}

const emit = defineEmits<Emits>()

// 普通属性

const handleCancel = () => {
  emit('update:isListAddDialog', 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.editData.id, data_dictionary_id: props.dictionaryId }, form)
        updateDictionaryItem(params).then(() => {
          ElMessage.success('更新成功')
          emit('update:isListAddDialog', false)
          emit('updatePage')
        })
      } else {
        // 新增字典的值
        const params = Object.assign({ data_dictionary_id: props.dictionaryId }, form)
        createDictionaryItem(params).then(() => {
          ElMessage.success('新增成功')
          emit('update:isListAddDialog', false)
          emit('updatePage')
        })
      }
    }
  })
}

onMounted(() => {
  if (props.isEdit) {
    form.label = props.editData.label
    form.value = props.editData.value
    form.type = props.editData.type
    form.remark = props.editData.remark
    form.status = props.editData.status
    form.sort = props.editData.sort
    form.can_edit = props.editData.can_edit
  }
})
</script>
<template>
  <el-dialog width="30%" :model-value="isListAddDialog" draggable :before-close="handleCancel" :title="props.title">
    <el-form :model="form" ref="ruleFormRef" :rules="rules" label-width="120px" label-suffix="：">
      <el-form-item label="字典标签" prop="label">
        <el-input v-model="form.label" placeholder="请输入字典标签"></el-input>
      </el-form-item>
      <el-form-item label="字典键值" prop="value">
        <el-input v-model="form.value" :disabled="form.can_edit === '0'" placeholder="请输入字典键值"></el-input>
      </el-form-item>
      <el-form-item label="字典排序" prop="sort">
        <el-input v-model="form.sort" placeholder="请输入字典排序"></el-input>
      </el-form-item>
      <el-form-item label="字典类型">
        <el-input disabled :placeholder="props.type"></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-item label="能否编辑" prop="can_edit">
        <el-radio-group v-model="form.can_edit">
          <el-radio v-for="(item, index) in editList" :key="index" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </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>
