<template>
  <div
    class="insurance-binding-code-container"
    :class="picaWechat == 'wechat' && 'mt20'"
  >
    <page-model
      v-if="picaWechat != 'wechat'"
      ref="PageModel"
      :header-info="headerInfo"
    />
    <div class="code-container">
      <div class="code-content">
        <div class="code-input-item-l detection-container">
          <div class="input-title">
            检测服务
          </div>
          <div class="input-content">
            <div
              type="text"
              class="code"
            >
              {{ insuranceInfo.detectionName || '' }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="code-container">
      <div
        class="code-content"
        :class="{'bar-code-content' : errorMessage != ''}"
      >
        <div class="code-input-item-l">
          <div class="input-title">
            条形码
          </div>
          <div class="input-content-group">
            <div class="input-content">
              <van-field
                v-model="barCode"
                type="text"
                placeholder-style="font-size: 12px;color: #999999;"
                placeholder="请输入条形码"
              />
              <div class="code-input-item-r">
                <div
                  v-if="barCode"
                  class="clear-img-container"
                  @click="clearCode"
                >
                  <img
                    class="clear-img"
                    src="https://files.yunqueyi.com/icon/2022/clear.png"
                  >
                </div>
                <div
                  v-if="picaWechat == 'wechat'"
                  class="scan-qr-img-container-code"
                  @click="scanCode()"
                >
                  <img
                    class="scan-qr-img"
                    src="https://files.yunqueyi.com/image/png/common/20221128114549858.png"
                  >
                  <span>扫码识别</span>
                </div>
              </div>
            </div>
            <div
              v-if="errorMessage != ''"
              class="input-error-message"
            >
              {{ errorMessage || '' }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      v-if="insuranceInfo.detectionKind == 0"
      class="notification"
    >
      <div class="sign-detection">
        <img
          v-if="isCheck"
          class="check-area"
          src="https://files.yunqueyi.com/h5/detection/is-check.png"
          @click="setSignDetection()"
        >
        <img
          v-else
          class="check-area"
          src="https://files.yunqueyi.com/h5/detection/check.png"
          @click="setSignDetection()"
        >
        <span class="notification-text1">我已阅读并同意</span>
        <span
          class="notification-text2"
          @click="goProtocol"
        >
          《{{ protocolName }}》</span>
      </div>
    </div>
    <div class="submit-button-top">
      <div
        class="submit-button"
        :class="barCode.length > 0 ? 'submit-button-active' : ''"
        @click="toggleBindingInfo"
      >
        提交
      </div>
    </div>
    <div class="appoint-detail-tel">
      客服电话：<a
        style="font-weight:600"
        href="tel:400-006-5252"
      >400-006-5252</a>
      <div class="serve-time">
        周一至周五8:00-18:00 <span /> 双休日9:00-18:00
      </div>
    </div>

    <van-popup
      v-model="showProtocol"
      position="bottom"
      :style="{ height: '80%' }"
      :transition-appear="true"
      @click="showProtocol = false"
    >
      <div class="protocol-content">
        <div class="block70">
          知情同意书
        </div>
        <div
          class="protocol-text"
          v-html="agreeText"
        />
        <van-button
          class="btn"
          @click="subProtocol"
        >
          知情并提交
        </van-button>
      </div>
    </van-popup>
    <van-dialog
      v-model="showBindingInfo"
      confirm-button-color="#00BDA5"
      cancel-button-color="#00BDA5"
      show-cancel-button="true"
      confirm-button-text="确认提交"
      cancel-button-text="返回修改"
      @confirm="bindingCode"
    >
      <div class="binding-code-showInfo">
        <div class="title">
          确认提交
        </div>
        <div class="code">
          <div class="name">
            条形码
          </div>
          <div class="code-info">
            {{ barCode }}
          </div>
        </div>
        <div class="user">
          <div class="name">
            检测项目
          </div>
          <div class="user-info check-name">
            {{ recordInfo.checkName }}
          </div>
        </div>
        <div class="user">
          <div class="name">
            受检人
          </div>
          <div class="user-info">
            <span class="space max">  {{ recordInfo.name }}</span>
            <span class="space">
              {{ recordInfo.sex }}
            </span>
            <span class="space">
              {{ recordInfo.date }}
            </span>
          </div>
        </div>
        <div class="tips">
          <van-icon
            name="warning-o"
            class="tips-icon"
            color="#FF720C"
            size="14"
          />
          <span>请确认信息是否正确，若出现问题，将无法正常出报告</span>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { signDetection, getProtocolContent, getProtocolName, sampleCodeValidate, detectionRecordInfo, bindingSampleCode, bindingQuickSampleCode} from '@/api/detection.js';
import {getDetectionName} from '@/api/appoint';
export default {
  data() {
    return {
      picaWechat:window._picaWechat,
      headerInfo: {
        title: '绑定条码',
        isBlack: true,
        backMethod: 'web',
        style: 'backgroundColor:#ffffff;zIndex:100;paddingTop:8px;',
        background: '',
      },
      showBindingInfo: false,
      isCheck: false,
      barCode: '',
      protocolName: '',
      prototypeId: '',
      prototypeLogId: '',
      goodsId: '',
      status: '',
      errorMessage: '',
      detectionRecordId: '',
      showProtocol: false,
      agreeText: '',
      recordInfo: {
        name: '',
        sex: '',
        date: '',
        checkName: '',
        projectId: '',
        patientId:'',
        hospitalId: ''
      },
      insuranceInfo: {},
      pprotocolType: '',
      yunOrderNo: ''
    };
  },
  computed: {
    ...mapGetters(['orderInfo']),
  },
  created() {
    const { pprotocolType, detectionRecordId, yunOrderNo } = this.$route.query;
    if(detectionRecordId && yunOrderNo) {
      this.pprotocolType = pprotocolType || '';
      this.detectionRecordId = detectionRecordId;
      this.yunOrderNo = yunOrderNo;

      this.getDetectionName(yunOrderNo);
    }else {
      this.$toast('传递有误:', pprotocolType, detectionRecordId, yunOrderNo);
    }
    if(pprotocolType) {
      this.getProtocolName();
    }else{
      this.isCheck = true;
    }
    this.$sendBuriedData({
      action: 'ACTION_WEB_AFTER',
      component_tag: '7802846#0#0#绑定条码',
      web_data:{yunOrderNo: yunOrderNo},
    });
  },
  methods: {
    clearCode() {
      this.barCode = '';
    },
    scanCode() {
      const that = this;
      const p = {
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ['barCode'], // 可以指定扫二维码还是一维码，默认二者都有
        success: function (res) {
          console.log('---res', res);
        }
      };
      this.$rocNative && this.$rocNative.scanQRCode(p, (res) => {
        if(res.resultStr) {
          const s = String(res.resultStr).split(',');
          that.barCode = s[1];
        }
      });
    },
    toggleBindingInfo() {
      this.$sendBuriedData({
        action: 'ACTION_WEB_CLICK',
        component_tag: '7802846#0#0#绑定按钮',
        web_data:{yunOrderNo: this.yunOrderNo},
      });
      if(!this.isCheck && this.pprotocolType) {
        this.goProtocol();
      }else{
        if(this.isCheck && this.barCode) {
          const o = {
            projectId: this.recordInfo.projectId,
            sampleCode: String(this.barCode).toUpperCase(),
            hospitalId:this.recordInfo.hospitalId
          };
          this.$loading.show();
          sampleCodeValidate(o).then(res => {
            const {code, message} = res;
            if (code !== '000000') {
              this.errorMessage = message;
            }else {
              this.errorMessage = '';
              this.showBindingInfo = true;
            }
          }).finally(() => {
            this.$loading.hide();
          });
        }else{
          this.$toast('请输入条形码');
          return false;
        }
      }
    },
    setSignDetection() {
      // const {beneficiaryPatientId } = this.orderInfo;
      const obj = {
        protocolType: this.pprotocolType,
        patientId: this.recordInfo.patientId
      };
      signDetection(obj).then(res => {
          if (res.code !== '000000') {
            return this.$toast(res.message);
          }
          this.prototypeLogId = res.data;
        this.isCheck = !this.isCheck;
      });
    },
    getDetectionName(yunOrderNo) {
      getDetectionName(yunOrderNo).then(res => {
        console.log('res', res);
        if (res.code === '000000' && res.data) {
          this.insuranceInfo = res.data[0];
          this.$store.dispatch('home/setInsuranceInfo', res.data[0]);
          this.getRecordInfo();
        }

      });
    },
    goProtocol() {
      const obj = {
        id: this.pprotocolType,
      };
      getProtocolContent(obj).then(res => {
        if (res.code !== '000000') {
          return this.$toast(res.message);
        }
        this.agreeText = res.data;
        this.showProtocol = true;
      });
    },
    getProtocolName() {
      const d = {
        id: this.pprotocolType
      };
      getProtocolName(d).then( res => {
        if (res.code !== '000000') {
          return this.$toast(res.message);
        }
        console.log('--res', res.data);
        this.protocolName = res.data;
      });
    },
    subProtocol() {
      // const {beneficiaryPatientId } = this.orderInfo;
      const obj = {
        protocolType: this.pprotocolType,
        patientId: this.recordInfo.patientId
      };
      signDetection(obj).then(res => {
        if (res.code !== '000000') {
          return this.$toast(res.message);
        }
        this.prototypeLogId = res.data;
        this.isCheck = true;
        this.showProtocol = false;
        this.toggleBindingInfo();
      });
    },
    getRecordInfo() {
      const o = {
        detectionRecordId: this.detectionRecordId,
        detectionKind: this.insuranceInfo.detectionKind
      };
      console.log('----detectionRecordInfo', o);
      detectionRecordInfo(o).then(res => {
        console.log('---res--', res);
        if (res.code === '000000') {
          this.recordInfo.name = res.data.patientName;
          this.recordInfo.sex = res.data.sex === 1 ? '男' : '女';
          this.recordInfo.date = res.data.birthday;
          this.recordInfo.checkName = res.data.checkName;
          this.recordInfo.projectId = res.data.projectId;
          this.recordInfo.patientId = res.data.patientId;
          this.recordInfo.hospitalId = res.data.hospitalId;
        }
      });
    },
    // 绑定条形码
    bindingCode() {
      const obj = {
        barCode: String(this.barCode).toUpperCase(),
        id: this.detectionRecordId,
        prototypeId: this.pprotocolType,
        prototypeLogId: this.prototypeLogId,
      };
      this.$loading.show();
      console.log('--obj--', obj);
      if(this.insuranceInfo.detectionKind == 1) {
        this.quickBindingCode(obj);
      }
      if(this.insuranceInfo.detectionKind == 0) {
        this.earlyBindingCode(obj);
      }
    },
    // 绑定条形码
    quickBindingCode(obj) {
      const o = {...obj, userId:this.recordInfo.patientId, detectionKind: 1};
      bindingQuickSampleCode(o).then(res => {
        if (res.code !== '000000') {
          return this.$toast(res.message);
        } else {
          const { projectEquityNo } = this.insuranceInfo;
          if(projectEquityNo == 'SZ202305031000597601') {
            this.$router.push(
              {
                path:  '/insuranceDetectionDetailDemo',
                query: {
                  yunOrderNo: this.yunOrderNo,
                  detectionRecordId: this.detectionRecordId
                },
              }
            );
          }else {
            this.$router.push(
              {
                path:  '/insuranceBindCodeSuccess',
                query: {
                  yunOrderNo: this.yunOrderNo,
                  detectionRecordId: this.detectionRecordId
                },
              }
            );
          }
          this.$loading.hide();
          this.$toast('提交成功');
        }
      });
    },
    earlyBindingCode(obj) {
      const o = {...obj, detectionKind: 0};
      bindingSampleCode(o).then(res => {
        if (res.code !== '000000') {
          return this.$toast(res.message);
        } else {
          this.$router.push(
            {
              path:  '/insuranceBindCodeSuccess',
              query: {
                yunOrderNo: this.yunOrderNo,
                detectionRecordId: this.detectionRecordId
              },
            }
          );
          this.$loading.hide();
          this.$toast('提交成功');
        }
      });
    },
  }
};

</script>

<style lang="scss" scoped>
.insurance-binding-code-container{
  width: 100%;
  background-color: #F5F6F8;
  height: 100vh;
  .code-container{
    padding: 0 12px;
    position: relative;
    z-index: 10;
    margin-top: 10px;
    .code-content{
      background: #FFFFFF;
      border-radius: 11px;
      height: 90px;
      display: flex;
      justify-content: center;
      align-items: center;
      &.bar-code-content {
        height: 130px;
        .input-error-message{
          font-size: 12px;
          font-weight: 400;
          color: #FF4B33;
        }
      }
      .code-input-item{
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 6px;
      }
      .code-input-item{
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 6px;
      }
      .code-input-item-l{
        display: flex;
        flex-flow: column;
        width: 100%;
        height: 100%;
        padding: 16px;
        box-sizing: border-box;
        justify-content: space-between;
        &.detection-container {
          .scan-qr-img-container{
            border-radius: 16px;
            border: 1px solid #C0C0C0;
            padding: 0 12px;
          }
          .code {
            font-size: 14px;
            font-weight: 400;
            color: #666666;
          }
        }
        .input-title{
          font-size: 16px;
          color: #212121;
          margin-right: 13px;
          font-weight: 500;
          width: 75px;
          flex-shrink: 0;
        }
        .input-content-group{
          margin-top: 5px;
          display: flex;
          flex-flow: column;
          height: 100%;
          justify-content: space-around;
        }
        .input-content {
          display: flex;
          flex-flow: row;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;
          /deep/.van-cell {
            padding: 0;
            height: 31px;
            line-height: 31px;
            &::after{
              border: none;
            }
          }
        }
        .code{
          font-weight: 600;
          color: #212121;
          font-size: 18px;
          width: 80%!important;
        }
      }
      .code-input-item-r{
        display: flex;
        align-items: center;
        justify-content: center;
        .clear-img-container{
          .clear-img{
            width: 16px;
            height: 16px;
            margin-right: 10px;
          }
        }
        .scan-qr-img-container{
          display: flex;
          align-items: center;
        }
        .scan-qr-img-container-code{
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          width: 91px;
          height: 28px;
          background: #00BDA5;
          border-radius: 20px;
          font-size: 14px;
          color: #ffffff;
          .scan-qr-img{
            height: 12px;
            width: 12px;

          }
        }

      }
    }

  }
  .submit-button-top{
    display: flex;
    width: 100%;
    font-size: 16px;
    font-weight: 700;
    margin-top: 90px;
    .submit-button{
      width: 90%;
      height: 40px;
      background: #D9D9D9;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      color: #FFFFFF;
      margin: 0 auto;
    }
    .submit-button-active{
      background: #00BDA5;
    }
  }
  .notification{
    margin: 0 auto;
    width: 100%;
    margin-top: 60px;
    position: absolute;
    font-size: 16px;
    font-weight: 700;
    .sign-detection{
      margin:0 auto;
      height: auto;
      padding:0 10px;
      line-height:20px;
      align-items: center;
      display:flex;
      justify-content: center;
      text-align:center;
      .check-area{
        margin-top: 0;
      }
    }
    .notification-text1{
      width:auto;
      color: #999999;
      font-size: 14px;
    }
    .notification-text2{
      height: auto;
      line-height:20px;
      color: #189787;
      font-size: 14px;
    }
    img{
      display:inline-block;
      height: 15px;
      width: 15px;
      padding-right:7px;
      margin-top:7px;
    }
  }
  .protocol-content{
    width: 100%;
    background-color: #ffffff;
    color: #676869;
    font-size: 14px;
    padding: 15px;
    box-sizing: border-box;
    .block70{
      height: 40px;
      line-height: 30px;
      text-align: center;
      font-size: 18px;
      color: #212121;
      font-weight: 600;
    }
    .protocol-text{
      height: 400PX;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      line-height: 2;
      &>p{
        -webkit-overflow-scrolling: touch;
        min-height: 1000px;
      }
    }
    .btn{
      border: none;
      background-color: #00BDA5;
      color: #ffffff;
      width: 300px;
      height: 40px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      margin: 0 auto;
      position: absolute;
      bottom: 10px;
      font-size: 16px;
      left: calc(50% - 150px);
    }
  }
  .binding-code-showInfo{
    padding: 12px 12px 0 12px;
    .title{
      height: 27px;
      font-size: 18px;
      line-height: 27px;
      text-align: center;
      font-weight: 700;
      color: #000000;
      margin-bottom: 12px;
    }
    .code,.user{
      display: flex;
      .name{
        font-weight: 400;
        color: #999999;
        margin-right: 9px;
      }
    }
    .code{
      padding-left: 12px;
      height: 50px;
      background: #F7FFFE;
      border-radius: 6px;
      border: 1px solid #ADE9E1;
      .name{
        min-width: 60px;
        height: 50px;
        line-height: 50px;
        font-size: 15px;
      }

      .code-info{
        flex: 1;
        height: 50px;
        font-size: 18px;
        font-weight: 600;
        line-height: 50px;
        letter-spacing: 3px;
        color: #00BDA5;
      }
    }
    .user{
      margin-top: 22px;
      .name{
        width: 60px;
        font-size: 15px;
        white-space: nowrap;
      }
      .user-info{
        font-weight: 700;
        font-size: 15px;
        white-space: nowrap;
      }
      .space{
        margin-right: 10px;
        max-width: 100px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .max{
        max-width: 70px;
      }
    }
    .tips{
      position: relative;
      margin-top: 24px;
      margin-bottom: 24px;
      padding-left: 18px;
      font-size: 13px;
      font-weight: 400;
      color: #FF720C;
      line-height: 18px;
      .tips-icon{
        position: absolute;
        left: 0px;
        top:2px;
      }
    }
    .check-name{
      max-width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .tel-wrap{
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    width: 100%;
    text-align: center;
    margin-top: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    .serve-time{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 18px;
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 18px;
      span{
        width: 1px;
        height: 12px;
        margin: 0 12px;
        background: #BBBBBB;
      }
    }
    .l-right{
      color:#00BDA5;
      display: flex;
      align-items: center;
      .fw600{
        font-weight: 600;
      }
    }
    .l-right-img{
      width: 12px;
      height: 12px;
      position: relative;
      //top: 1px;
    }
  }
}
.mt20{padding-top: 20px}
.appoint-detail-tel{
    margin-top: 25px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 22px;
    text-align: center;
    .serve-time{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 18px;
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 18px;
      span{
        width: 1px;
        height: 12px;
        margin: 0 12px;
        background: #BBBBBB;
      }
    }
  }
</style>

