<script setup>
import { reactive, onMounted, toRefs, ref, onUnmounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { RaiApi } from "@/api/htgj/api.js";
import { Icon, Dialog, Toast } from "vant";
import dlg from "../cygx/dlg.vue";
import store from "@/store";
import topbar from "./topbar.vue";
const router = useRouter();
const route = useRoute();
const state = reactive({
  reportInfo: {},
});
const rerportId = ref(null);
const haveData = ref(1);
const showTips = ref(false);

//点击回到搜索页面
const btnSearch = () => {
  router.push("/htgj/search");
};

const timeState = reactive({
  setIntervalTiem: null,
  readTiem: 0,
});

/* 获取报告详情 */
const getReport = (id) => {
  RaiApi.reportDtl({
    ArticleId: id,
  }).then((res) => {
    if (res.Ret === 200) {
      haveData.value = res.Data.HasPermission;
      if (res.Data.HasPermission === 1) {
        //有访问权限
        state.reportInfo = res.Data.Detail;
        timeState.readTiem = 0;
        timeState.setIntervalTiem = setInterval(() => {
          timeState.readTiem++;
        }, 1000);
      }
    } else {
      haveData.value = 0;
      Dialog.alert({
        title: "提示",
        message: res.Msg,
        confirmButtonColor: "#3385FF",
      }).then((res) => {
        router.back();
      });
    }
  });
};

/* 访谈申请 */
const applyHandle = () => {
  !state.reportInfo.IsInterviewApply &&
    Dialog.confirm({
      title: "",
      message: "专家访谈申请会提交给您的对口销售，销售会线下与您取得联系，确定申请吗？",
      confirmButtonColor: "#fff",
      cancelButtonColor: "#fff",
      theme: "round-button",
    }).then(() => {
      interviewApi();
    });
  // 取消申请访谈 区分状态 '待邀请','待访谈','已完成','已取消'
  if (state.reportInfo.IsInterviewApply) {
    Dialog.confirm({
      title: "",
      message:
        state.reportInfo.InterviewApplyStatus == "待访谈"
          ? "当前无法取消访谈，若有疑问，请联系对口销售"
          : state.reportInfo.InterviewApplyStatus == "待邀请"
          ? "您要取消此次访谈申请吗？"
          : "该访谈已完成",
      confirmButtonColor: "#fff",
      cancelButtonColor: "#fff",
      theme: "round-button",
    }).then(() => {
      state.reportInfo.InterviewApplyStatus == "待邀请" ? interviewApi() : "";
    });
  }
};

/* 访谈接口 */
const interviewApi = () => {
  RaiApi.applyRpt({
    ArticleId: Number(rerportId.value),
  }).then((res) => {
    if (res.Ret === 200) {
      state.reportInfo.IsInterviewApply = !state.reportInfo.IsInterviewApply;
      state.reportInfo.InterviewApplyStatus = state.reportInfo.IsInterviewApply ? "待邀请" : "";
      Toast(res.Msg);
    }
  });
};

onMounted(() => {
  if (route.query.id) {
    rerportId.value = route.query.id;
    getReport(rerportId.value);
  }
});
onUnmounted(() => {
  clearInterval(timeState.setIntervalTiem);
  if (!rerportId.value || haveData.value !== 1) return;
  RaiApi.addStopTime({
    ArticleId: Number(rerportId.value),
    StopTime: timeState.readTiem,
    OutType: 1,
    Source: "PC",
  }).then((res) => {});
});
const { reportInfo } = toRefs(state);
</script>

<template>
  <div>
    <div class="container-cygx-strategy" @copy="copyMonitor" v-if="haveData == 1" :class="reportInfo.IsResearch ? 'no-cv' : ''">
      <topbar class="top-box-bar" showText="弘则研究" />
      <div class="search">
        <div class="search-box" @click="btnSearch">
          <Icon name="search" color="#8D8D8D" />
          <span>搜索您想要的纪要</span>
        </div>
      </div>
      <iframe class="details-iframe" :src="reportInfo.HttpUrl" frameborder="0" />
      <dlg :showTips="showTips" :reportInfo="reportInfo" @hideDlg="showTips = false" />
    </div>
    <div v-else-if="haveData !== 0" class="nodata">
      <img src="@/assets/cygx/noauth.png" mode="" class="nodata_ico" />
      <div v-if="haveData == 2">
        <p>您暂无权限查看报告</p>
        <p>若想查看可联系海通销售开通试用权限</p>
      </div>
      <div v-else>
        <p>您的试用权限已到期</p>
        <p>若想继续试用，请联系海通销售</p>
      </div>
    </div>
    <topbar v-if="haveData != 1" class="top-haveData-bar" showText="弘则研究" />
  </div>
</template>

<style lang="scss">
.container-cygx-strategy {
  padding: 54px 34px 34px 34px;
  position: relative;
  z-index: 5;
  .top-box-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #fff;
    margin: 0;
    padding-top: 20px;
    z-index: 10;
    img {
      margin-top: 10px;
    }
  }
  .search {
    width: 100%;
    padding: 20px 20px;
    line-height: 70px;
    position: fixed;
    top: 60px;
    left: 0;
    background: #fff;
    z-index: 9;
    .search-box {
      display: flex;
      align-items: center;
      padding-left: 20px;
      width: 100%;
      height: 70px;
      border-radius: 35px;
      background: #f6f6f6;
      color: #8d8d8d;
      font-size: 24px;
    }
  }
  .details-iframe {
    width: 100%;
    height: calc(100vh - 100px);
    padding-bottom: 50px;
  }
  .fixed_cont {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #ddd;
    padding-bottom: calc(5px + constant(safe-area-inset-bottom));
    padding-bottom: calc(5px + env(safe-area-inset-bottom));
    background-color: #fff;
    z-index: 9;
    box-sizing: border-box;
    .handle-item {
      padding-top: 14px;
      text-align: center;
      line-height: 33px;
      font-size: 20px;
      color: #888888;
      width: 130px;
      img {
        width: 44px;
        height: 44px;
        padding: 0;
        margin: 0;
      }
      div {
        padding: 0;
        margin: 0;
      }
    }
  }
}
.nodata {
  width: 100%;
  margin: 30% auto;
  text-align: center;
  img {
    width: 50%;
    margin-bottom: 30px;
  }
  p {
    margin-top: 20px;
  }
}
.no-cv {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.top-box-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: #fff;
  margin-top: 15px;
  z-index: 10;
}
.van-dialog--round-button .van-dialog__footer {
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
  padding: 0 !important;
  .van-button--warning {
    color: #333 !important;
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
  }
  .van-button--danger {
    color: #3385ff !important;
  }
  .van-button--warning,
  .van-button--danger {
    height: 80px !important;
    border-radius: 0 !important;
  }
  .van-goods-action-button--first {
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
  }
}
.van-icon-search {
  font-size: 28px;
  margin-right: 10px;
}
.top-haveData-bar {
  position: absolute !important;
  width: 100%;
  margin-top: 20px;
  top: 0;
  left: 0;
  z-index: 9;
}
</style>
