<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="结束日期" style="width:95%">
                </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_IN_HOSPITAL' && 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_IN_HOSPITAL'" 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_IN_HOSPITAL'">
                <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">
                    <p v-html="categoryItem.inHospitalInfo"></p>
                </div>
                <div v-if="recordindex == 1">
                    <p v-html="categoryItem.outHospitalInfo"></p>
                </div>
                <div v-if="recordindex == 2">
                    <p v-html="categoryItem.surgicalRecord"></p>
                </div>
                <div v-if="recordindex == 3">
                    <p v-html="categoryItem.inHospitalInfo"></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
        },
        //点击左侧item
        clickcategory(item, index) {
            this.categoryindex = index
            this.categoryItem = item
            if (item.visitMethod == 'BE_IN_HOSPITAL') {
                this.recordindex = 0
            } 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)
                }
            })
        },
        //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;
            }
            this.query.visitDateStart = this.haflYear();
            this.visitDate = [this.haflYear(), year + seperator1 + month + seperator1 + strDate]
            this.query.visitDateEnd = year + seperator1 + month + seperator1 + strDate
            this.query.patientId = this.$route.query.patientId
            this.getListinfo();
        },
        haflYear() {
            // 先获取当前时间
            var curDate = (new Date()).getTime()
            // 将半年的时间单位换算成毫秒
            var halfYear = 365 / 2 * 24 * 3600 * 1000
            // 半年前的时间（毫秒单位）
            var pastResult = curDate - halfYear
            // 日期函数，定义起点为半年前
            var pastDate = new Date(pastResult)
            var pastYear = pastDate.getFullYear()
            var pastMonth = pastDate.getMonth() + 1
            var pastDay = pastDate.getDate()
            if (pastMonth >= 1 && pastMonth <= 9) {
                pastMonth = '0' + pastMonth
            }
            if (pastDay >= 0 && pastDay <= 9) {
                pastDay = '0' + pastDay
            }
            var endDate = pastYear + '-' + pastMonth + '-' + pastDay
            return endDate
        }
    }
};
</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>