<template>
    <div class="header">
        <div class="leftheader">
            <div class="item" v-for="(item, index) in categorylist" :key="item.id" @click="clickcategory(item, index)"
                :class="index == categoryindex ? 'selectitem' : ''">
                <div class="name">
                    {{ item.title }}
                </div>
            </div>
        </div>
        <div class="rightheader">
            <div class="time">
                <el-date-picker v-model="measureTime" type="daterange" range-separator="至" start-placeholder="开始日期"
                    :clearable="false" value-format="yyyy-MM-dd" :picker-options="pickerOptions" end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div id="main"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import {
    curveStatistics
} from '@/api/manage/indicatorMonitoring'
export default {
    name: "indicatorMonitoring",
    data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now(); //禁止选择今天以后的时间
                },
            },
            measureTime: [],
            //左侧类型选中
            categoryindex: undefined,
            //左侧list
            categorylist: [{
                id: 1,
                title: '运动检测',
                groupCode: 'sport'
            }, {
                id: 2,
                title: '血压测量',
                groupCode: 'bp'
            }, {
                id: 3,
                title: '血糖测量',
                groupCode: 'bg'
            }],
            query: {}
        };
    },
    created() {
    },
    mounted() {
        this.categoryindex = 0
        this.query.groupCode = this.categorylist[0].groupCode
        this.query.patientId = this.$route.query.patientId
        this.query.title = '运动检测'
        this.getinfo();
    },
    watch: {
        'measureTime': {
            handler(newValue, oldValue) {
                this.query.measureTimeStart = newValue[0]
                this.query.measureTimeEnd = newValue[1]
                this.getinfo();
            },
            deep: true,
        },
    },
    methods: {
        clickcategory(item, index) {
            this.categoryindex = index
            this.query.groupCode = item.groupCode
            this.query.title = item.title
            this.query.patientId = this.$route.query.patientId
            this.getinfo();
        },
        getinfo() {
            curveStatistics(this.query).then(res => {
                this.info(res.data);
            })
        },
        info(row) {
            // 基于准备好的dom，初始化echarts实例
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;
            if (this.query.title == '运动检测') {
                option = {
                    title: {
                        text: this.query.title
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '0%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: row.xlist
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '运动时长',
                            type: 'line',
                            data: row.ylist.运动时长
                        },
                        {
                            name: '平均心率',
                            type: 'line',
                            data: row.ylist.平均心率
                        }
                    ]
                };
            } else if (this.query.title == '血压测量') {
                option = {
                    title: {
                        text: this.query.title
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '0%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: row.xlist
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '收缩压',
                            type: 'line',
                            data: row.ylist.收缩压
                        },
                        {
                            name: '舒张压',
                            type: 'line',
                            data: row.ylist.舒张压
                        }
                    ]
                };
            } else if (this.query.title == '血糖测量') {
                option = {
                    title: {
                        text: this.query.title
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '0%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: row.xlist
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '空腹血糖',
                            type: 'line',
                            data: row.ylist.收缩压
                        }
                    ]
                };
            }
            option && myChart.setOption(option);
        },
    }
};
</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;
        position: relative;

        .time {
            position: absolute;
            right: 50px;
            top: 30px;
        }

        #main {
            width: 1000px;
            height: 450px;
            margin: 80px auto;
        }
    }

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

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

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

            .name {
                font-size: 18px;
                font-weight: 600;
            }
        }
    }
}
</style>