<template>
    <el-dialog title="选择卡类型" :visible.sync="dialogFormVisible" width="30%">
        <img :src="logo" style="display: block; margin: -50px auto 0px" 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" @change="changeType">
                        <el-radio label="02">身份证</el-radio>
                        <el-radio label="03">社会保障卡</el-radio>
                        <!-- <el-radio label="01">电子医保凭证</el-radio> -->
                    </el-radio-group>
                </el-form-item>
            </div>
            <div>
                <div style="text-align: center">
                    <el-input
                        v-if="yibaoinfo.cardtype == '02'"
                        v-model="idcard"
                        type="text"
                        placeholder="输入身份证号"
                        @keyup.enter.native="getmzxx('02')"
                        style="width: 300px"
                        ref="cardInput"
                    ></el-input>
                </div>
                
            </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="prepare()">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { preSettlementGetPatientInfo,zyByIdCard } from '@/api/jiesuan'
export default {
    name: 'SelectCard',
    props: {
        patientcard:Object,
        visible: Boolean,
        flag: String,
        xzbz: String,
    },
    data() {
        return {
            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: '',
                sfzh: '',
                ksbm: '',
                xm: '',
            },
            idcard: '', //身份证号-输入
        }
    },
    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:9000/')
        
        this.ws.onerror = function (evt) {
            console.log('读卡器连接失败')
        }
    },

    methods: {
        // 当不关闭刷卡弹窗的时候需要对input框失去焦点的时候继续聚焦
        // handleSetFocus() {
        //     this.$nextTick(() => {
        //         this.$refs.cardInput.focus()
        //     })
        // },
        // 切换卡类型
        changeType(){
            if(this.yibaoinfo.cardtype == '02'){
                this.$nextTick(() => {
                    this.$refs.cardInput.focus()
                })
            }
            
        },
        //读取身份证按钮
        // readIdcard() {
        //   this.showName = "0";
        //   if (this.patient_id) {
        //     this.getPatientInfo();
        //   } else {
        //     this.socket.send('{ "MethodName": "OpenDevice" }');
        //     if (is_id_card) {
        //       this.socket.send('{ "MethodName": "ReadIDCard"}');
        //     } else {
        //       this.socket.send('{ "MethodName": "ReadSSSECard" }');
        //     }
        //   }
        // },
        socketInit() {
            this.ws = new WebSocket('ws://127.0.0.1:9000/')
            this.ws.onopen
            let self = this
            this.ws.onmessage = function (evt) {
                let res = JSON.parse(evt.data)
                // 赋值调接口
                if (res.MethodName == 'ReadIDCard' && res.RespCode == 0) {
                    // 身份证读取
                    self.yibaoinfo.cardno = res.RespData.CardId
                    self.getmzxx('02')
                    self.ws.send('{ "MethodName": "CloseDevice" }')
                } else if (res.MethodName == 'ReadSSSECard' && res.RespCode == 0) {
                    // 社保卡读取
                    self.yibaoinfo.cardno = res.RespData.sfzh
                    self.yibaoinfo.sfzh = res.RespData.sfzh
                    self.yibaoinfo.ksbm = res.RespData.ksbm
                    self.yibaoinfo.xm = res.RespData.xm
                    self.getmzxx('03')
                    self.ws.send('{ "MethodName": "CloseDevice" }')
                } else {
                    // self.$message.error('患者信息读取失败！')
                    self.yibaoinfo.cardno = ''
                    return false
                }
            }
        },
        //选择卡类型后操作
        prepare() {
            //有卡就读卡
            if (this.yibaoinfo.cardtype == '02') {
                //读身份证
                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('01')
            } 
           
        },
        getmzxx(e) {
            if(e == '01'){ //电子医保凭证
            }else if(e == '02' || e == '03'){ //02身份证 03社会保障卡
                zyByIdCard({
                    id_card: this.yibaoinfo.cardno?this.yibaoinfo.cardno:this.idcard, //
                })
                    .then(response => {
                        this.dialogFormVisible = false
                        this.$emit('getyibaoinfo', response.data)
                    })
                    .finally(() => { })
            }
            

        },
       
    },
}
</script>

<style>
</style>
