<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="insuranceInfo.positiveReimburse == 0 && insuranceInfo.reimburseMax > 0" class="tips-item">
                <div class="tips-item-dot" />
                检测报告阳性，最高可报销{{ (insuranceInfo.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="https://files.yunqueyi.com/image/png/common/20230504134949399.png"
            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 {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: {},
    };
  },
  computed: {
    ...mapGetters('home', ['insuranceInfo']),
  },
  mounted() {
    const { query } = this.$route;
    this.query = query;
    this.yunOrderNo = query.yunOrderNo;
    this.getDetectionName(query.yunOrderNo);
    this.$sendBuriedData({
      action: 'ACTION_WEB_AFTER',
      component_tag: '7802850#0#0#问卷结果页面',
      web_data:{yunOrderNo: this.yunOrderNo},
    });
  },
  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 dectionData = res.data[0] || {};
          console.log('dectionData.detectionName', this.insuranceInfo, dectionData);
          this.detectionName = dectionData.detectionName;
          this.$store.dispatch('home/setInsuranceInfo', dectionData);
          this.$loading.hide();
        }
      });
    },
    // 去预约
    toAppoint() {
        const { projectEquityNo, externalOrderNo, yunOrderNo } = this.query;
        console.log('this.query', this.query);
        this.$dialog.alert({
          title: '版本提示',
          confirmButtonText: '我知道了',
          message: '当前版本为内部测试版本，正式版本会拉起微信支付并依据支付结果展示。',
          confirmButtonColor:'#00bda5'
        }).then(() => {
          this.$router.push({
            path: '/appoint',
            query: {projectEquityNo, externalOrderNo, yunOrderNo},
          });
        });
    },
  },
};
</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: 260px;
      height: 80px;
      font-size: 21px;
      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>
