<template>
  <el-form label-width="100px">
    <el-form-item label="文物名称：" required>
      <el-input
        v-model.trim="data.name"
        style="width: 100%"
        :maxlength="500"
        placeholder="请输入"
      />
    </el-form-item>
    <el-form-item label="文物编号：">
      <el-input
        v-model.trim="data.unicode"
        style="width: 100%"
        :maxlength="500"
        placeholder="请输入"
      />
    </el-form-item>
    <el-form-item label="文物级别：">
      <el-select style="width: 100%" v-model="data.level">
        <el-option
          :value="Number(key)"
          :label="type"
          v-for="(type, key) in relicsLevelDesc"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="类别：">
      <el-select style="width: 100%" v-model="data.category">
        <el-option
          :value="Number(key)"
          :label="type"
          v-for="(type, key) in relicsTypeDesc"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="文物地址：">
      <el-input
        v-model="data.address"
        style="width: 100%"
        :maxlength="500"
        show-word-limit
        type="textarea"
        placeholder="请输入"
      />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { QuiskExpose } from "@/helper/mount";
import { Relics, relicsLevelDesc, relicsTypeDesc } from "@/store/relics";
import { ElMessage } from "element-plus";
import { computed, ref } from "vue";

const props = defineProps<{
  relics?: Relics;
  submit: (relics: Relics) => Promise<void>;
}>();
const data = ref<Relics>(props.relics ? { ...props.relics } : { name: "", relicsId: -1 });

// watch(
//   () => data.value.unicode,
//   (newv) => {
//     if (newv && !/^[a-zA-Z0-9]+$/.test(newv)) {
//       const reg = newv.replace(/[^a-zA-Z0-9]+/gi, "");
//       Promise.resolve().then(() => (data.value.unicode = reg));
//       ElMessage.error("文物编号仅支持字母或数字组合");
//     }
//   }
// );

defineExpose<QuiskExpose>({
  title: computed(() => `${props.relics ? "修改" : "添加"}文物`),
  async submit() {
    if (!data.value.name) {
      ElMessage.error("请输入文物名称！");
      throw "请输入文物名称！";
    }
    props.submit(data.value);
  },
});
</script>
