<template>
  <el-dialog
      v-model="props.visible"
      :title="props.configItemId?'编辑配置项':'新增配置项'"
      width="500"
      :close-on-click-modal="false"
      :before-close="dialogClose"
  >
    <el-form
        class="ls-form"
        ref="formRef"
        :model="formData"
        label-width="100px"
    >
      <el-form-item
          label="配置项名称"
          prop="name"
          :rules="{ required: true, message: '请输入配置项名称', trigger: 'blur' }"
      >
        <el-input
            class="ls-input"
            v-model="formData.name"
            placeholder="请输入配置项名称"
            clearable
        />
      </el-form-item>
      <el-form-item
          label="配置项编码"
          prop="code"
          :rules="{ required: true, message: '请输入配置项编码', trigger: 'blur' }"
      >
        <el-input
            class="ls-input"
            v-model="formData.code"
            placeholder="请输入配置项编码"
            clearable
        />
      </el-form-item>
      <el-form-item
          label="配置项值"
          prop="value"
      >
        <el-input
            class="ls-input"
            v-model="formData.value"
            placeholder="请输入配置项值"
            clearable
        />
      </el-form-item>
      <el-form-item label="配置项类型" prop="type" class="flex-1" :rules="{ required: true, message: '请选择配置项类型', trigger: 'change' }">
          <el-select v-model="formData.type" class="flex-1" clearable placeholder="请选择配置项类型">
            <el-option v-for="(item, index) in typeList" :key="index" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="配置项源"
          prop="options"
      >
        <el-input
            class="ls-input"
            v-model="formData.options"
            placeholder="请输入配置项数据源"
            clearable
        />
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="formData.sort"/>
      </el-form-item>
      <el-form-item label="配置项状态" prop="status">
          <el-radio-group v-model="formData.status" name="status">
            <el-radio :value="1">正常</el-radio>
            <el-radio :value="2">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      <el-form-item label="备注" prop="note">
          <el-input v-model="formData.note" type="textarea" placeholder="请输入备注" clearable />
        </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogClose">取消</el-button>
        <el-button :loading="subLoading" type="primary" @click="submit">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import type {FormInstance} from "element-plus";
import {getConfigItemDetail,configItemAdd,configItemUpdate} from "@/api/data/config";
import {onMounted, ref,reactive, shallowRef} from "vue";
import {message} from "@/utils/auth";
import {useLockFn} from "@/utils/useLockFn";

const emit = defineEmits(["success", "update:visible"]);
const formRef = shallowRef<FormInstance>();
const formData = reactive({
  id: "",
  name: "",
  code:"",
  value: "",
  sort: 0,
  options:'',
  type:'',
  status:1,
  note:''
});
const typeList = ref([
  {
    name:'隐藏',
    value:'hidden'
  },
  {
    name:'只读文本',
    value:'readonly'
  },
  {
    name:'数字',
    value:'number'
  },
  {
    name:'单行文本',
    value:'text'
  },
  {
    name:'多行文本',
    value:'textarea'
  },
  {
    name:'密码',
    value:'password'
  },
  {
    name:'单选框',
    value:'radio'
  },
  {
    name:'复选框',
    value:'checkbox'
  },
  {
    name:'下拉框(单选)',
    value:'select'
  },
  {
    name:'下拉框(多选)',
    value:'selects'
  },
  {
    name:'字体图标',
    value:'icon'
  },
  {
    name:'日期',
    value:'date'
  },
  {
    name:'时间',
    value:'datetime'
  },
  {
    name:'单张图片',
    value:'image'
  },
  {
    name:'多张图片',
    value:'images'
  },
  {
    name:'单个文件',
    value:'file'
  },
  {
    name:'多个文件',
    value:'files'
  },
  {
    name:'富文本编辑器',
    value:'ueditor'
  },
])

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false
  },
  configId: {
    type: Number,
    required: true,
    default: 0
  },
  configItemId: {
    type: Number,
    required: true,
    default: 0
  }
});

const handleSubmit = async () => {
    await formRef.value?.validate();
    props.configItemId ? await configItemUpdate({...formData,configId:props.configId}) : await configItemAdd({...formData,configId:props.configId});
    message("操作成功");
    emit("update:visible", false);
    emit("success");
};

const dialogClose = () => {
  emit("update:visible", false);
};

const { isLock:subLoading,lockFn: submit } = useLockFn(handleSubmit);


const setFormData = async () => {
  const data = await getConfigItemDetail(props.configItemId);
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key];
    }
  }
};

onMounted(() => {
  if (props.configItemId) {
    setFormData();
  }
});

</script>
