<!-- 图表的按钮 -->
<template>
    <div class="btns global">
        <!-- 图表类型按钮，注意按钮的值需要和modelinfo组件里的对应 -->
        <div class="btn-line">
            <el-button class="btn-style" :class="param.chartBtn == 1 ? 'btn-active' : 'btn'" type="primary" @click="changeChart(1)">
                趋势分析
            </el-button>
            <el-button class="btn-style" :class="param.sameAxis ? 'btn-active' : 'btn'" type="primary" @click="changeAxis">
                共用坐标
            </el-button>
        </div>
        <!-- 时间线按钮 -->
        <div class="btn-line" v-if="param.chartBtn == 1">
            <el-button v-for="btn of AllDateLineBtn" :key="btn.value" class="btn-style" :class="param.dateLineBtn == btn.value ? 'btn-active' : 'btn'"
                type="primary" @click="changeDateLine(btn.value)">
                {{ btn.name }}
            </el-button>
            <el-date-picker class="date-picker" v-model="param.dateSelect" type="datetimerange" unlink-panels
                prefix-icon="none" :picker-options="pickerOptions" :clearable="false" :editable="false"
                value-format="timestamp" start-placeholder="开始时间" end-placeholder="结束时间" @change="changeDate" />
        </div>
    </div>
</template>

<script>
    import {
        GetPickerOptions,
        DefaultDateSelect,
        AllDateLineBtn
    } from '@/common/const.js';

    export default {
        props: {
            // 选择的列表
            checkList: {
                type: Array,
                default () {
                    return [];
                }
            },
        },
        data() {
            return {
                // 时间线的按钮组
                AllDateLineBtn: AllDateLineBtn,
                // 选择的按钮，即图表参数
                param: {
                    chartBtn: 1, // 选择的图表按钮
                    dateLineBtn: 0, // 选择的时间趋势按钮
                    dateSelect: DefaultDateSelect(), // 选择的日期
                    sameAxis: true, // 是否共坐标
                },
                // 快捷日期选择
                pickerOptions: GetPickerOptions(),
            };
        },
        watch: {
            checkList: {
                immediate: true,
                handler(val) {
                    if (!val || !val.length) return;
                    this.changeChart(1); // 模拟按钮点击
                }
            }
        },
        methods: {
            // 切换图表类型
            changeChart(val) {
                this.param.chartBtn = val;
                this.$emit('changeBtn', this.param);
            },
            // 切换时间线
            changeDateLine(val) {
                this.param.dateLineBtn = val;
                let today = new Date();
                let minusDay = today.getDay() != 0 ? today.getDay() - 1 : 6;
                this.param.dateSelect = val ? [today.setHours(0, 0, 0, 0) - (minusDay * 1000 * 3600 * 24), Date.now()] : DefaultDateSelect();
                this.$emit('changeBtn', this.param);
            },
            // 切换日期
            changeDate(val) {
                if (!val) this.param.dateSelect = DefaultDateSelect(); // 如果没有选择日期，则采用默认日期
                this.$emit('changeBtn', this.param);
            },
            // 切换共用坐标
            changeAxis() {
                this.param.sameAxis = !this.param.sameAxis;
                this.$emit('changeAxis', this.param);
            },
            // 重置按钮状态
            reset() {
                this.param = {
                    chartBtn: 1,
                    dateLineBtn: 0,
                    dateSelect: DefaultDateSelect(),
                    sameAxis: true,
                };
            },
        }
    };
</script>

<style lang="scss" scoped>
    .btns {
        display: flex;
        flex-direction: column;

        .btn-line {
            display: flex;

            .btn-style {
                min-width: 6rem;
                height: 2.5rem;
                margin: 0 1rem 1rem 0;
                font-size: 0.875rem;
            }

            .btn {
                @extend %btn-default;
                border-radius: 50px;
            }

            .btn-active {
                @extend %btn-active;
                border-radius: 50px;
            }
        }

        .date-picker {
            width: 30rem;
            height: 2.5rem !important;
            margin: 0 1rem 1rem 0;
            padding: 0;
            border-radius: 50px;
            display: flex;
            justify-content: center;

            /deep/ .el-range-input {
                font-size: 0.875rem;
                background-color: transparent;
                color: #fff;
            }

            /deep/ .el-input__icon {
                width: 0;
            }
            
            /deep/ .el-range-separator{
                @extend %flex-center;
                color: #fff;
            }
        }
    }
</style>
