<template>
  <Drawer
    :drawer-visible="drawerVisible"
    width="960px"
    :title="title"
    :loading="submitLoading"
    confirm-btn-text="保存"
    :cancel-btn="false"
    @confirm="handleConfirm"
    @close="close"
  >
    <InfoLable class="mb-[20px]" label="当前终端" :value="props.tabType == 1 ? '平台端' : '机构端'" />
    <t-form ref="formRef" label-align="top" class="form !pt-[20px]" :rules="rules" :data="formData">
      <t-form-item label="版本号" name="version">
        <t-input maxlength="20" v-model="formData.version" placeholder="请输入版本号"> </t-input>
      </t-form-item>
      <t-form-item label="更新说明" name="description">
        <WangEditor
          height="300px"
          :editor-config="{
            placeholder: '请输入版本更新说明',
            maxLength: 200
          }"
          :toolbar-config="{
            excludeKeys: ['uploadImage', 'uploadVideo'] // 添加这两项以排除图片和视频上传选项
          }"
          v-model:value="formData.description"
        />
      </t-form-item>
      <t-form-item label="版本备注" name="remark">
        <t-textarea :maxlength="200" v-model="formData.remark" placeholder="请输入版本备注"> </t-textarea>
      </t-form-item>
    </t-form>
  </Drawer>
</template>

<script setup lang="ts" name="version-edit">
import { FormProps, FormInstanceFunctions } from 'tdesign-vue-next'
import { ResVersion, ReqVersion } from '@/api/interface/version/index'
import { postVersionEdit, postVersionSave } from '@/api/modules/version/index'

const props = defineProps<{
  tabType: number
}>()

const drawerVisible = ref(false)
const submitLoading = ref(false)

const formRef = useTemplateRef<FormInstanceFunctions>('formRef')
const formData = reactive<ReqVersion>({
  version: '',
  versionType: 1,
  versionId: 0,
  description: '',
  remark: '',
  status: 1
})

const rules: FormProps['rules'] = {
  version: [
    {
      required: true,
      message: '请输入版本号！',
      trigger: 'blur'
    },
    {
      validator: (val: string) => {
        // eslint-disable-next-line no-useless-escape
        const regex = /^\d[\da-zA-Z!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]*$/
        return regex.test(val)
          ? {
              result: true,
              message: '',
              type: 'success'
            }
          : {
              result: false,
              message: '数值非法，版本号格式为大小写字母、特殊字符和阿拉伯数字，且必须以数字开头！',
              type: 'error'
            }
      },
      trigger: 'blur'
    }
  ],
  description: [
    {
      required: true,
      message: '请填写更新说明！',
      trigger: 'change'
    }
  ]
}

const title = ref('新增版本')
const open = (val: ResVersion | null) => {
  drawerVisible.value = true
  if (val) {
    title.value = '编辑版本'
    for (const key in formData) {
      if (Object.prototype.hasOwnProperty.call(val, key)) {
        ;(formData as any)[key] = val[key]
      }
    }
  } else {
    title.value = '新增版本'
  }
}
const close = () => {
  formRef.value?.reset()
  formData.status = 1
  drawerVisible.value = false
}

// 确认
const handleConfirm = () => {
  formRef.value?.validate().then(val => {
    if (val === true) {
      submitLoading.value = true
      const sumit = formData.versionId ? postVersionEdit : postVersionSave
      sumit(formData)
        .then(() => {
          close()
          emit('success')
        })
        .finally(() => {
          submitLoading.value = false
        })
    }
  })
}

const emit = defineEmits<{
  (e: 'success'): void
}>()

defineExpose({
  open,
  close
})
</script>

<style lang="less" scoped>
.form {
  border-top: 1px solid var(--td-font-gray-4);
}
</style>
