<template>
    <div class="main-contain">
        <div class="position">
            <bread-crumb :crumbs='crumbs'></bread-crumb>
        </div>
        <div class="app-container">
            <div class="nameTitle">患者基本信息:</div>
            <div class="formMain">
                <el-form class="basicForm" ref="form" :model="form" label-width="80px">
                    <el-form-item label="结算类型">
                        <el-select v-model="form.settlementValue" placeholder="请选择">
                            <el-option
                            v-for="item in settlement"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="specialFormItem" label="医保卡号">
                        <el-input v-model="form.medicalInsuranceCard"></el-input>
                        <el-button type="primary">读卡</el-button>
                    </el-form-item>
                    <el-form-item label="患者姓名">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-select v-model="form.sex" placeholder="请选择">
                            <el-option
                            v-for="item in sex"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="证件类型">
                        <el-select v-model="form.certificates" placeholder="请选择">
                            <el-option
                            v-for="item in certificates"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="医疗类别">
                        <el-select v-model="form.medicalCare" placeholder="请选择">
                            <el-option
                            v-for="item in medicalCare"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="出生日期">
                        <el-date-picker v-model="form.birthday" type="date" @change="getBirthday" placeholder="选择日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input v-model="form.age" readonly=""></el-input>
                    </el-form-item>
                    <el-form-item label="证件号码">
                        <el-input v-model="form.idCard"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="nameTitle">患者挂号信息:</div>
            <div class="formMain">
                <el-form class="basicForm" ref="form" :model="form" label-width="80px">
                    <el-form-item label="挂号类型">
                        <el-select v-model="form.register" placeholder="请选择">
                            <el-option
                            v-for="item in register"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="医生">
                        <el-select v-model="form.doctor" placeholder="请选择">
                            <el-option
                            v-for="item in doctor"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="科室">
                        <el-select v-model="form.department" placeholder="请选择">
                            <el-option
                            v-for="item in department"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-checkbox v-model="form.costChecked">是否需要工本费</el-checkbox>
                    </el-form-item>
                    <el-form-item label="挂号费">
                        <el-input v-model.number="form.registrationFee"></el-input>
                    </el-form-item>
                    <el-form-item label="诊疗费">
                        <el-input v-model.number="form.medicalExpenses"></el-input>
                    </el-form-item>
                    <el-form-item label="工本费">
                        <el-input v-model.number="form.cost" :readonly="!form.costChecked"></el-input>
                    </el-form-item>
                    <el-form-item label="合计">
                        <el-input v-model.number="total" readonly></el-input>
                    </el-form-item>
                    <el-form-item>
                        <!-- <el-input v-model="form.name"></el-input> -->
                    </el-form-item>
                </el-form>
                <el-button style="float:right" @click="getForm" type="primary">挂号</el-button>
            </div>
            
        </div>
    </div>
</template>

<script>
import BreadCrumb from '@/xt_pages/components/bread-crumb'
const moment = require('moment')
export default {
    components:{
        BreadCrumb
    },
    data(){
        return{
            crumbs: [
                { path: false, name: '门诊挂号' },
                { path: false, name: '门诊挂号' }
            ],
            form:{
                settlementValue: '',
                medicalInsuranceCard:'',
                name:'',
                sex:'',
                certificates:'',
                medicalCare:'',
                birthday:'',
                age:'',
                idCard:'',
                register:'',
                doctor:'',
                department:'',
                costChecked:false,
                registrationFee:'',
                medicalExpenses:'',
                cost:'',
                total: ''

            
            },
            settlement: [{
                value: 1,
                label: '医保'
                }, {
                value: 2,
                label: '自费'
            }],
            sex: [{
                value: 1,
                label: '男'
                }, {
                value: 2,
                label: '女'
            }],
            certificates: [{
                value: 1,
                label: '内地身份证'
                }, {
                value: 2,
                label: "社保卡"
                },{
                value: 3,
                label: "护照"
                },{
                value: 4,
                label: "军官证"
                },{
                value: 5,
                label: "台胞证"
                },{
                value: 6,
                label: "港澳地区身份证"
            }],
            medicalCare: [{
                value: 1,
                label: '普通门诊'
                }, {
                value: 2,
                label: "门诊大病"
                },{
                value: 3,
                label: "重疾特药"
                },{
                value: 4,
                label: "门诊特检"
                },{
                value: 5,
                label: "健康接种"
                },{
                value: 6,
                label: "预防接种"
                },
                {
                value: 7,
                label: "门诊输液"
            }],
            register: [{
                value: 1,
                label: '普通'
                }, {
                value: 2,
                label: "主治"
                },{
                value: 3,
                label: "主任"
                },{
                value: 4,
                label: "免收诊金"
                },{
                value: 5,
                label: "专家"
            }],
        }
    },
    computed:{
        total(){
            if(this.form.registrationFee || this.form.medicalExpenses || this.form.cost){
                return parseFloat(this.form.registrationFee ? this.form.registrationFee : 0) + parseFloat(this.form.medicalExpenses ? this.form.medicalExpenses : 0) + parseFloat(this.form.cost ? this.form.cost : 0) 
            }
        }
    },
    methods:{
        getBirthday(date){
            console.log(date)
            let curTime = moment(new Date(date)).format('YYYY-MM-DD')
            console.log(this.jsGetAge(curTime))

            this.form.age = this.jsGetAge(curTime)
        },
        jsGetAge(strBirthday) { //传入形式yyyy-MM-dd
            //strBirthday = util.formatTime(strBirthday);转换成yyyy-MM-dd形式
            var returnAge
            var strBirthdayArr = strBirthday.split('-')
            var birthYear = strBirthdayArr[0]
            var birthMonth = strBirthdayArr[1]
            var birthDay = strBirthdayArr[2]
            var d = new Date()
            var nowYear = d.getFullYear()
            var nowMonth = d.getMonth() + 1
            var nowDay = d.getDate()
            if (nowYear == birthYear) {
            returnAge = 0 //同年 则为0岁
            } else {
            var ageDiff = nowYear - birthYear //年之差
            if (ageDiff > 0) {
                if (nowMonth == birthMonth) {
                var dayDiff = nowDay - birthDay //日之差
                if (dayDiff < 0) {
                    returnAge = ageDiff - 1
                } else {
                    returnAge = ageDiff
                }
                } else {
                var monthDiff = nowMonth - birthMonth //月之差
                if (monthDiff < 0) {
                    returnAge = ageDiff - 1
                } else {
                    returnAge = ageDiff
                }
                }
            } else {
                returnAge = -1 //返回-1 表示出生日期输入错误 晚于今天
            }
            }
            return returnAge //返回周岁年龄
        },
        getForm(){
            this.form.total = this.total
            // console.log(new Date(new Date().toLocaleDateString()).getTime() / 1000)
            // console.log(JSON.parse(localStorage.getItem("temp")))
            if(localStorage.getItem("temp")){
                let a = JSON.parse(localStorage.getItem("temp"))
                // let arr = []
                this.form.create_time = new Date(new Date().toLocaleDateString()).getTime() / 1000
                this.form.org_id = this.$store.getters.xt_user.org_id
                a.push(this.form)
                console.log(111,a)
                localStorage.setItem("temp",JSON.stringify(a));
                Object.keys(this.form).forEach((key)=>{
                    this.form[key] = ''
                })
                this.$message({message: '添加成功',type: 'success'});
            }else {
                let arr = []
                this.form.create_time = new Date(new Date().toLocaleDateString()).getTime() / 1000
                this.form.org_id = this.$store.getters.xt_user.org_id
                arr.push(this.form)
                localStorage.setItem("temp",JSON.stringify(arr));
                Object.keys(this.form).forEach((key)=>{
                    this.form[key] = ''
                })
                this.$message({message: '添加成功',type: 'success'});
            }
        }   
    }
}
</script>

<style lang="scss" scoped>
.nameTitle{
    font-weight: bold;
    font-size: 16px;
}
.formMain{
    // padding: 10px 90px;
    width:80%;
    margin: 0 auto;
}
.basicForm{
    
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .el-form-item{
        width: 260px;
    }
    .specialFormItem{
        width:625px;
        .el-input{
            min-width: 150px;
        }
    }
    .el-select{
        width: 180px;
    }
    .el-input{
        width: 180px;
    }
}
</style>
