<template>
  <el-dropdown style="margin: 0 10px" trigger="click" @command="beforeReadCard">
    <el-button type="primary">读卡&nbsp
      <el-icon>
        <ArrowDown/>
      </el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="sicard">
          <el-icon>
            <CreditCard/>
          </el-icon>
          社保卡
        </el-dropdown-item>
        <el-dropdown-item command="qrcode">
          <el-icon>
            <Grid/>
          </el-icon>
          电子凭证
        </el-dropdown-item>
        <el-dropdown-item command="idcard">
          <el-icon>
            <User/>
          </el-icon>
          身份证
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  <span class="readcard">
    <el-dialog v-model="showSelectBiztype" title="请选择读卡业务" width="300px">
      <el-radio-group v-model="currentBiztype">
        <el-radio label="01101">门诊挂号</el-radio>
        <el-radio label="01201">门诊问诊</el-radio>
        <div style="height: 16px"></div>
        <el-radio label="01203">门诊检查</el-radio>
        <el-radio label="01204">门诊治疗</el-radio>
        <div style="height: 16px"></div>
        <el-radio label="01301">门诊结算</el-radio>
      </el-radio-group>
      <template #footer>
        <el-button type="primary" @click="handleConfirmBiztype">确定</el-button>
      </template>
    </el-dialog>
  </span>
</template>

<script>
import {ElMessage, ElMessageBox} from 'element-plus'
import axios from 'axios'
import {startLoading, endLoading} from '@/utils/loading'

export default {
  props: {
    patNo: {
      type: String,
      default: null,
    },
    biztype: {
      type: String,
      default: null,
    },
  },
  emits: ['success'],
  setup(props, ctx) {
    const showSelectBiztype = ref(false)
    const currentCardtype = ref(null)
    const currentBiztype = ref(null)
    const beforeReadCard = (cardtype) => {
      if (!props.patNo) {
        ElMessage({
          message: '请先选择患者',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
        return
      }
      if (props.biztype) {
        executeReadCard(cardtype)
      } else {
        currentCardtype.value = cardtype
        showSelectBiztype.value = true
      }
    }

    const handleConfirmBiztype = () => {
      if (!currentBiztype.value) {
        ElMessage({
          message: '请选择读卡业务！',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
        return
      }
      showSelectBiztype.value = false
      executeReadCard(currentCardtype.value)
    }

    const executeReadCard = (cardtype) => {
      const nowbiztype = props.biztype || currentBiztype.value
      if (cardtype !== 'qrcode') {
        startLoading()
      }
      const param = `${cardtype}_${nowbiztype}`
      axios('http://localhost:8321/readcard/entry?param=' + param)
          .then((res) => {
            endLoading()
            if (res.data.code === 200) {
              const result = {
                mdtrtCertType: cardtype,
                readCardResult: cardtype === 'qrcode' ? JSON.stringify(JSON.parse(res.data.data).data) : res.data.data,
                readCardBizType: nowbiztype,
              }
              ctx.emit('success', result)
              ElMessageBox.alert(res.data.message, '提示', {
                type: 'success',
                showCancelButton: false,
              }).then(() => {
              })
            } else {
              ElMessageBox.alert(res.data.message.trim(), '错误', {
                type: 'error',
                showCancelButton: false,
              }).then(() => {
              })
            }
          })
          .catch((e) => {
            endLoading()
            ElMessageBox.alert(e, '错误', {
              type: 'error',
              showCancelButton: false,
            }).then(() => {
            })
          })
    }

    return {
      currentBiztype,
      showSelectBiztype,
      beforeReadCard,
      handleConfirmBiztype,
    }
  },
}
</script>
