<template>
  <div class="container-generaiton">
    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center :visible.sync="generaitondialogVisib" customClass="generaiton-applydialog" :before-close="confirmPerson">
      <div slot="title" style="display: flex; align-items: center">
        <img :src="$icons.delay" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
        <span style="font-size: 16px">{{ generaitonType == "报名" ? "代问详情" : "留言详情" }}</span>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%" border max-height="260px">
          <el-table-column align="center" prop="RealName" label="姓名"> </el-table-column>
          <el-table-column align="center" prop="CompanyName" label="公司名称"> </el-table-column>
          <el-table-column align="center" prop="Content" label="问题" width="330"> </el-table-column>
          <el-table-column align="center" prop="CreateTime" label="提交时间" width="180"> </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <a :href="exportUser" download>
          <el-button type="primary">
            {{ generaitonType == "报名" ? "下载问题列表" : "下载留言列表" }}
          </el-button>
        </a>
        <el-button @click="confirmPerson" style="margin-left: 20px">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { raiInterface, raiVideoApi } from "@/api/api.js";
export default {
  name: "",
  components: {},
  props: {
    generaitonId: {
      type: Number,
      required: true,
    },
    generaitondialogVisib: {
      type: Boolean,
      required: true,
    },
    generaitonType: {
      type: String,
      required: true,
    },
    tabActiveRoadshow: {
      type: Number,
    },
  },
  data() {
    return {
      tableData: [],
    };
  },
  computed: {
    exportUser() {
      let url = "";
      if (this.generaitonType == "报告") {
        url = "/cygx/reportArticle/askListExport?ReportId=";
      } else if (this.generaitonType == "报名") {
        url = "/cygx/activitySignup/askListExport?ActivityId=";
      } else if (this.generaitonType == "微路演") {
        this.tabActiveRoadshow == 4
          ? (url = "/cygx/microRoadshow/commentListExport/video?VideoId=")
          : this.tabActiveRoadshow == 3
          ? (url = "/cygx/askserie_video/collection_list?IsExport=true&AskserieVideoId=")
          : (url = "/cygx/activity_voice_and_video/commentList?IsExport=true&ActivityId=");
      } else {
        url = "/cygx/summaryManage/commentListExport?ArticleId=";
      }
      return process.env.API_ROOT + url + this.generaitonId + "&" + localStorage.getItem("auth") || "";
    },
  },
  watch: {
    generaitondialogVisib() {
      if (this.generaitondialogVisib) {
        switch (this.generaitonType) {
          case "报告":
            this.getReportList();
            break;
          case "报名":
            this.getlist();
            break;
          case "微路演":
            this.getRoadshowList();
            break;
          default:
            this.getSummaryList();
        }
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    confirmPerson() {
      this.tableData = [];
      this.$emit("update:generaitondialogVisib", false);
    },
    //报名 代问
    getlist() {
      raiInterface
        .activitySignupAskList({
          ActivityId: this.generaitonId,
        })
        .then((res) => {
          if (res.Ret == 200) {
            this.tableData = res.Data.List;
          }
        });
    },
    //报告 代问
    getReportList() {
      raiInterface
        .reportArticleAskList({
          ReportId: this.generaitonId,
        })
        .then((res) => {
          if (res.Ret == 200) {
            this.tableData = res.Data.List;
          }
        });
    },
    //纪要 代问
    getSummaryList() {
      raiInterface
        .summaryManageAskList({
          ArticleId: this.generaitonId,
        })
        .then((res) => {
          if (res.Ret == 200) {
            this.tableData = res.Data.List;
          }
        });
    },
    //微路演
    async getRoadshowList() {
      const res =
        this.tabActiveRoadshow == 4
          ? await raiVideoApi.getMicroRoadshowVideo({
              VideoId: this.generaitonId,
            })
          : this.tabActiveRoadshow == 3
          ? await raiVideoApi.askserieVideoCollectionList({
              AskserieVideoId: this.generaitonId,
            })
          : await raiVideoApi.activityVoiceAndVideoCommentList({
              ActivityId: this.generaitonId,
            });

      if (res.Ret == 200) {
        this.tableData = res.Data.List;
      }
    },
  },
};
</script>
<style lang="less">
.container-generaiton {
  .generaiton-applydialog {
    width: 800px;
  }
  .el-dialog__footer {
    margin-top: 30px;
  }
}
</style>
