<template>
    <div class="header">
        <div class="leftheader">
            <div class="time">
                <el-date-picker v-model="visitDate" type="daterange" range-separator="至" start-placeholder="开始日期"
                    value-format="yyyy-MM-dd" :picker-options="pickerOptions" end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div class="list">
                <div class="item" v-for="(item, index) in categorylist" :key="item.id"
                    @click="clickcategory(item, index)"
                    :class="item.visitMethod == 'BE_HOSPITALIZED' && index == categoryindex ? 'zyitem' : item.visitMethod == 'OUTPATIENT_SERVICE' && index == categoryindex ? 'mzitem' : ''">
                    <div class="time">{{ item.visitDate }}
                    </div>
                    <div class="name">
                        {{ item.visitName }}
                    </div>
                    <div class="text">
                        <span>
                            {{ item.visitDept }}
                        </span>
                        <span style="margin-left: 10px;">
                            {{ item.createBy }}
                        </span>
                    </div>
                    <el-tag v-if="item.visitMethod == 'BE_HOSPITALIZED'" class="type" size="mini">住院</el-tag>
                    <el-tag v-if="item.visitMethod == 'OUTPATIENT_SERVICE'" class="type" size="mini"
                        type="success">门诊</el-tag>
                </div>
            </div>
        </div>
        <div class="rightheader">
            <div class="toptitle" v-if="categoryItem && categoryItem.visitMethod == 'BE_HOSPITALIZED'">
                <div style="border-radius: 10px 0 0 10px" :class="recordindex == 0 ? 'zyclass' : ''"
                    @click="clickrecord(0)">
                    入院记录
                </div>
                <div class="centerdiv" :class="recordindex == 1 ? 'zyclass' : ''" @click="clickrecord(1)">出院记录
                </div>
                <div style="border-radius: 0 10px 10px 0" :class="recordindex == 2 ? 'zyclass' : ''"
                    @click="clickrecord(2)">
                    手术记录</div>
            </div>
            <div class="toptitle" v-if="categoryItem && categoryItem.visitMethod == 'OUTPATIENT_SERVICE'">
                <div style="border-radius: 10px" :class="recordindex == 3 ? 'mzclass' : ''" @click="clickrecord(3)">
                    门诊记录
                </div>
            </div>
            <div class="righttext" v-if="categoryItem">
                <div v-if="recordindex == 0 && recordlist">
                    <p>婚姻史：{{ recordlist.maritalHistory }}</p>
                    <p>个人史：{{ recordlist.personalHistory }}</p>
                    <p>月经生育史：{{ recordlist.menstrualFertilityHistory }}</p>
                    <p>现病史：{{ recordlist.presentIllnessHistory }}</p>
                    <p>家族史：{{ recordlist.familyHistory }}</p>
                    <p>既往史：{{ recordlist.pastHistory }}</p>
                </div>
                <div v-if="recordindex == 1 && recordlist">
                    <p>入院诊断：{{ recordlist.admissionDiagnosis }}</p>
                    <p>入院情况：{{ recordlist.admissionSituation }}</p>
                    <p>诊疗经过：{{ recordlist.diagnosisTreatmentProcess }}</p>
                    <p>出院诊断：{{ recordlist.dischargeDiagnosis }}</p>
                    <p>出院情况：{{ recordlist.dischargeStatus }}</p>
                    <p>出院医嘱：{{ recordlist.dischargeOrder }}</p>
                </div>
                <div v-if="recordindex == 2 && recordlist">
                    <p>手术名称：{{ recordlist.operationName }}</p>
                    <p>手术日期：{{ recordlist.operationDate }}</p>
                    <p>手术麻醉方式：{{
                    recordlist.operationAnesthesiaWay == 'GENERAL_ANESTHESIA' ? '全身麻醉' :
                        recordlist.operationAnesthesiaWay == 'LOCAL_ANESTHESIA' ? '局部麻醉' : '' }}
                    </p>
                    <p>手术入路：{{ recordlist.operationApproach }}</p>
                    <p>手术方式：{{ recordlist.operationWay }}</p>
                </div>
                <div v-if="recordindex == 3">
                    <p>{{ categoryItem.outpatientVisitInfo }}</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {
    getList,
    InRecord,
    OutRecord,
    OperationRecord
} from '@/api/manage/visitRecords'
export default {
    name: "visitRecords",
    data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now(); //禁止选择今天以后的时间
                },
            },
            visitDate: [],
            //右侧标题选中
            recordindex: undefined,
            //左侧类型选中
            categoryindex: undefined,
            //左侧选中的item
            categoryItem: undefined,
            //左侧list
            categorylist: [],
            //右侧list
            recordlist: undefined,
            //query
            query: {
                patientId: undefined,
                //选择时间区间
                visitDateStart: "",
                visitDateEnd: "",
            },
        };
    },
    watch: {
        'visitDate': {
            handler(newValue, oldValue) {
                this.query.visitDateStart = newValue[0]
                this.query.visitDateEnd = newValue[1]
                this.getListinfo();
            },
            deep: true,
        },
    },
    created() {
        this.info();
    },
    methods: {
        //点击右侧三个记录
        clickrecord(index) {
            this.recordindex = index
            if (index == 0) {
                this.InRecordinfo();
            } else if (index == 1) {
                this.OutRecordinfo();
            } else if (index == 2) {
                this.OperationRecordinfo();
            }
        },
        //点击左侧item
        clickcategory(item, index) {
            console.log(index, item)
            this.categoryindex = index
            this.categoryItem = item
            if (item.visitMethod == 'BE_HOSPITALIZED') {
                this.recordindex = 0
                this.InRecordinfo();
            } else if (item.visitMethod == 'OUTPATIENT_SERVICE') {
                this.recordindex = 3
            }
        },
        //左侧list
        getListinfo() {
            getList(this.query).then(res => {
                if (res.data.length > 0) {
                    this.categorylist = res.data
                    this.clickcategory(res.data[0], 0)
                }
            })
        },
        //手术记录
        OperationRecordinfo() {
            OperationRecord(this.categoryItem.id).then(res => {
                this.recordlist = res.data
            })
        },
        //出院记录
        OutRecordinfo() {
            OutRecord(this.categoryItem.id).then(res => {
                this.recordlist = res.data
            })
        },
        //入院记录
        InRecordinfo() {
            InRecord(this.categoryItem.id).then(res => {
                this.recordlist = res.data
            })
        },
        //门诊记录
        //info
        info() {
            var date = new Date();
            var seperator1 = "-";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var pastDate = new Date()
            var pastYear = pastDate.getFullYear()
            var pastMonth = pastDate.getMonth() + 1 - 6
            if (pastMonth < 0) {
                pastYear = pastYear - 1
                pastMonth = 12 + pastMonth
            }
            var pastDay = pastDate.getDate()
            if (pastMonth >= 1 && pastMonth <= 9) {
                pastMonth = '0' + pastMonth
            }
            if (pastDay >= 0 && pastDay <= 9) {
                pastDay = '0' + pastDay
            }
            this.visitDate = [pastYear + '-' + pastMonth + '-' + pastDay, year + seperator1 + month + seperator1 + strDate]
            this.query.visitDateStart = pastYear + '-' + pastMonth + '-' + pastDay
            this.query.visitDateEnd = year + seperator1 + month + seperator1 + strDate
            this.query.patientId = this.$route.query.patientId
            this.getListinfo();
        },
    }
};
</script>
<style lang="scss" scoped>
.header {
    background-color: #fff !important;
    padding: 0 !important;
    display: flex;

    .rightheader {
        width: 75%;
        padding-top: 20px;
        border-left: 3px solid #DFE4ED;

        .righttext {
            width: 100%;
            padding-left: 20px;
            height: 450px;
            overflow: scroll;
            // 隐藏表头的滚动条
            overflow-x: hidden !important;
        }

        .toptitle {
            display: flex;
            margin-left: 20px;

            .zyclass {
                color: #1890ff !important;
                border: 2px solid #1890ff !important;
            }

            .mzclass {
                color: #009982 !important;
                border: 2px solid #009982 !important;
            }

            div {
                width: 80px;
                font-size: 14px;
                line-height: 36px;
                text-align: center;
                height: 36px;
                border: 1.5px solid #CCCCCC;
            }

            .centerdiv {
                border-left: none;
                border-right: none
            }
        }
    }

    .leftheader {
        margin-top: 20px;
        width: 25%;

        .list {
            margin-top: 20px;
            height: 450px;
            overflow: scroll;
            // 隐藏表头的滚动条
            overflow-x: hidden !important;
            width: 96%;

            .zyitem {
                background-color: #D2E9FC;
                border-left: 2px solid #1890ff !important;
                border-bottom: 1px solid #fff !important;
            }

            .mzitem {
                background-color: #EBF7F5;
                border-left: 2px solid #009982 !important;
                border-bottom: 1px solid #fff !important;
            }

            .item {
                height: 120px;
                padding: 25px 10px;
                position: relative;
                border-left: 2px solid #fff;
                border-bottom: 1px solid #E7E7E7;

                .type {
                    position: absolute;
                    right: 10px;
                    top: 20px;
                    font-size: 12px;
                }

                .text {
                    height: 20px;
                    line-height: 20px;
                    font-size: 12px;
                    color: #999999;
                }

                .name {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    height: 30px;
                    line-height: 30px;
                    font-size: 18px;
                    font-weight: 600;
                }

                .time {
                    line-height: 20px;
                    height: 20px;
                    font-size: 14px;
                }
            }
        }
    }
}
</style>