<template>
  <div class="container-interest">
    <el-card>
      <el-table :data="dataList" style="width: 100%; margin-top: 20px" border>
        <el-table-column width="" prop="CompanyName" align="center" label="客户名称"> </el-table-column>
        <el-table-column width="100" prop="SellerName" align="center" label="所属销售"> </el-table-column>
        <el-table-column min-width="100" prop="RealName" align="center" label="姓名"> </el-table-column>
        <el-table-column prop="ResearchTheme" align="center" label="调研主题">
          <template slot-scope="{ row }">
            <span class="editsty" @click="themeDetails(row.ActivityId)">{{ row.ResearchTheme }}</span>
          </template>
        </el-table-column>
        <el-table-column width="80" prop="ChartPermissionName" align="center" label="行业"> </el-table-column>
        <el-table-column prop="Label" align="center" label="标签"> </el-table-column>
        <el-table-column width="180" prop="PublishDate" align="center" label="发布时间"> </el-table-column>
        <el-table-column width="180" prop="CreateTime" align="center" label="反馈时间"> </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-col :span="24" class="toolbar">
        <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleCurrentChange" />
      </el-col>
    </el-card>
    <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>预期时间： {{ activityDetail.ActivityTimeText }}</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>
              <span v-if="activityDetail.Scale.includes('3')"> 100亿以上</span>
              <span v-if="activityDetail.Scale.includes('2')"> 150~100亿</span>
            </div>
          </div>
        </div>
        <el-image style="width: 0px; height: 0px" :src="activityDetail.TripImgLink" id="TripImgLink" :preview-src-list="previewList"></el-image>
        <div class="arrange" @click.stop="imgLink">
          查看行程安排
          <i class="el-icon-d-arrow-right"></i>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

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

export default {
  name: "",
  components: { mPage },
  props: {},
  data() {
    return {
      dataList: [],
      page_no: 1,
      total: "",
      pageSize: 10,
      previewList: [],
      activityDetail: {},
      dialogVisibleActivity: false,
      dialogTitle: "",
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getList();
  },
  methods: {
    //获取数据
    async getList() {
      const res = await raiSpecial.getSpecialSpecialList({
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
      });
      if (res.Ret === 200) {
        this.dataList = res.Data.List;
        this.total = res.Data.Paging.Totals;
      }
    },
    //分页
    handleCurrentChange(page) {
      this.page_no = page;
      this.getList();
    },
    //获取调研主题详情
    async themeDetails(id) {
      const res = await raiSpecial.specialDetail({ ActivityId: id });
      if (res.Ret === 200) {
        this.previewList = [];
        this.activityDetail = res.Data;
        this.dialogVisibleActivity = true;
        this.dialogTitle = "活动详情";
        this.previewList.push(this.activityDetail.TripImgLink);
      }
    },
    //预览图片
    imgLink() {
      $("#TripImgLink").click();
    },
    //弹框的关闭
    handleCloseSubject() {
      this.dialogVisibleActivity = false;
    },
  },
};
</script>
<style scoped lang="scss">
.container-interest {
  .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;
      }
    }
  }
}
</style>
