<template>
  <div class="c_box">
    <div class="choice_box">
      <div class="title" style="display: flex;">
        <span style="min-width: fit-content;">{{ tindex + 1 + '、' }}</span>
        <span>{{ checkJson.title }}</span>
      </div>
      <div
        class="detail"
        v-if="checkJson.detail"
        v-html="checkJson.detail"
        style="color: #00000099;margin-top: 5px;"
      ></div>

      <div
        class="detail"
        v-if="checkJson.answer2 && typeof checkJson.answer2 == 'string'"
        v-html="checkJson.answer2"
        style="color: #000000;margin-top: 5px;"
      ></div>

      <div class="choices">
        <el-button type="primary" size="small" @click="sweepBtn">扫一扫</el-button>
      </div>
    </div>
    <!-- <sweepPage ref="sweepPageRef" @success="sweepSuccess"  @error="sweepError"/> -->
    <!-- <sweepPage_html5_qrcode ref="sweepPage_html5_qrcodeRef" @success="sweepSuccess"  @error="sweepError"/> -->
    <qrScanner ref="qrScannerRef" @success="sweepSuccess" />
  </div>
</template>

<script>
// import sweepPage from '@/components/sweepPage.vue';
// import sweepPage_html5_qrcode from '@/components/sweepPage_html5_qrcode.vue';
import qrScanner from '@/components/qrScanner.vue'
export default {
  props: {
    tindex: {
      type: Number
    },
    cJson: {
      type: Object
    },
    checktype: {
      type: Number,
      default: 1
    },
    see: {
      type: Boolean,
      default: false
    }
  },
  components: {
    // sweepPage
    // sweepPage_html5_qrcode
    qrScanner
  },
  data() {
    return {
      option: {
        1: { name: '附件' }
      },
      userid: this.$route.query.userid,
      checkJson: {
        title: '',
        detail: ''
      }
    }
  },
  watch: {
    checkJson: {
      handler(newValue) {
        this.$emit('update:cJson', newValue)
      },
      deep: true
    }
  },
  methods: {
    depthCopy(s) {
      return JSON.parse(JSON.stringify(s))
    },
    sweepBtn() {
      this.$refs.qrScannerRef.open()
    },
    sweepSuccess(result) {
      this.checkJson.answer2 = result
      this.$refs.qrScannerRef.close()
      this.$toast(result)
      this.$forceUpdate()
    },
    sweepError(error) {
      this.$toast.fail(error)
      // if (error.name === 'NotAllowedError') {
      //     this.$toast.fail('您需要授予相机访问权限')
      //   } else if (error.name === 'NotFoundError') {
      //     this.$toast.fail('这个设备上没有摄像头')
      //   } else if (error.name === 'NotSupportedError') {
      //     this.$toast.fail('所需的安全上下文(HTTPS、本地主机)')
      //   } else if (error.name === 'NotReadableError') {
      //     this.$toast.fail('相机被占用')
      //   } else if (error.name === 'OverconstrainedError') {
      //     this.$toast.fail('安装摄像头不合适')
      //   } else if (error.name === 'StreamApiNotSupportedError') {
      //     this.$toast.fail('此浏览器不支持流API')
      //   }else{
      //     this.$toast.fail(error.name)
      //   }
    }
  },
  mounted() {
    this.checkJson = this.cJson ? this.depthCopy(this.cJson) : undefined
  }
}
</script>

<style scoped>
.c_box {
  width: 100%;
  position: relative;
}

/* .mask {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
} */

.choice_box {
  white-space: pre-line;
}

.choice_box > .title {
  font-weight: bold;
  width: 100%;
  word-break: break-all;
}

.choice_box > .choices {
  margin-top: 10px;
}

.choices > .page {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.p_page {
  margin: 0 10px;
}

.course {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.course + .course {
  margin-top: 10px;
}

.course > .banner {
  min-width: 100px;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #3896fc;
  box-sizing: border-box;
  padding: 5px;
  margin-right: 15px;
}
.course > .banner > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.course > .content {
  max-width: calc(100% - 100px - 15px);
}
.course > .content > .c_c {
  display: flex;
}
.course > .content > .c_c + .c_c {
  margin-top: 5px;
}
.course > .content > .c_c span:nth-child(1) {
  min-width: fit-content;
}
.course > .content > .c_c span:nth-child(2) {
  word-break: break-word;
}
</style>
