<template>
  <div class="add-banner-visible">
    <el-dialog
      :title="bannerVisibleText"
      :visible.sync="addBannerVisible"
      width="600px"
      v-dialogDrag
      :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="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="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>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="addBannerHandler">发 布</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { AddTypes } from "./bannerData";
import { raiInterface } from "@/api/api.js";
export default {
  name: "",
  props: {
    addBannerVisible: {
      type: Boolean,
      default: false,
    },
    editBannerList: {
      type: Object,
    },
    bannerVisibleText: {
      type: String,
      required: true,
      default: "",
    },
  },
  watch: {
    bannerVisibleText: {
      handler(val) {
        val === "编辑" && this.getDetail();
      },
    },
  },
  data() {
    return {
      addBannerForm: {
        type: 1,
        mainTitle: "",
        twoTitle: "",
        link: "",
        imgUrl: "",
        imgId: "",
      },
      rules: {
        type: [{ required: true, message: "请选择报告类型", trigger: "change" }],
        mainTitle: [{ required: true, message: "请输入标题内容", trigger: "blur" }],
        link: [{ required: true, message: "请输入链接", trigger: "blur" }],
        imgUrl: [{ required: true, message: "请选择背景图", trigger: "change" }],
      },
      selectImgVisible: false,
    };
  },
  computed: {
    addTypes() {
      return AddTypes;
    },
    labelName() {
      let type = this.addBannerForm.type;
      let obj = {
        name: type == 1 || type == 2 ? "报告链接" : type == 3 ? "视频" : type == 4 ? "音频" : "活动链接",
        placeholder:
          type == 1 || type == 2
            ? "请输入报告链接（网页版详情页地址）"
            : type == 3 || type == 4
            ? "请输入网页版详情页地址"
            : "请输入活动链接（网页版详情页地址）",
      };
      return obj;
    },
  },
  methods: {
    // 获取详情数据
    async getDetail() {
      const res = await raiInterface.getBannerDetail({
        BannerId: this.editBannerList.BannerId,
      });
      if (res.Ret === 200) {
        let { BannerType, ImgId, IndexImg, Link, Title, Subtitle } = res.Data.Detail;
        this.addBannerForm = {
          type: BannerType,
          mainTitle: Title,
          twoTitle: Subtitle,
          link: Link,
          imgUrl: IndexImg,
          imgId: ImgId,
        };
      }
    },
    // 添加图片
    handleshowChooseImgPop() {
      this.$emit("showImgPop");
    },
    // 弹框关闭事件
    handleClose() {
      this.$refs["form"].resetFields();
      this.addBannerForm = {
        type: 1,
        mainTitle: "",
        twoTitle: "",
        link: "",
        imgUrl: "",
        imgId: "",
      };
      this.$emit("update:addBannerVisible", false);
      this.$emit("update:bannerVisibleText", "");
    },
    // banner弹框的确认事件
    addBannerHandler() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          let params = {
            BannerId: this.bannerVisibleText === "编辑" ? this.editBannerList.BannerId : 0,
            BannerType: this.addBannerForm.type,
            Title: this.addBannerForm.mainTitle,
            Subtitle: this.addBannerForm.twoTitle,
            Link: this.addBannerForm.link,
            IndexImg: this.addBannerForm.imgUrl,
            ImgId: this.addBannerForm.imgId,
            ListType: this.editBannerList.ListType || this.editBannerList.name,
          };
          const res = await raiInterface.bannerPreserveAndPublish(params);
          if (res.Ret === 200) {
            this.$message.success("发布成功");
            this.$emit("preserveAndPublish", params);
            this.handleClose();
          }
        }
      });
    },
    // 预览图片
    handlePreviewImg() {
      let obj = {
        mainTitle: this.addBannerForm.mainTitle,
        twoTitle: this.addBannerForm.twoTitle,
      };
      this.$emit("previewImg", this.addBannerForm.imgId, obj);
    },
    // 跳转产品内测页面
    addHaveReportRouter() {
      let { href } = this.$router.resolve({ path: "addHaveReport" });
      window.open(href, "_blank");
    },
  },
};
</script>
<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>
