<template>
  <div class="container">
    <el-dialog width="1000px" v-dialogDrag :modal-append-to-body="false" center :title="dialogTitle" :visible.sync="dialogVisibleActivity" :before-close="handleCloseSubject">
      <div class="rai-detail-wrap" v-if="dialogTitle == '活动详情'">
        <div class="activity-top">
          {{ activityDetail.ResearchTheme }}
        </div>
        <p>所属行业： {{ activityDetail.ChartPermissionName }}</p>
        <p v-if="tabsActive == 1">预期时间： {{ activityDetail.ActivityTimeText }}</p>
        <p v-else>活动开始时间： {{ activityDetail.ActivityTimeTextByDay }}</p>
        <p>调研形式： {{ activityDetail.SpecialType == 1 ? "线上" : "线下" }} {{ activityDetail.SpecialType == 2 && activityDetail.City ? "(" + activityDetail.City + ")" : "" }}</p>
        <template v-if="!activityDetail.IndustrialName && !activityDetail.IndustrialSubjectName">
          <p>相关主题： {{ activityDetail.Label }}</p>
        </template>
        <template v-else>
          <p>产业名称： {{ activityDetail.IndustrialName }}</p>
          <p>相关公司： {{ activityDetail.IndustrialSubjectName }}</p>
        </template>
        <div class="text-box">
          <div style="flex-shrink: 0">活动可见：</div>
          <div>
            <span>{{ activityDetail.CustomerName }}</span>
            <div v-if="activityDetail.Scale">
              <span v-if="activityDetail.Scale.includes('3')"> 100亿以上</span>
              <span v-if="activityDetail.Scale.includes('2')"> 150~100亿</span>
            </div>
          </div>
        </div>
        <p v-if="activityDetail.Host">主持人： {{ activityDetail.Host }}</p>
        <p v-if="activityDetail.Host">主持人： {{ activityDetail.PersonInCharge }}</p>
        <el-image v-if="tabsActive == 1" style="width: 0px; height: 0px" :src="activityDetail.TripImgLink" id="TripImgLink" :preview-src-list="previewList"></el-image>
        <el-image v-else style="width: 0px; height: 0px" :src="activityDetail.TripImgLinkFix" id="TripImgLink" :preview-src-list="previewList"></el-image>
        <div class="arrange" @click.stop="imgLink">
          查看行程安排
          <i class="el-icon-d-arrow-right"></i>
        </div>
      </div>
      <div v-else>
        <el-table :data="interestData" style="width: 100%; margin: 20px 0" height="400px" border>
          <el-table-column min-width="" prop="RealName" align="center" label="姓名"></el-table-column>
          <el-table-column min-width="" prop="CompanyName" align="center" label="公司名称"></el-table-column>
          <el-table-column min-width="" prop="SellerName" align="center" label="所属销售"></el-table-column>
          <el-table-column min-width="180" prop="CreateTime" align="center" label="反馈时间"></el-table-column>
        </el-table>
        <div class="dialog-footer">
          <a :href="exportInterest" download>
            <el-button type="primary" @click="confirmSubmit">下载名单</el-button>
          </a>
          <el-button style="margin-left: 20px" @click="handleCloseSubject">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { raiInterface, raiSpecial } from "@/api/api.js";

export default {
  name: "",
  components: {},
  props: {
    dialogTitle: {
      type: String,
      required: true,
      default: "",
    },
    dialogVisibleActivity: {
      type: Boolean,
      required: true,
      default: false,
    },
    specialDetailId: {
      type: Number,
      required: true,
      default: "",
    },
    tabsActive: {
      type: Number,
      required: true,
      default: "",
    },
  },
  data() {
    return {
      interestData: [], //感兴趣人数
      exportInterest: "",
      previewList: [],
      activityDetail: {},
    };
  },
  computed: {},
  watch: {
    dialogTitle: {
      handler(newValue) {
        newValue == "活动详情" && this.themeDetails();
        newValue == "感兴趣人数" && this.interestDetails();
      },
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 预览图片
    imgLink() {
      $("#TripImgLink").click();
    },
    handleCloseSubject() {
      this.$parent.dialogTitle = "";
      this.$parent.exportInterest = "";
      this.activityDetail = {};
      this.previewList = [];
      this.$emit("update:dialogVisibleActivity", false);
    },
    //感兴趣人数
    async interestDetails() {
      const res = await raiSpecial.specialInterested({ ActivityId: this.specialDetailId });
      if (res.Ret === 200) {
        this.exportInterest = `${import.meta.env.VITE_APP_API_ROOT}/cygx/special/export?${localStorage.getItem("auth") || ""}&ActivityId=${this.specialDetailId}`;
        this.$nextTick(() => {
          this.interestData = res.Data.List;
        });
      }
    },
    //获取调研主题详情
    async themeDetails() {
      const res = await raiSpecial.specialDetail({ ActivityId: this.specialDetailId });
      if (res.Ret === 200) {
        this.activityDetail = res.Data;
        this.previewList.push(this.tabsActive == 1 ? this.activityDetail.TripImgLink : this.activityDetail.TripImgLinkFix);
      }
    },
  },
};
</script>
<style scoped lang="scss">
.rai-detail-wrap {
  .activity-top {
    width: 100%;
    height: 55px;
    background: #f4f4f4;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    line-height: 55px;
    padding-left: 23px;
    margin-bottom: 30px;
  }
  p {
    margin-bottom: 20px;
    padding-left: 10px;
  }
  .arrange {
    margin: 50px auto 20px;
    cursor: pointer;
    text-align: center;
    color: #3385ff;
  }
  .text-box {
    display: flex;
    padding-left: 10px;
    span {
      display: block;
      margin-bottom: 10px;
    }
  }
}
.dialog-footer {
  text-align: center;
  margin-bottom: 20px;
}
</style>
