<template>
  <el-dialog
      v-model="props.visible"
      :title="props.adSortId?'编辑':'新增'"
      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 v-model="formData.name"  placeholder="请输入广告位名称"/>
      </el-form-item>
    <el-form-item label="页面位置" prop="location" class="flex-1" :rules="{ required: true, message: '请输入页面位置', trigger: 'blur' }">
          <number-input v-model="formData.location" placeholder="请输入页面位置" />
        </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-option label="移动端" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="formData.sort" :max="9999"  placeholder="请输入排序"/>
        </el-form-item>
        <el-form-item label="备注" prop="note"  :rules="{ required: true, message: '请输入备注', trigger: 'blur' }">
        <el-input v-model="formData.note" type="textarea"  placeholder="请输入备注"/>
      </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 {getAdSortDetail,adSortAdd,adSortUpdate} from "@/api/content/adSort";
import { getLayoutAllList } from '@/api/content/layout';
import {onMounted, reactive, shallowRef,ref} 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:'',
  location: "",
  note:'',
  type:'',
  sort: 0
});

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false
  },
  adSortId: {
    type: Number,
    required: true,
    default: 0
  }
});
const locationList = ref([])
const handleSubmit = async () => {
    await formRef.value?.validate();
    props.adSortId ? await adSortUpdate(formData) : await adSortAdd(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 getAdSortDetail(props.adSortId);
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key];
    }
  }
};
const getAllDict = async () => {
  let list = await getLayoutAllList();
  locationList.value = list ? list : [];
};
onMounted(() => {
  getAllDict()
  if (props.adSortId) {
    setFormData();
  }
});

</script>
