<template>
  <el-dialog
      v-model="props.visible"
      :title="props.linkId?'编辑':'新增'"
      width="500"
      :close-on-click-modal="false"
      :before-close="dialogClose"
  >
    <el-form
        class="ls-form"
        ref="formRef"
        :model="formData"
        label-width="80px"
    >
      <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="type"
      :rules="{ required: true, message: '请选择类型', trigger: 'change' }">
          <el-select
              v-model="formData.type"
              placeholder="请选择类型"
          >
            <el-option label="友情链接" :value="1"></el-option>
            <el-option label="合作伙伴" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址" prop="url" :rules="{ required: true, message: '请输入地址', trigger: 'blur' }">
        <el-input v-model="formData.url" placeholder="请输入地址"/>
      </el-form-item>
      <el-form-item label="形式" prop="form"
      :rules="{ required: true, message: '请选择形式', trigger: 'change' }">
          <el-select
              v-model="formData.form"
              placeholder="请选择形式"
          >
            <el-option label="文字链接" :value="1"></el-option>
            <el-option label="图片链接" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
            label="图片"
            prop="image"
            :rules="{ required: true,message: '请上传图片', trigger: 'change' }"
            v-if="formData.form ==2"
        >
            <UploadImg @changeFileName="(name)=>formData.coverImgName=name"
                       :fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
                       name="article"
                       :fileSize="200"
                       v-model:image-url="formData.image">
              <template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
            </UploadImg>
        </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="formData.sort"/>
      </el-form-item>
      <el-form-item label="状态">
          <el-radio v-model="formData.status" :label="1">在用</el-radio>
          <el-radio v-model="formData.status" :label="2">停用</el-radio>
        </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 {getLinkDetail,linkAdd,linkUpdate} from "@/api/content/link";
import {onMounted, reactive, shallowRef} from "vue";
import {message} from "@/utils/auth";
import {useLockFn} from "@/utils/useLockFn";
import UploadImg from "@/components/Upload/Image.vue";

const emit = defineEmits(["success", "update:visible"]);
const formRef = shallowRef<FormInstance>();
const formData = reactive({
  id: "",
  name: "",
  type: "",
  url: "",
  form: "",
  image: "",
  status:1,
  sort: 0
});

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

const handleSubmit = async () => {
    await formRef.value?.validate();
    props.linkId ? await linkUpdate(formData) : await linkAdd(formData);
    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 getLinkDetail(props.linkId);
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key];
    }
  }
};

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

</script>
