<script setup>
import { ref, computed, watch } from "vue";
import { raiInterface, raiVideoApi } from "@/api/api.js";

const props = defineProps({
  generaitonId: {
    type: Number,
    required: true,
  },
  generaitondialogVisib: {
    type: Boolean,
    required: true,
  },
  generaitonType: {
    type: String,
    required: true,
  },
  tabActiveRoadshow: {
    type: Number,
  },
});

const tableData = ref([]);

const exportUser = computed(() => {
  let url = "";
  if (props.generaitonType == "报告") {
    url = "/cygx/reportArticle/askListExport?ReportId=";
  } else if (props.generaitonType == "报名") {
    url = "/cygx/activitySignup/askListExport?ActivityId=";
  } else if (props.generaitonType == "微路演") {
    props.tabActiveRoadshow == 4
      ? (url = "/cygx/microRoadshow/commentListExport/video?VideoId=")
      : props.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 import.meta.env.VITE_APP_API_ROOT + url + props.generaitonId + "&" + localStorage.getItem("auth") || "";
});

watch(
  () => props.generaitondialogVisib,
  (newVal) => {
    if (newVal) {
      switch (props.generaitonType) {
        case "报告":
          getReportList();
          break;
        case "报名":
          getlist();
          break;
        case "微路演":
          getRoadshowList();
          break;
        default:
          getSummaryList();
      }
    }
  }
);

const emit = defineEmits();
function confirmPerson() {
  tableData.value = [];
  emit("update:generaitondialogVisib", false);
}
//报名 代问
function getlist() {
  raiInterface
    .activitySignupAskList({
      ActivityId: props.generaitonId,
    })
    .then((res) => {
      if (res.Ret == 200) {
        tableData.value = res.Data.List;
      }
    });
}
//报告 代问
function getReportList() {
  raiInterface
    .reportArticleAskList({
      ReportId: props.generaitonId,
    })
    .then((res) => {
      if (res.Ret == 200) {
        tableData.value = res.Data.List;
      }
    });
}
//纪要 代问
function getSummaryList() {
  raiInterface
    .summaryManageAskList({
      ArticleId: props.generaitonId,
    })
    .then((res) => {
      if (res.Ret == 200) {
        tableData.value = res.Data.List;
      }
    });
}
//微路演
async function getRoadshowList() {
  const res =
    props.tabActiveRoadshow == 4
      ? await raiVideoApi.getMicroRoadshowVideo({
          VideoId: props.generaitonId,
        })
      : props.tabActiveRoadshow == 3
      ? await raiVideoApi.askserieVideoCollectionList({
          AskserieVideoId: props.generaitonId,
        })
      : await raiVideoApi.activityVoiceAndVideoCommentList({
          ActivityId: props.generaitonId,
        });

  if (res.Ret == 200) {
    tableData.value = res.Data.List;
  }
}
</script>

<template>
  <div class="container-generaiton">
    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center v-model="props.generaitondialogVisib" customClass="generaiton-applydialog" :before-close="confirmPerson">
      <template #header>
        <div 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">{{ props.generaitonType == "报名" ? "代问详情" : "留言详情" }}</span>
        </div>
      </template>
      <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>
      <template #footer>
        <span class="dialog-footer">
          <a :href="exportUser" download>
            <el-button type="primary">
              {{ props.generaitonType == "报名" ? "下载问题列表" : "下载留言列表" }}
            </el-button>
          </a>
          <el-button @click="confirmPerson" style="margin-left: 20px">取 消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.container-generaiton {
  .generaiton-applydialog {
    width: 800px;
  }
  .el-dialog__footer {
    margin-top: 30px;
  }
}
</style>
