<template>
  <div class="insurance-quickDetection-detail">
    <page-model
      v-if="picaWechat != 'wechat'"
      ref="PageModel"
      :header-info="headerInfo"
    />
    <div class="title" />
    <div class="detail-box">
      <div class="status">
        <img
          v-if="dataDetail.status == 5"
          src="https://files.yunqueyi.com/image/png/common/20220817141150961.png"
          alt="success"
        >
        <img
          v-else
          src="https://files.yunqueyi.com/image/png/common/20220816135250298.png"
          alt="success"
        >
        <div>{{ dataDetail.status | statusFilter }}</div>
      </div>
      <div
        class="content"
      >
        <div class="flow">
          <div class="f-list">
            <div
              v-for="(item, index) in dataList"
              :key="index"
              class="express-step"
              :class="{
                hideCircle: item.completed,
                last: index == dataList.length - 1,
              }"
            >
              <div
                v-if="item.completed"
                class="express-step-icon"
              >
                <img
                  class="step-pg"
                  :src="item.status == 5 ? 'https://files.yunqueyi.com/image/png/common/20220817141140460.png' : 'https://files.yunqueyi.com/image/png/common/2022081612011851.png'"
                >
              </div>
              <div
                v-else
                class="express-step-icon"
              />
              <div
                class="express-step-msg"
              >
                <div class="step-title">
                  <p>
                    {{ item.nodeName }}
                  </p>
                </div>
                <div
                  class="step-time"
                >
                  {{ item.nodeTime ? item.nodeTime : item.completed ? '暂无数据' : '未开始' }}
                </div>
              </div>
            </div>
          </div>
          <p
            v-if="dataDetail.status == 5"
            class="tips"
          >
            温馨提示:可联系医生重新采样
          </p>
        </div>
      </div>
    </div>
    <div class="detail-box pb60">
      <div class="content">
        <div class="info">
          <div class="list">
            <p class="l-left">
              受检人:
            </p>
            <p class="l-right">
              <span>{{ dataDetail.patientName || '--' }}</span><span>{{ dataDetail.sex | sexFilter }}</span><span class="font">{{
                dataDetail.ageMonth
                  ? dataDetail.ageMonth + '月'
                  : dataDetail.patientAge + '岁'
              }}</span>
            </p>
          </div>
          <div class="list">
            <p class="l-left">
              检测项目:
            </p>
            <p class="l-right">
              {{ dataDetail.checkName || '--' }}
            </p>
          </div>
          <div class="list">
            <p class="l-left">
              检测编号:
            </p>
            <p class="l-right">
              {{ dataDetail.recordNo || '--' }}
            </p>
          </div>
          <div class="list">
            <div class="l-left">
              条形码:
            </div>
            <div class="l-right">
              {{ dataDetail.sampleCode || '--' }}
              <div
                class="l-copy"
                @click="copyText(dataDetail.sampleCode)"
              >
                复制
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="[3].includes(dataDetail.status)"
      class="submit-container multi-sub-wrap"
    >
      <div
        v-if="picaWechat == 'wechat'"
        class="submit-button"
      >
        <wx-open-launch-weapp
          style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
          :username="openWebAppConfig.username"
          :path="openWebAppConfig.path"
          :env-version="envVersion"
          :extra-data="openWebAppConfig.extraData"
        >
          <script type="text/wxtag-template">
            <style>.btn {position:absolute; top: 0; color: #ffffff;text-align: center;line-height: 40px; left: 0; width:100%; height: 100%;}</style> <div class="btn">{{ openWebAppBtnName}}</div>
          </script>
        </wx-open-launch-weapp>
      </div>
      <div
        v-else
        class="submit-button"
        @click="getJumpToWebapp"
      >
        {{ openWebAppBtnName }}
      </div>
    </div>
  </div>
</template>
<script>
const { VUE_APP_ENV } = process.env;
import { getQuickDetectionDetailProces, getJumpToWebapp, detectionRecordInfo } from '@/api/detection';
// 0待完善信息、1待采样、2已采样、21已送检、22快递已签收、 25实验室已收样、 27已上机、 3已完成、5样本失效、 6待支付
export default {
  filters: {
    sexFilter(val) {
      const str = val == 2 ? '女' : '男';
      return str;
    },
    statusFilter(type) {
      const obj = {
        0: '待完善信息',
        1: '待采样',
        2: '已领取',
        21: '已送检',
        25: '已接收',
        27: '已上机',
        22: '已签收',
        3: '已完成',
        5: '样本异常',
        6: '待支付',
      };
      return obj[type];
    },
  },
  data() {
    return {
      envVersion: VUE_APP_ENV == 'production' ? 'release' : 'trial',
      picaWechat:window._picaWechat,
      status: '',
      headerInfo: {
        title: '检测详情',
        isBlack: true,
        backMethod: 'web',
        style: 'backgroundColor:#ffffff;zIndex:100;',
        background: '',
      },
      detectionRecordId: '',
      dataDetail: {},
      dataList: [],
      openWebAppConfig:{
        username:'gh_e92f58174364', // 小程序唯一username  1.gh_80d54796f2d5 云鹊助手 2. gh_e92f58174364 云鹊健康
        path:'pagesInsurance/all-entrance/index', // 打开页面
        extraData: JSON.stringify({})
      },
      openWebAppBtnName: '绑定条形码',
      yunOrderNo: '',
      action_code: ''
    };
  },
  created() {
    const {detectionRecordId, yunOrderNo} = this.$route.query;
    this.detectionRecordId = detectionRecordId;
    this.yunOrderNo = yunOrderNo;
    this.init();
  },
  mounted() {
    this.$sendBuriedData({
      action: 'ACTION_WEB_AFTER',
      component_tag: '7802849#0#0#快检成功页面',
      web_data:{yunOrderNo: this.yunOrderNo},
    });
  },
  methods: {
    init() {
      const that = this;
      const ed = {
        channelSource: 'insurance_channel',
        targetPath: 'pagesInsurance/all-entrance/index',
        query: {yunOrderNo: this.yunOrderNo},
      };
      const o = {
        detectionRecordId: this.detectionRecordId,
        detectionKind: 1
      };
      console.log('----detectionRecordInfo', o);
      detectionRecordInfo(o).then((res) => {
        if (res.code === '000000') {
          this.dataDetail = res.data;
          this.getDetailProces();
          that.openWebAppConfig.extraData = JSON.stringify(ed);
          that.openWebAppConfig.path = `pagesInsurance/all-entrance/index?yunOrderNo=${this.yunOrderNo}&channelSource=channelSource`;
        } else {
          that.$toast(res.message);
        }
      });
    },
    copyText(val) {
      const input = document.createElement('input');
      input.value = val;
      document.body.appendChild(input);
      input.select();
      input.setSelectionRange(0, input.value.length);
      document.execCommand('Copy');
      document.body.removeChild(input);
      this.$toast('已复制');
      console.log('已复制的内容：', val);
    },
    // 检测详情
    getDetailProces() {
      getQuickDetectionDetailProces({id:this.detectionRecordId, channel: 4} ).then((res) => {
        if (res.code === '000000') {
          this.dataList = res.data || [];
        } else {
          this.$toast(res.message);
        }
      });
    },
    getJumpToWebapp() {
      if(this.picaWechat == 'wechat') {
        return false;
      }
      const query = `channelSource=insurance_channel&yunOrderNo=${this.yunOrderNo}&action_code=${this.action_code}`;
      const p = {params:{path:'pagesInsurance/all-entrance/index', query:query}, type: 2};
      getJumpToWebapp(p).then(res => {
        console.log('--res', res);
        if(res.data) {
          window.location.href = res.data;
        }else{
          this.$toast(res.message);
        }

      });
    },
    mapStatus(inquiryStatus) {
      console.log('--mapStatus', inquiryStatus);
      const s = String(inquiryStatus);
      let m = '报告解读';
      if(s == '0') {
        m = '报告解读';
      }else if(['4', '6'].includes(s)) {
        m = '查看专家建议';
      }else{
        m = '已预约待咨询';
      }
      console.log('--mapStatus', m);
      return m;
    }
  },
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
