<template>
  <div class="insuranceQuestionResult-box">
    <page-model
      v-if="picaWechat != 'wechat'"
      ref="PageModel"
      :header-info="headerInfo"
    />
    <div class="insuranceQuestionResult">
      <div class="insuranceQuestionResult-info">
        <template v-if="!needDetect">
          <div class="info-top">
            <div class="info-top-title">
              防癌专家提醒您尽快{{ insuranceInfo.detectionKind == 0 ? '进行' : '领取' }}
            </div>
            <div class="info-top-name">
              {{ detectionName }}
            </div>
            <div
              v-if="insuranceInfo && insuranceInfo.detectionKind == 0"
              class="info-top-tips"
            >
              <div class="tips-item">
                <div class="tips-item-dot" />
                DNA甲基化检测技术，对比传统肿瘤标志物检查,早期癌变检出率高5-10倍
              </div>
              <div class="tips-item">
                <div class="tips-item-dot" />
                早期检出、早期干预、实现可逆
              </div>
              <div v-if="detectionDetail.positiveReimburse == 0 && detectionDetail.reimburseMax > 0" class="tips-item">
                <div class="tips-item-dot" />
                检测报告阳性，最高可报销{{ (detectionDetail.reimburseMax / 100).toFixed(0) }}元复查费用
              </div>
            </div>
            <div
              v-if="insuranceInfo && insuranceInfo.detectionKind == 1"
              class="info-top-tips"
            >
              <div class="tips-item">
                <div class="tips-item-dot" />
                居家快速自测、方便卫生、轻松操作
              </div>
              <div class="tips-item">
                <div class="tips-item-dot" />
                检测快速，30分钟内即可获得结果
              </div>
            </div>
          </div>
          <img
            :src=" insuranceInfo && insuranceInfo.detectionKind == 0 ? 'https://files.yunqueyi.com/image/gif/common/20230228173135233.gif' : 'https://files.yunqueyi.com/image/gif/common/20230315102649177.gif'"
            class="info-btn"
            @click="toAppoint"
          >

          <div class="info-tips">
            {{ insuranceInfo && insuranceInfo.detectionKind == 0 ? '点击上方按钮预约，并前往预约的医疗机构采样' : '点击上方按钮预约，并前往预约的医疗机构领取产品' }}
          </div>
        </template>
        <template v-else>
          <div class="info-noNeed">
            <div class="info-noNeed-title">
              <div class="text-left" />
              参照本次评估结果
              <div class="text-right" />
            </div>
            <div class="info-noNeed-result">
              您可暂不进行防癌早筛检测
            </div>
            <div class="info-noNeed-tips">
              <div class="tips-item">
                <div class="tips-item-dot" />
                坚持良好生活方式；
              </div>
              <div class="tips-item">
                <div class="tips-item-dot" />
                定期接受体检，关注个人健康
              </div>
            </div>
          </div>
        </template>
      </div>
      <div
        v-if="detectionName && detectionName.length > 0"
        class="tips-fixed"
      >
        注：请填写人根据问卷评估结果自主选择后续检测
      </div>
    </div>
  </div>
</template>

<script>
import { getButtonStatus } from '@/api/question';
import {getDetectionName} from '@/api/appoint';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      picaWechat:window._picaWechat,
      headerInfo: {
        title: '检测服务',
        isBlack: true,
        backMethod: 'web',
        style: 'backgroundColor:#ffffff;zIndex:100;',
        background: '',
      },
      needDetect: false,
      detectionName:'',
      detailInfo: {},
      isLoading: true,
      projectEquityNo: '',
      orderNo: '',
      yunOrderNo:'',
      status:null,
      query: {},
      buttonStatus: false,
      buttonText:'',
      detectionDetail:{}
    };
  },
  computed: {
    ...mapGetters('home', ['insuranceInfo']),
  },
  mounted() {
    const { query } = this.$route;
    this.$loading.show();
    this.query = query;
    this.needDetect = !(query.needDetect == '1');
    console.log('query', this.needDetect);
    this.yunOrderNo = query.yunOrderNo;
    this.getButtonStatus(query.yunOrderNo);
    this.getDetectionName(query.yunOrderNo);
    this.$sendBuriedData({
      action: 'ACTION_WEB_AFTER',
      component_tag: '7802850#0#0#问卷结果页面',
      web_data:{yunOrderNo: this.yunOrderNo},
    });
    this.$loading.hide();
  },
  methods: {
    statusMap(status) {
      const m = {
        0: '免费预约检测',
        4: '免费预约检测',
        5: '免费预约检测',
        1: '查看详情',
        2: '查看详情',
        3: '查看详情',
      };
      return m[status];
    },
     // 目前是配置一个检测信息，可能会拓展，所以返回的是一个list  ces
     getDetectionName(yunOrderNo) {
      getDetectionName(yunOrderNo).then(res => {
        if (res.code === '000000' && res.data) {
          const d = res.data[0] || {};
          this.detectionDetail = d || {};
          console.log('dectionData.detectionName', this.insuranceInfo, d);
          this.detectionName = d.detectionName;
          this.$store.dispatch('home/setInsuranceInfo', d);
          this.$loading.hide();
        }
      });
    },
    // 去预约
    toAppoint() {
      this.$sendBuriedData({
        action: 'ACTION_WEB_CLICK',
        component_tag: '7802850#0#0',
        web_data:{yunOrderNo: this.yunOrderNo},
      });
      if (this.buttonStatus) {
        const { projectEquityNo, externalOrderNo, yunOrderNo } = this.query;
        console.log('this.query', this.query);
        this.$router.push({
          path: '/appoint',
          query: {projectEquityNo, externalOrderNo, yunOrderNo},
        });
      }else{
        this.getButtonStatus(this.yunOrderNo);
      }
    },
    // 获取按钮状态
    getButtonStatus(yunOrderNo) {
      getButtonStatus(yunOrderNo).then(res => {
        console.log(res);
        const {buttonStatus} = res.data;
        this.buttonStatus = buttonStatus || false;
        this.buttonText = res.data.statusDesc;
        this.$loading.hide();
        (this.detectionName && !this.buttonStatus) && this.$dialog.alert({
          message: this.buttonText,
          confirmButtonColor:'#00bda5'
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.insuranceQuestionResult-box{
  min-height: 100vh;
background: #F3FCFF;
  padding-bottom: 50px;
}
.insuranceQuestionResult {
  width: 100%;
  box-sizing: border-box;
  color: #676869;
  overflow: auto;
  text-align: center;
  background: url('https://files.yunqueyi.com/image/png/common/20230228101352132.png') no-repeat left top;
  background-size: 100% 209px ;

}
.insuranceQuestionResult-info{
  width: 348px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  box-shadow: 0px 9px 6px 0px #EBF9F8;
  border-radius: 20px;
  border: 1px solid rgba(0,189,165,0.33);
  margin: 168px auto 54px;
  .info-top{
    width: 308px;
    height: auto;
    padding-bottom: 50px;
    background: #FFFBF9;
    border-radius: 11px;
    margin: 10px auto 20px;
    overflow: hidden;
    .info-top-title{
      margin-top: 25px;
      height: 21px;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #EF8337;
      line-height: 21px;

    }
    .info-top-name{
      margin-top: 8px;
      height: 22px;
      font-size: 20px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #EF8337;
      line-height: 22px;
    }
    .info-top-tips{
      margin-top: 25px;
      .tips-item{
        position: relative;
        padding-left: 25px;
        padding-right: 14px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #212121;
        line-height: 20px;
        text-align: left;
      }

      .tips-item-dot{
        position: absolute;
        width: 3px;
        height: 3px;
        background: #EF8337;
        opacity: 0.8;
        left: 15px;
        top: 9px;
        border-radius: 50%;
      }
    }

  }
  .info-btn{
      position: relative;
      width: 375px;
      height: 105px;
      margin: 0 auto;
      font-size: 21px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #FFFFFF;
      left: 50%;
      transform: translateX(-50%);
      line-height: 64px;
      text-align: center;
      margin-bottom: 20px;
  }
  .info-tips{
    height: 18px;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 18px;
    margin-bottom: 38px;
  }
}
.tips{
  height: 21px;
  font-size: 13px;
  font-family: PingFangSC-Light, PingFang SC;
  font-weight: 300;
  color: #999999;
  line-height: 21px;
}
.info-noNeed{
  width: 307px;
  height: 154px;
  background: #F9FAFB;
  border-radius: 11px;
  margin: 22px auto;
  overflow: hidden;
  .info-noNeed-title{
    height: 21px;
    font-size: 15px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #00BDA5;
    line-height: 21px;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
        position: relative;
        .text-left{
          width: 20px;
          height: 1px;
          background: linear-gradient(270deg, #EEEEEE 0%, #D8D8D8 100%);
          border-radius: 1px;
          margin-right: 6px;
        }
        .text-right{
          width: 20px;
          height: 1px;
          background: linear-gradient(270deg, #EEEEEE 0%, #D8D8D8 100%);
          border-radius: 1px;
          margin-left: 6px;
        }
  }
  .info-noNeed-result{
    margin-top: 4px;
    height: 20px;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #00BDA5;
    line-height: 20px;
    margin-bottom: 25px;
  }
  .info-noNeed-tips{

    margin-bottom: 25px;
    .tips-item{
      position: relative;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 20px;
      text-align: left;
      padding-left:38px ;
      .tips-item-dot{
        position: absolute;
        width: 3px;
        height: 3px;
        background: #179082;
        opacity: 0.8;
        left: 27px;
        top: 9px;
        border-radius: 50%;
      }
    }

  }
}
.tips-fixed{
  margin-top: 53px;
  width: 100%;
  bottom: 70px;
  height: 21px;
  font-size: 13px;
  font-weight: 300;
  color: #999999;
  line-height: 21px;
}
</style>
