<script setup>
import { ref, watch, computed } from "vue";
import { AddTypes } from "./bannerData";
import { raiInterface } from "@/api/api.js";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();

const props = defineProps({
  addBannerVisible: {
    type: Boolean,
    default: false,
  },
  editBannerList: {
    type: Object,
  },
  bannerVisibleText: {
    type: String,
    required: true,
    default: "",
  },
});

const addBannerForm = ref({
  type: 1,
  mainTitle: "",
  twoTitle: "",
  link: "",
  imgUrl: "",
  imgId: "",
});


watch(
  () => props.bannerVisibleText,
  (val) => {
    val === "编辑" && getDetail();
  }
);

const addTypes = computed(() => {
  return AddTypes;
});

const labelName = computed(() => {
  let type = addBannerForm.value.type;
  let obj = {
    name: type == 1 || type == 2 ? "报告链接" : type == 3 ? "视频" : type == 4 ? "音频" : "活动链接",
    placeholder: type == 1 || type == 2 ? "请输入报告链接（网页版详情页地址）" : type == 3 || type == 4 ? "请输入网页版详情页地址" : "请输入活动链接（网页版详情页地址）",
  };
  return obj;
});

// 获取详情数据
async function getDetail() {
  const res = await raiInterface.getBannerDetail({
    BannerId: props.editBannerList.BannerId,
  });
  if (res.Ret === 200) {
    let { BannerType, ImgId, IndexImg, Link, Title, Subtitle } = res.Data.Detail;
    addBannerForm.value = {
      type: BannerType,
      mainTitle: Title,
      twoTitle: Subtitle,
      link: Link,
      imgUrl: IndexImg,
      imgId: ImgId,
    };
  }
}
const emit = defineEmits(["showImgPop", "addBannerVisible", "bannerVisibleText"]);
// 添加图片
function handleshowChooseImgPop() {
  emit("showImgPop");
}
const form = ref(null);
// 弹框关闭事件
function handleClose() {
  form.value.resetFields();
  addBannerForm.value = {
    type: 1,
    mainTitle: "",
    twoTitle: "",
    link: "",
    imgUrl: "",
    imgId: "",
  };
  emit("update:addBannerVisible", false);
  emit("update:bannerVisibleText", "");
}

const rules = ref({
  type: [{ required: true, message: "请选择报告类型", trigger: "change" }],
  mainTitle: [{ required: true, message: "请输入标题内容", trigger: "blur" }],
  link: [{ required: true, message: "请输入链接", trigger: "blur" }],
  imgUrl: [{ required: true, message: "请选择背景图", trigger: "change" }],
});
// banner弹框的确认事件
function addBannerHandler() {
  form.value.validate(async (valid, fields) => {
    if (valid) {
      let params = {
        BannerId: props.bannerVisibleText === "编辑" ? props.editBannerList.BannerId : 0,
        BannerType: addBannerForm.value.type,
        Title: addBannerForm.value.mainTitle,
        Subtitle: addBannerForm.value.twoTitle,
        Link: addBannerForm.value.link,
        IndexImg: addBannerForm.value.imgUrl,
        ImgId: addBannerForm.value.imgId,
        ListType: props.editBannerList.ListType || props.editBannerList.name,
      };
      const res = await raiInterface.bannerPreserveAndPublish(params);
      if (res.Ret === 200) {
        this.$message.success("发布成功");
        emit("preserveAndPublish", params);
        handleClose();
      }
    } else {
      console.log("error submit!", fields);
    }
  });
}
// 预览图片
function handlePreviewImg() {
  let obj = {
    mainTitle: addBannerForm.value.mainTitle,
    twoTitle: addBannerForm.value.twoTitle,
  };
  emit("previewImg", addBannerForm.value.imgId, obj);
}
// 跳转产品内测页面
function addHaveReportRouter() {
  let { href } = router.resolve({ path: "addHaveReport" });
  window.open(href, "_blank");
}
</script>

<template>
  <div class="add-banner-visible">
    <el-dialog :title="props.bannerVisibleText" v-model="props.addBannerVisible" width="600px" draggable :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleClose">
      <el-form :model="addBannerForm" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="添加类型:" prop="type">
          <el-select :disabled="props.bannerVisibleText == '编辑'" v-model="addBannerForm.type" placeholder="请选择报告类型">
            <el-option v-for="item in addTypes" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主标题:" prop="mainTitle">
          <el-input type="textarea" :rows="3" placeholder="请输入标题内容" v-model="addBannerForm.mainTitle"> </el-input>
        </el-form-item>
        <el-form-item label="副标题:">
          <el-input type="textarea" :rows="3" placeholder="请输入标题内容" v-model="addBannerForm.twoTitle"> </el-input>
        </el-form-item>
        <el-form-item :label="`${labelName.name}:`" prop="link">
          <div style="display: flex; align-items: end">
            <el-input :disabled="props.bannerVisibleText == '编辑'" type="textarea" :rows="3" :placeholder="labelName.placeholder" v-model="addBannerForm.link"> </el-input>
            <el-button v-if="addBannerForm.type === 2" type="primary" style="margin-left: 20px" @click="addHaveReportRouter">新建报告</el-button>
          </div>
        </el-form-item>
        <el-form-item label="背景图:" prop="imgUrl">
          <el-image style="width: 120px; height: 120px" :src="require('@/assets/img/icons/add-img.png')" v-if="!addBannerForm.imgUrl" @click="handleshowChooseImgPop" />
          <div v-else style="display: flex; align-items: end">
            <div class="pre-img-box">
              <el-image style="width: 226px; height: 120px" :src="addBannerForm.imgUrl"> </el-image>
              <span class="del" @click="addBannerForm.imgUrl = ''">删除</span>
            </div>
            <div class="preview-button" @click="handlePreviewImg">预览</div>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="addBannerHandler(form)">发 布</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.add-banner-visible {
  .pre-img-box {
    position: relative;
    width: 226px;
    height: 120px;
    .del {
      display: none;
      color: #fff;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      line-height: 24px;
      background-color: rgba($color: #000000, $alpha: 0.8);
      cursor: pointer;
    }
    &:hover {
      .del {
        display: block;
      }
    }
  }
  .preview-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 40px;
    background: #409eff;
    border-radius: 4px;
    margin-left: 20px;
    color: #fff;
    cursor: pointer;
  }
}
</style>
