<template>
  <a-form ref="formRef" :model="form" :rules="rules" layout="vertical" class="height100">
    <a-row :gutter="20">
      <a-col :span="24">
        <a-row :gutter="16">
          <a-col :span="19">
            <a-form-item label="标题:" name="slideshowTitle">
              <a-input v-model:value="form.slideshowTitle" allow-clear placeholder="请输入标题" />
            </a-form-item>
            <a-form-item label="类型:" name="slideshowRedirectType">
              <a-radio-group name="slideshowRedirectType" v-model:value="form.slideshowRedirectType">
                <a-radio :value="5">无跳转</a-radio>
                <a-radio :value="10">跳转到新闻</a-radio>
                <a-radio :value="20">跳转到指定URl</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="5" class="pick">
            <a-form-item label="图片:" name="iconList">
              <a-upload
                name="file"
                :multiple="false"
                v-model:file-list="form.iconList"
                :default-file-list="form.iconList"
                :maxCount="1"
                :action="fileUploadUrl"
                list-type="picture-card"
                :headers="headers"
                :before-upload="beforeUpload"
                accept=".jpeg,.jpg,.png,.tif,.jfif,.webp,.pjp,.apng,.pjpeg,.avif,.ico,.tiff,.bmp,.xbm,.jxl,.jpeg,.svgz,.gif,.svg"
                @preview="handlePreviewPhoto"
                @download="downloadPhoto"
                @change="slideshowCoverFileIdChange"
                :showUploadList="{
                  showDownloadIcon: true
                }"
              >
                <plus-outlined style="font-size: 28px; font-weight: 200" v-if="form.iconList.length == 0" />
              </a-upload>
            </a-form-item>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24" v-if="form.slideshowRedirectType == 10">
        <a-form-item label="选择新闻:" name="slideshowNewsId">
          <a-select
            v-model:value="form.slideshowNewsId"
            placeholder="请选择新闻"
            :filter-option="false"
            allowClear
            show-search
            @search="handleSearch"
          >
            <a-select-option :value="item.newsId" v-for="item in newList" :key="item.newsId">{{ item.newsTitle }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="24" v-if="form.slideshowRedirectType == 20">
        <a-form-item label="轮播图外部URL地址:" name="slideshowRedirectUrl">
          <a-input v-model:value="form.slideshowRedirectUrl" allow-clear placeholder="请输入轮播图外部URL地址" />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item label="排序:" name="fldSort">
          <a-input-number
            v-model:value="form.fldSort"
            :min="0"
            style="width: 100%"
            placeholder="请输入排序"
            allow-clear
            autocomplete="off"
          />
        </a-form-item>
      </a-col>
    </a-row>

    <!-- 图标预览弹框 -->
    <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </a-form>
</template>

<script setup name="CarouselForm">
import { debounce } from 'lodash-es';
import { onMounted, reactive, ref } from 'vue';
import { getToken } from '@/utils/token-util';
import { API_BASE_PREFIX } from '@/config/setting';
import { message, Upload } from 'ant-design-vue/es';
import { NewApi } from '../../new/api/NewApi';
import { FileApi, FileUploadUrl as fileUploadUrlPrefix } from '@/views/system/backend/file/api/FileApi';

const props = defineProps({
  // 表单数据
  form: Object,
  designId: String
});

const formRef = ref();

// 上传文件的url
const fileUploadUrl = ref(`${API_BASE_PREFIX}${fileUploadUrlPrefix}?secretFlag=N`);
// 上传文件时候要带header
const headers = ref({
  Authorization: getToken()
});

// 验证规则
const rules = reactive({
  slideshowTitle: [{ required: true, message: '请输入标题', type: 'string', trigger: 'blur' }],
  iconList: [{ required: true, message: '图片不能为空', type: 'array', trigger: 'blur' }],
  slideshowRedirectType: [{ required: true, message: '请选择类型', type: 'number', trigger: 'change' }],
  slideshowNewsId: [{ required: true, message: '请选择新闻', type: 'string', trigger: 'change' }],
  slideshowRedirectUrl: [{ required: true, message: '请输入外部链接URL', type: 'string', trigger: 'blur' }],
  fldSort: [{ required: true, message: '请输入排序', type: 'number', trigger: 'change' }]
});

// 是否展示图片预览
const previewVisible = ref(false);
// 图片地址
const previewImage = ref(null);

const newList = ref([]);

onMounted(() => {
  getNewList();
});

const getNewList = async (searchText = '') => {
  newList.value = await NewApi.getSelect({ designId: props.designId, searchText: searchText });
};

//上传之前的回调
const beforeUpload = file => {
  const isJpgOrPng =
    file.type === 'image/jpeg' ||
    file.type === 'image/jpg' ||
    file.type === 'image/png' ||
    file.type === 'image/tif' ||
    file.type === 'image/jfif' ||
    file.type === 'image/webp' ||
    file.type === 'image/pjp' ||
    file.type === 'image/apng' ||
    file.type === 'image/pjpeg' ||
    file.type === 'image/avif' ||
    file.type === 'image/ico' ||
    file.type === 'image/tiff' ||
    file.type === 'image/bmp' ||
    file.type === 'image/xbm' ||
    file.type === 'image/jxl' ||
    file.type === 'image/svgz' ||
    file.type === 'image/gif' ||
    file.type === 'image/svg';
  if (!isJpgOrPng) {
    message.error('只能上传图片!');
    return Upload.LIST_IGNORE; //阻止列表展现
  }
  const isLt5M = file.size / 1024 / 1024 < 5;
  if (!isLt5M) {
    message.error('图片大小不能超过5MB!');
  }
  return isJpgOrPng && isLt5M;
};

// 点击预览图片
const handlePreviewPhoto = async file => {
  previewImage.value = file.url || file.preview || file.thumbUrl;
  previewVisible.value = true;
};

//下载图片
const downloadPhoto = file => {
  let id = file.response ? file.response.data.fileId : file.uid;
  FileApi.download({ token: getToken(), fileId: id });
};

const slideshowCoverFileIdChange = info => {
  if (info.file.status === 'done') {
    // 设置临时fileList的值
    props.form.iconList = [info.file];
    // 将文件属性名和文件编码存入数组中
    message.success(`${info.file.name} 图片上传成功`);
  } else if (info.file.status === 'error') {
    message.error(`${info.file.name} 图片上传失败`);
  }
};

const handleSearch = debounce(value => {
  getNewList(value);
}, 500);
</script>

<style scoped lang="less">
.file-box {
  position: relative;
}

.file-btn {
  position: absolute;
  top: -35px;
  right: 0;
}

:deep(.ant-upload-list-file-container:first-child) {
  margin-top: -30px !important;
}

.ant-upload-span {
  max-width: calc(100% - 75px);
  display: flex;
  align-items: center;

  .actions-icon {
    font-size: 16px;
    cursor: pointer;
    color: #00000073;
  }
}

.ant-upload-list-item {
  height: 40px !important;
  line-height: 40px;
}

.ant-upload-list-item-name {
  color: #60666b;
  width: auto;
  max-width: calc(100% - 75px) !important;
  font-size: 16px;
  line-height: 40px !important;
}

.ant-upload-list-item-name-size {
  margin-left: 10px;
  font-size: 14px;
  color: #898e91;
}

.ant-upload-list-item-info {
  margin-left: 40px;
}

.ant-upload-text-icon-index {
  margin-right: 5px;
  font-size: 16px;
  color: #898e91;
}

.ant-upload-text-icon-pdf {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ant-upload-list-item-info .ant-upload-text-icon .anticon {
  top: 12px !important;
}
.ant-upload-list-item-card-actions {
  .ant-space {
    line-height: 45px !important;
  }
}

.ant-upload-list-item-card-actions {
  margin-left: 10px;
  width: 65px;
  height: 40px;
  line-height: 40px;
  position: relative;
}
.clear-icon {
  cursor: pointer;
  color: #898e91;

  &:hover {
    color: #60666b;
  }
}
:deep(.ant-upload.ant-upload-select-picture-card) {
  width: 125px;
  height: 125px;
  background-color: #fff;
  border: 1px solid var(--border-color-base);
}
:deep(.ant-upload-list-picture-card-container) {
  width: 125px;
  height: 125px;
}
.pick {
  :deep(.ant-form-item) {
    margin-bottom: 18px;
  }
  :deep(.ant-form-item-has-error) {
    margin-bottom: -6px !important;
  }
}
</style>
