<template>
    <el-dialog v-model="visible" :fullscreen="isFullscreen" v-bind="$attrs" :show-close="showClose">
        <template #header>
            <slot name="header">
                <span class="el-dialog__title">{{ title }}</span>
            </slot>
            <div class="sc-dialog__headerbtn">
                <button v-if="showFullscreen" aria-label="fullscreen" type="button" @click="setFullscreen">
                    <el-icon v-if="isFullscreen" class="el-dialog__close"><el-icon-bottom-left /></el-icon>
                    <el-icon v-else class="el-dialog__close"><el-icon-full-screen /></el-icon>
                </button>
                <button v-if="showClose" aria-label="close" type="button" @click="closeDialog">
                    <el-icon class="el-dialog__close"></el-icon>
                </button>
            </div>
        </template>
        <div v-loading="loading">
            <div class="searchHead" v-if="type=='hours'">
                <el-date-picker
                    v-model="query.start_time"
                    type="date"
                    placeholder="选择时间"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    :picker-options="pickerOptions"
                />
                <span class="middleText">至</span>
                <el-date-picker
                    v-model="query.end_time"
                    type="date"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    start-placeholder="结束日期"
                    :picker-options="pickerOptions"
                />
                <el-button type="primary" class="searchBtn" @click="dataSearch">查询</el-button>
            </div>
            <div class="searchHead" v-if="type=='days'">
                <el-date-picker
                    v-model="query.start_time"
                    type="date"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    start-placeholder="开始日期"
                    :picker-options="pickerOptions"
                />
                <el-date-picker
                    v-model="query.end_time"
                    type="date"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    start-placeholder="结束日期"
                    :picker-options="pickerOptions"
                />
                <el-button type="primary" class="searchBtn" @click="dataSearch">查询</el-button>
            </div>
            <div class="searchHead" v-if="type=='month'">
                <el-date-picker
                    v-model="query.start_time"
                    type="month"
                    format="YYYY-MM"
                    value-format="YYYY-MM"
                    start-placeholder="开始月份"
                    :picker-options="pickerOptions"
                />
                <el-date-picker
                    v-model="query.end_time"
                    type="month"
                    format="YYYY-MM"
                    value-format="YYYY-MM"
                    start-placeholder="结束月份"
                    :picker-options="pickerOptions"
                />
                <el-button type="primary" class="searchBtn" @click="dataSearch">查询</el-button>
            </div>
            <div class="searchHead" v-if="type=='year'">
                <el-date-picker
                    v-model="query.start_time"
                    type="year"
                    format="YYYY"
                    value-format="YYYY"
                    start-placeholder="开始日期"
                    :picker-options="pickerOptions"
                />
                <el-date-picker
                    v-model="query.end_time"
                    type="year"
                    format="YYYY"
                    value-format="YYYY"
                    start-placeholder="结束日期"
                    :picker-options="pickerOptions"
                />
                <el-button type="primary" class="searchBtn" @click="dataSearch">查询</el-button>
            </div>
            <div id="myChart"  style="width:100%;height:400px;"></div>
        </div>
        <template #footer>
            <slot name="footer"></slot>
        </template>
    </el-dialog>
</template>

<script>

    import * as echarts from 'echarts';
	export default {
		props: {
            cate:{ type: String, default: ""},
			type: { type: String, default: "hours" },
			title: { type: String, default: "" },
            mgroup: { type: String, default: "" },
            apiObj: { type: Object, default: () => { } },
			showClose: { type: Boolean, default: true },
			echartType: { type: String, default: 'bar' },
            modelValue: { type: Boolean, default: false },
			showFullscreen: { type: Boolean, default: true },
			loading: { type: Boolean, default: false }
		},
		data() {
			return {
				visible: false,
				isFullscreen: false,
                query:{
                    time:''
                },
                myChart:null,
                option: {
                    title: {
                        text: '设备单位产品电耗',
                        x: 'center'
                    },
                    grid: {  // 图表距离边框的距离，可用百分比和数字（px）配置
                        top: '20%',  
                        left: '3%', 
                        right: '10%',
                        bottom: '5%',
                        containLabel: true
                    },
                    legend: { // 图例配置选项
                        orient: 'horizontal', //图例布局方式：水平 'horizontal' 、垂直 'vertical'
                        x: 'right', // 横向放置位置，选项：'center'、'left'、'right'、'number'（横向值 px）
                        y: '10',// 纵向放置位置，选项：'top'、'bottom'、'center'、'number'（纵向值 px）
                        data: ['查询对象'],
                    },
                    xAxis: {
                        type: 'category',
                        data: ['1','2','3','4','5','6','7','8','9','10','11','12'], 
                        name: '时间', 
                        // x轴名称样式
                        nameTextStyle: {
                            fontWeight: 600,
                            fontSize: 14
                        },
                        axisLine: { 
                            lineStyle: { // X 轴颜色配置
                                color: '#3366CC'  
                            } 
                        }, 
                        axisLabel: {  
                            rotate: 45, // X 轴标签文字旋转角度  
                            interval: 0  //设置 X 轴数据间隔几个显示一个，为0表示都显示 
                        },  
                        boundaryGap: false, //数据从 Y 轴起始
                    },
                    yAxis: {
                        type: 'value',
                        name: '对象值', 
                        // y轴名称样式
                        nameTextStyle: {
                            fontWeight: 500,
                            fontSize: 14
                        },
                        //min:0, // 配置 Y 轴刻度最小值
                        //max:4000,  // 配置 Y 轴刻度最大值
                        //splitNumber:7,  // 配置 Y 轴数值间隔
                        axisLine: { 
                            lineStyle: {   // Y 轴颜色配置
                                color: '#3366CC'  
                            } 
                        },
                    },
                    tooltip: {
                        show: true, // 是否显示
                        trigger: 'axis',   // axis   item   none
                        axisPointer: { // 坐标轴指示器配置项。  
                            type: 'cross', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。 
                            axis: 'auto', // 指示器的坐标轴。   
                            snap: true, // 坐标轴指示器是否自动吸附到点上  
                        }, 
                        showContent: true, 
                    },
                    series: [
                        {
                            name: '查询对象',
                            data: [0,0,0,0,0,0,0,0,0,0,0,0],
                            type: 'line',
                            // symbolSize: function(value) {  // 点的大小跟随数值增加而变大
                            //     return value / 150;
                            // },
                            symbolSize:8,  //设置折线上圆点大小
                            symbol:'circle', 
                            smooth: 0.5, // 设置折线弧度
                            itemStyle: {
                            normal: { 
                                label : {
                                    show: true  // 在折线拐点上显示数据
                                },
                                lineStyle:{
                                    width:1,  // 设置虚线宽度
                                    type:'dotted',  // 虚线'dotted' 实线'solid'
                                    color: '#3366CC'// 折线颜色设置为0，即只显示点，不显示折线
                                }
                            }
                            }
                        },
                    ]
                },
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                }
			}
		},
		watch:{
			modelValue(){
				this.visible = this.modelValue
				if(this.visible){
					this.isFullscreen = false
				}
			}
		},
		mounted() {
            let that = this;
            var myDate = new Date();
            that.year = myDate.getFullYear();
            that.month = myDate.getMonth()+1;
            that.days = myDate.getDate();
			that.visible = that.modelValue;
            that.option.legend.data.push(that.cate);
            that.option.series[0].name=that.cate;
			that.visible = that.modelValue;
            that.$nextTick(res=>{
                that.getChartsData();
            })
		},
		methods: {
            async getChartsData(){
                let that = this;
                let params = {};
                params.page = 0;
                params.type = that.type;
                params.mgroup = that.mgroup;
                let type = that.type,unit='时';
                if(this.type=='hour_s'){
                    type = 'hour';//key
                    params.year = that.year;
                    params.month = that.month;
                    params.day = that.day;
                }else if(this.type=='day_s'){
                    unit='日';
                    params.year_s = that.year;
                    params.month_s = that.month;
                }else if(this.type=='month_s'){
                    unit='月';
                    params.year_s = that.year;
                }
                that.apiObj.req(params).then(res=>{
                    function compare(property) {
                        return function (a, b) {
                            return a[property]-b[property];
                        }
                    }
                    let xAxisData = [],lineData = [],filterList=[];
                    res.forEach(item=>{
                        if(item.ep_monitored_name==that.cate){
                            filterList.push(item);
                        }
                    })
                    let arr = filterList.sort(compare(type));
                    //that.cate设备名称
                    arr.forEach(item=>{
                        lineData.push(item.elec_consume_unit)
                        let xAxis = item[type]+unit;
                        xAxisData.push(xAxis)
                    })
                    this.$nextTick(()=>{
                        let chartDom = document.getElementById('myChart');
                        that.myChart = echarts.init(chartDom);
                        that.option.xAxis.data = xAxisData;
                        that.option.series[0].data = lineData;
                        that.myChart.setOption(that.option);
                    })
                    
                })
            },
			//关闭
			closeDialog(){
				this.visible = false;
               
			},
			//最大化
			setFullscreen(){
				this.isFullscreen = !this.isFullscreen
			}
		}
	}
</script>

<style scoped>
    .searchHead{
        display:flex
    }
    .middleText{
        height: 32px;
        line-height: 32px;
        margin: 0 5px;
        display: inline-block;
    }
    .searchBtn{
        margin-left: 5px;
    }
	.sc-dialog__headerbtn {position: absolute;top: var(--el-dialog-padding-primary);right: var(--el-dialog-padding-primary);}
	.sc-dialog__headerbtn button {padding: 0;background: transparent;border: none;outline: none;cursor: pointer;font-size: var(--el-message-close-size,16px);margin-left: 15px;color: var(--el-color-info);}
	.sc-dialog__headerbtn button:hover .el-dialog__close {color: var(--el-color-primary);}
	.sc-dialog:deep(.el-dialog).is-fullscreen {display: flex;flex-direction: column;top:0px !important;left:0px !important;}
	.sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__header {}
	.sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__body {flex:1;overflow: auto;}
	.sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__footer {padding-bottom: 10px;border-top: 1px solid var(--el-border-color-base);}
</style>