<template> 
  <el-dialog title="添加链接" v-model="show" width="800px" append-to-body draggable>
    <div style="display: grid; grid-template-columns: 1fr 300px; gap: 1rem;">
    <el-form label-width="120px">
      <el-form-item label="链接类型" prop="typeId">
      <el-select v-model="form.typeId" placeholder="链接类型">
        <el-option v-for="item in sys_links_types" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      </el-form-item>
      <el-form-item label="链接标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入链接标题" />
      </el-form-item>
      <el-form-item label="链接地址" prop="url">
        <el-input v-model="form.url" placeholder="请输入链接地址" />
      </el-form-item>
      <el-form-item label="链接图片" prop="img">
        <w-upload v-model="form.img"
          :before="before"
          :after="after"
          text="上传图片"
          accept="image/*"
        ></w-upload> <el-button style="margin-left: 1rem;" type="danger" plain @click="img='';form.img='';">清空图片</el-button>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" maxlength="200" show-word-limit v-model="form.remark" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item label="排序" prop="sortNum">
        <el-input type="number" v-model="form.sortNum" placeholder="请输入排序" />
      </el-form-item>
    </el-form>
    <div style="display: flex; justify-content: center; align-items: center;">
      <img v-if="img" style="width: 100%; aspect-ratio: 1/1; object-fit: contain;" :src="img">
      <div v-else>暂无图片预览</div>
    </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="show = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';
import { ElLoading, ElMessage } from 'element-plus';
import { doAdd } from '@/api/system/links';

const emit = defineEmits(["success"]);

const { proxy } = getCurrentInstance();

const { sys_normal_disable,sys_links_types } = proxy.useDict('sys_normal_disable','sys_links_types');

const form = ref({
});
const show = ref(false);

const open = async (typeId) => {
  form.value = {typeId,sortNum:100};
  show.value = true;
}

const submitForm = async () => {
  let loading = ElLoading.service({ fullscreen: true, lock: true, background: '#0001' });
  if(!form.value.typeId){
    ElMessage.error('类型必选');
    return;
  }
  try {
    let r = await doAdd(form.value);
    ElMessage.success("添加成功");
    show.value = false;
    emit("success", form.value);
  } finally {
    loading.close();
  }
}

const img = ref("");
const after = (r)=>{
  img.value = r.data.url;
  return r.data.url;
}
const before = (file)=>{
  console.debug(file);
  if(!file.type.startsWith("image/")){
    ElMessage.error("请选择图片");
    return false;
  }
  img.value = window.URL.createObjectURL(file);
  return true;
}


defineExpose({ open });
</script>

<style lang="scss" scoped></style>