<template>
    <el-dialog title="选择卡类型" :visible.sync="dialogFormVisible" width="35%" :before-close="handleClose">
        <img :src="logo" style="display: block; " alt="logo" />
        <el-form :model="yibaoinfo" :inline="true" @submit.native.prevent>
            <div style="text-align: center">
                <el-form-item label="卡类型">
                    <el-radio-group v-model="yibaoinfo.cardtype">
                        <el-radio v-if="insurance!='LONGDISTANCE'" label="02">身份证</el-radio>
                        <el-radio label="03">社会保障卡</el-radio>
                        <!-- <el-radio label="06">电子社会保障卡</el-radio> -->
                        <!-- <el-radio label="00">就诊卡</el-radio> -->
                        <el-radio v-if="insurance!='LONGDISTANCE'" label="01">电子医保凭证</el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>
            <div>
                <div style="text-align: center">
                    <el-input
                        v-if="yibaoinfo.cardtype == '01'"
                        v-model="adminpingzhengma"
                        type="text"
                        placeholder="请输入医保凭证"
                        @keyup.enter.native="prepare()"
                        ref="input"
                        style="width: 300px"
                    ></el-input>
                    <el-input
                        v-if="yibaoinfo.cardtype == '02'"
                        v-model="shenfenzhenghao"
                        type="text"
                        placeholder="请输入患者卡号"
                        @keyup.enter.native=" getmzxx('1')"
                        ref="input"
                        style="width: 300px"
                    ></el-input>
                </div>
                <div style="text-align: center">
                    <el-input v-if="yibaoinfo.cardtype == '00'" v-model="jiuzhencard" type="text" placeholder="请输入患者卡号" @keyup.enter.native="prepare()" ref="input" style="width: 300px"></el-input>
                </div>
            </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="prepare()">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { mzxx, mzxxs,queryBasicInfo,queryReadRard } from '@/api/mzSFC'
import { getPatientInfo } from '@/api/patient'
import { getPatientInfo2 } from '@/api/jiesuan'
export default {
    name: 'SelectCard',
    props: {
        patientcard:Object,
        visible: Boolean,
        flag: String,
        xzbz: String,
        patientData:Object,
        selectTableArr:Array
    },
    data() {
        return {
            shenfenzhenghao:'',
            adminpingzhengma:'',
            jiuzhencard:'',
            logo: require('@/assets/logo/CardReader.gif'),
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: '',
            },
            formLabelWidth: '120px',
            yibaoinfo: {
                idcard: '',
                cardtype: '1',
                cardno: '',
                channel: this.patientcard.channel,
                sfzh: '',
                ksbm: '',
                xm: '',
            },
            insurance:'',
        }
    },
    watch:{
        patientData:{
            handler:function(nv,ov){
                if(nv){
                    this.shenfenzhenghao = nv.id_card
                    this.insurance = nv.insurance_type?.value || ''
                    if(nv.insurance_type?.value!='LONGDISTANCE'){
                        // this.yibaoinfo.cardtype = '02'
                    }else{
                        this.yibaoinfo.cardtype = '03'
                    }
                }
            },
            immediate:true,
            deep:true,
        }
    },
    computed: {
        dialogFormVisible: {
            get() {
                return this.visible
            },
            set(val) {
            this.$emit('update:visible', val)
            },
        },
    },
    mounted() {
        this.socketInit()
    },
    created() {
        if (!window.WebSocket) {
            alert('该版本浏览器不支持WebSocket')
        } else {
            console.log('支持websocket')
        }
        this.ws = new WebSocket('ws://127.0.0.1:50000/')
        this.ws.onerror = function (evt) {
            console.log('读卡器连接失败')
        }
    },

    methods: {
        socketInit() {
            this.ws = new WebSocket('ws://127.0.0.1:6932/')
            this.ws.onopen = function () { }
            this.ws.onmessage = this.onmessagecard
            this.ws.onclose = function () {}
        },
            //刷卡回调方法
            onmessagecard(evt) {
            let res = JSON.parse(evt.data)
            // 赋值调接口
            if (res.MethodName == 'ReadIDCard' && res.RespCode == 0) {
                // 身份证读取
                this.yibaoinfo.cardno = res.RespData.CardId
                this.getmzxx('1')
                this.closedevice()
            } else if (res.MethodName == 'ReadSSSECard' && res.RespCode == 0) {
                // 社保卡读取||this.yibaoinfo.channel == 'longdistance'
                if (this.yibaoinfo.channel == 'offsite') {
                    this.yibaoinfo.cardno = res.RespData.sfzh
                } else {
                    this.yibaoinfo.idcard = res.RespData.CardNo
                }
                this.yibaoinfo.xm = res.RespData.xm
                this.yibaoinfo.p_sbm = res.RespData.ksbm
                this.yibaoinfo.sfzhm = res.RespData.sfzh
                this.getmzxx('2')
                this.closedevice()
            } else {
                return false
            }
        },
            // 关闭设备
    closedevice() {
        this.ws.send('{ "MethodName": "CloseDevice" }')

    },
        //选择卡类型后操作
        prepare() {

            //有卡就读卡
            if (this.yibaoinfo.cardtype == '02') {
                if (this.shenfenzhenghao !='') {
                    this.yibaoinfo.cardno = this.shenfenzhenghao
                    this.getmzxx('1')
                    return false
                }
                //读身份证
                this.ws.send('{ "MethodName": "OpenDevice" }')
                this.ws.send('{ "MethodName": "ReadIDCard"}')
                //没卡就手写传卡号
            } else if (this.yibaoinfo.cardtype == '03') {
                //读医保卡
                this.ws.send('{ "MethodName": "OpenDevice" }')
                this.ws.send('{ "MethodName": "ReadSSSECard" }')
            }  else if (this.yibaoinfo.cardtype == '01') {
                this.getmzxx('3')
            } else if (this.yibaoinfo.cardtype == '00') {
                this.getmzxx('4')
            }
        },
        getmzxx(e) {
            if (e == '1') {
                this.param = {
                    id_card:this.shenfenzhenghao==''?this.yibaoinfo.cardno:this.shenfenzhenghao,
                    insurance:this.insurance,
                    cache:'1',
                    yltclb:this.selectTableArr[0].settle_type.is_mb?'4':'6',
                    xzbz:this.selectTableArr[0].settle_type.is_gs?'D':'C',
                    card_type:'02'
                }
                queryBasicInfo(this.param)
                    .then(response => {
                        this.dialogFormVisible = false
                         this.$emit('getyibaoinfo', response.data,this.yibaoinfo.cardtype)
                         this.adminpingzhengma=''
                    })
                    .finally((err) => {
                        this.dialogFormVisible = false
                    })
            }
           
            if (e == '2') {
                this.param = {
                    
                    insurance:this.insurance,//this.insurance
                    cache:'1',
                    yltclb:this.selectTableArr[0].settle_type.is_mb?'4':'6',
                    card_type:this.yibaoinfo.cardtype,
                    qr_code:this.adminpingzhengma,
                    id_card:this.yibaoinfo.sfzhm,
                    dzpzywm:'301',
                    xzbz:this.selectTableArr[0].settle_type.is_gs?'D':'C',
                    card_no:this.yibaoinfo.idcard,
                    sbm:this.yibaoinfo.p_sbm,
                    name:this.yibaoinfo.xm,
                }
                queryReadRard(this.param)
                    .then(response => {
                        this.dialogFormVisible = false
                        this.$emit('getyibaoinfo', response.data,this.yibaoinfo.cardtype)
                        this.adminpingzhengma=''
                    })
                    .finally(() => {
                        this.dialogFormVisible = false
                    })
            } if (e == '3') {
                this.param = {
                    insurance:this.insurance,//this.insurance
                    cache:'1',
                    yltclb:this.selectTableArr[0].settle_type.is_mb?'4':'6',
                    card_type:this.yibaoinfo.cardtype,
                    id_card:this.yibaoinfo.sfzhm,
                    qr_code:this.adminpingzhengma,
                    dzpzywm:'301',
                    xzbz:this.selectTableArr[0].settle_type.is_gs?'D':'C',
                    card_no:this.yibaoinfo.idcard,
                    sbm:this.yibaoinfo.p_sbm,
                    name:this.yibaoinfo.xm,
                }
                queryReadRard(this.param)
                    .then(response => {
                        this.dialogFormVisible = false
                        this.$emit('getyibaoinfo', response.data,this.yibaoinfo.cardtype,this.adminpingzhengma)
                        this.adminpingzhengma=''
                    })
                    .finally(() => {
                        this.loading = false
                    })
            }
  
        },
        handleClose(){
            this.$emit('close')
        }
    },
}
</script>

<style>
</style>
