<template>
  <div class="insurance-quickDetection-detail-demo">
    <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 class="choose-result">
        <div class="result-title">
          请选择您的检测结果
        </div>
        <div class="result-tips">
          <div class="tips-left">
            根据结果示例图判断您的检测结果
          </div>
          <div
            class="tips-right"
            @click="showSample(1)"
          >
            结果示例图
          </div>
        </div>
        <div class="result-radio">
          <van-radio-group
            v-model="result"
            direction="horizontal"
          >
            <van-radio name="1">
              <div class="radio-name">
                阳性
              </div>
            </van-radio>
            <van-radio name="2">
              <div class="radio-name">
                阴性
              </div>
            </van-radio>
          </van-radio-group>
        </div>
        <div
          v-if="result=='1'"
          class="result-list-img"
        >
          <div
            v-for="(item,index) in images"
            :key="item"
            class="list-img-item"
            @click="changeImg(index)"
          >
            <div
              class="close-btn"
              @click="remove(item)"
            />
            <van-image

              class="img-item"
              :src="item"
            />
          </div>
        </div>
        <div
          v-if="result=='1'"
          class="result-list-tips"
        >
          <div class="list-tips-item">
            1.请将带有阳性检测结果的试剂盒和包装盒上的条码一起拍照上传，确保两个元素在同一张照片里.
          </div>
          <div
            class="list-tips-item"
            style="margin-bottom:0"
          >
            2.请保留好此阳性试剂盒，领取甲基化检测时需要回收
          </div>
        </div>
      </div>
    </div>
    <div
      class="submit-container"
    >
      <div
        class="submit-button"
        @click="getJumpToWebapp"
      >
        {{ openWebAppBtnName }}
      </div>
    </div>

    <van-image-preview
      v-model="showImg"
      :images="imageslist"
      @change="changePreview"
    >
      <template v-slot:index>
        第{{ index }}页
      </template>
    </van-image-preview>
  </div>
</template>
<script>
import { getQuickDetectionDetailProces, detectionRecordInfo } from '@/api/detection';
import { saveOrder } from '@/api/appoint';
import {createOrder} from '@/api/question';
// 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 {
      showImg: false,
      images: ['https://files.yunqueyi.com/image/png/common/20230506114106786.png'],
      resultImages: ['https://files.yunqueyi.com/image/png/common/20230506114106786.png'],
        sampleImages: [
        'https://files.yunqueyi.com/image/png/common/20230506114106786.png'],
      index: 1,
      result:null,
      picaWechat:window._picaWechat,
      status: '',
      headerInfo: {
        title: '检测详情',
        isBlack: true,
        backMethod: 'web',
        style: 'backgroundColor:#ffffff;zIndex:100;',
        background: '',
      },
      detectionRecordId: '',
      dataDetail: {},
      dataList: [],
      openWebAppBtnName: '提交检测结果',
      yunOrderNo: '',
      imageslist: [],
      projectEquityNo:''
    };
  },
  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 o = {
        detectionRecordId: this.detectionRecordId,
        detectionKind: 1
      };
      console.log('----detectionRecordInfo', o);
      detectionRecordInfo(o).then((res) => {
        if (res.code === '000000') {
          this.dataDetail = res.data;
          this.getDetailProces();
        } 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.result == 2) {
        this.$toast('参照选择的结果，您可暂不进行防癌早筛检测');
        return false;
      }
      this.saveOrder();
    },
    saveOrder() {
      const { yunOrderNo} = this.$route.query;
      const data = {};
      if (this.result) {
        data.yunOrderNo = yunOrderNo;
        data.resultFlag = this.result;
      } else {
        this.$toast('请选择结果');
      }
      saveOrder(data).then(res => {
        console.log(res);
        this.projectEquityNo = res.data.projectEquityNo;
        const item = JSON.parse(localStorage.getItem('chooseInfo'));
        console.log('item', item);
        const data = {
            hospitalId: 139136,
            idType:1,
            hospitalName:'人民医院和平社区健康服务中心',
          yunOrderNoOne:yunOrderNo,
            idCard: item.id_number,
            externalOrderNo: 'SZ' + Math.floor(new Date().getTime() / 1000),
            projectEquityNo:this.projectEquityNo,
            mobilePhone: item.mobile,
            patientName: item.name,
          };
        createOrder(data).then(res => {
          console.log(res);
          if (res.code === '000000' && res.data.questionnaireUrl) {
            window.location.href = res.data.questionnaireUrl;
          }
        });
      });
    },
    showSample(index) {
      this.showImg = true;
      this.index = 1;
      if (index === 1) {
        this.imageslist = this.resultImages;
      } else {
        this.imageslist = this.sampleImages;
      }

    },
    changePreview(index) {
      this.index = index;
    },
    changeImg(index) {
      console.log(index);
      this.imageslist = this.images;
      this.showImg = true;
      this.index = index + 1;
    },
    remove(item) {
      this.images = this.images.filter(ele => ele == item);
    },
    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>
