<template>
  <BasicModal
    v-bind="$attrs"
    :title="modaltitle"
    @register="registerModal"
    @ok="modalSubmit"
    @cancel="closeModal"
  >
    <a-form
      ref="formRef"
      :model="modalData"
      :rules="rules"
      labelAlign="right"
      :label-col="{ span: 7 }"
    >
      <a-form-item label="id" name="id" v-if="false">
        <a-input v-model:value="modalData.id" />
      </a-form-item>
      <a-form-item label="专栏名称" name="title">
        <a-textarea v-model:value="modalData.title" />
      </a-form-item>
      <a-form-item label="状态" name="isShow">
        <a-select v-model:value="modalData.isShow">
          <a-select-option :value="true">启用</a-select-option>
          <a-select-option :value="false">停用</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="是否是外部链接" name="isExternal">
        <a-switch
          v-model:checked="modalData.isExternal"
          checked-children="是"
          un-checked-children="否"
        />
      </a-form-item>
      <a-form-item label="链接" name="linkOrApi">
        <a-input v-model:value="modalData.linkOrApi" />
      </a-form-item>
      <a-form-item label="排序号" name="sort">
        <a-input-number v-model:value="modalData.sort" :min="0" />
      </a-form-item>
      <a-form-item label="图片" name="imgUrl">
        <a-upload
          v-model:file-list="fileList"
          list-type="picture-card"
          class="upload-list-inline"
          :customRequest="handleCustomRequest"
        >
          <img v-if="imageUrl" :src="imageUrl" width="100" height="100" />
          <div v-else>
            <PlusOutlined />
            <div class="ant-upload-text">上传</div>
          </div>
        </a-upload>
      </a-form-item>
    </a-form>
  </BasicModal>
</template>

<script setup lang="ts">
  import { defineProps, defineEmits, ref, watch } from 'vue';
  import { useGlobSetting } from '@/hooks/setting';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { uploadFile } from '@/api/formrender/index';
  import { BasicModal, useModalInner } from '@/components/Modal';

  const emit = defineEmits(['submit']);

  const formRef = ref();
  const rules = {
    title: [{ required: true, message: '专栏名称不能为空', trigger: 'blur' }],
    linkOrApi: [{ required: true, message: '链接不能为空', trigger: 'blur' }],
    sort: [{ required: true, message: '排序号不能为空', trigger: 'blur' }],
  };

  // 弹窗数据
  const modaltitle = ref('');
  const modalData = ref({
    id: '' as string,
    title: '' as string,
    isShow: true as boolean,
    isExternal: false as boolean,
    linkOrApi: '' as string,
    sort: 0 as number,
    imgUrl: '' as string,
  }) as any;

  // 上传
  const fileList = ref([]);
  const imageUrl = ref<string>('');
  const { uploadUrl } = useGlobSetting();

  // 弹窗
  const [registerModal, { closeModal }] = useModalInner((data: any) => {
    modaltitle.value = data.title;
    modalData.value = data.data;
    if (modalData.value.imgUrl) {
      imageUrl.value = 'http://192.168.10.102:9023' + '/' + data.data.imgUrl;
    } else {
      imageUrl.value = '';
    }
  });

  // 上传文件接口
  const handleCustomRequest = (file) => {
    fileList.value = [];
    const formData = new FormData();
    formData.append('files', file.file);
    uploadFile(formData)
      .then((res: any) => {
        modalData.value.imgUrl = res[0].filePath;
        imageUrl.value = 'http://192.168.10.102:9023' + '/' + res[0].filePath;
      })
      .catch((err) => {
        file.onError(err);
      });
  };
  // 提交
  const modalSubmit = () => {
    formRef.value
      .validate()
      .then(() => {
        emit('submit', modalData.value);
      })
      .catch((error) => {
        console.log('error', error);
      });
  };
</script>
