<template>
    <div class="predicedb-chart-wrap">
        <div class="header">
            <!-- 曲线图时间筛选 -->
            <template v-if="chartInfo.ChartType==1">
			<!-- <el-button
				type="primary"
				v-for="item in yearSelector"
				:key="item.value"
				size="mini"
				:plain="item.value !== year_select"
				class="year-btn"
				@click.native="changeYear(item)"
				>{{ item.name }}</el-button> -->
                <el-popover 
                    placement="bottom" 
                    trigger="click" 
                    popper-class="btn-select-popover"
                    width="460" style="display: inline-block;">
                    <div class="btn-wrap">
                        <el-button
                            type="primary"
                            v-for="item in yearSelector"
                            :key="item.value"
                            size="mini"
                            :plain="item.value !== year_select"
                            class="year-btn"
                            @click.native="changeYear(item)"
                            >{{ item.name }}</el-button>
                    </div>
                    <el-button type="primary" plain size="mini" class="year-btn" slot="reference" style="margin-right:15px;background-color: #e6eefb;color:#0052D9;">时间段</el-button>
                </el-popover>
                <el-button 
                    type="primary" size="mini"
                    class="btn-sty" 
                    @click="openDateDia"
                >{{dateTip}}</el-button>
            </template>
            <!-- 季节图时间选择 -->
            <!-- <template v-if="chartInfo.ChartType==2">
                <date-picker
                    v-model="season_year"
                    type="month"
                    value-type="format"
                    range
                    placeholder="年份日期选择"
                    @change="seasonYearChange"
                />
            </template> -->
            <div v-else-if="chartInfo.ChartType === 2" @click="openDateDia" class="date-setting" style="display: inline-block;">
				{{ season_year && season_year.length>0 ? season_year[0]+'~'+season_year[1]:"年份日期选择" }}
			</div>
            <!-- <span v-permission="permissionBtn.predictEdbPermission.edbPreData_switchSeason"
                class="change-chart-btn" @click="chartTypeChange">切换{{chartInfo.ChartType==1?'季节性图':'曲线图'}}</span> -->
            <el-button type="primary" size="mini" class="btn-sty" style="margin-left:auto;"
                v-permission="permissionBtn.predictEdbPermission.edbPreData_switchSeason"
                @click="chartTypeChange">
                <i class="el-icon-sort" style="transform: rotate(90deg);"></i>
                    切换{{chartInfo.ChartType==1?'季节性图':'曲线图'}}
            </el-button>
        </div>
        <div class="chartWrapper">
            <Chart 
                :options="options" 
                ref="chartRef" 
            />
            <!-- 公历农历切换 只用于季节性图 -->
            <el-radio-group
                v-model="calendar_type"
                class="calendar-cont"
                v-if="chartInfo.ChartType === 2"
                @change="seasonTypeChange2"
            >
                <el-radio-button label="公历" />
                <el-radio-button label="农历" />
            </el-radio-group>

            <div class="range-cont left">
                <el-input
                    style="width: 60px; display: block"
                    size="mini"
                    type="number"
                    placeholder="上限"
                    :disabled="!isAllowEditLimit"
                    v-model="tableData[0].MaxData"
                    @change="setChartOptionHandle(tableData)"
                />
                <el-input
                    class="min-data-input"
                    size="mini"
                    type="number"
                    placeholder="下限"
                    :disabled="!isAllowEditLimit"
                    v-model="tableData[0].MinData"
                    @change="setChartOptionHandle(tableData)"
                />
            </div>
        </div>

        <!-- 自定义时间段选择弹窗 -->
		<DateChooseDia
			:isDateDia="isDateDia"
			:dateForm="dateForm"
			@cancel="isDateDia = false"
			@dateBack="dataChangeBack"
		/>
    </div>
</template>

<script>
import Chart from '@/views/dataEntry_manage/components/chart.vue';
import DateChooseDia from '@/views/dataEntry_manage/components/DateChooseDia';
import { chartSetMixin} from '@/views/dataEntry_manage/mixins/chartPublic'
import addOrEditMixn from '@/views/dataEntry_manage/mixins/addOreditMixin';
import { defaultOpts, seasonOptions, yearSelector} from '@/utils/defaultOptions';
export default {
    components: { Chart,DateChooseDia },
    mixins: [ chartSetMixin,addOrEditMixn ],
    props:{
        edbData:Object,
        lang: String,
        isAllowEditLimit:Boolean,
    },
    watch:{
        'edbData':{
            handler(n){
                this.handleInitData()
            },
            deep:true,
            immediate:true
        },
        // lang(n){
        //     this.changeLanguage(n)
        // }
    },
    data() {
        return {
            year_select: 10, //年份选择项
            year_select_season: 20, //季节性年份选择项 默认最近五年
            yearSelector: [
                {
                    name: '全部',
                    value: 10,
                },
                ...yearSelector,
            ],
            select_date: [], // 自定义时间段项
            season_year:[],//季节图日期选择

            options: {},
            chartInfo:{
                ChartType:1,
            },
            calendar_type:'公历',

            /* 日期弹窗 */
            isDateDia: false, // 时间段弹窗
            dateForm: {},
            dateTip: '请选择时间段',
            count_year:5,
            count_year_season:5,
            isPredictorChart:true, // 复用了相同的逻辑，为了预测指标图表和正常的图库图表区分开
        }
    },
    mounted() {
        this.changeLanguage(this.lang)
    },
    methods: {
        handleInitData(){
            this.tableData=[
                {
                    ...this.edbData.EdbInfo,
                    DataList:this.edbData.DataList
                }
            ]
            this.setAddChartDefault();
            this.setChartOptionHandle(this.tableData)
        },

        changeYear(item){
            this.year_select = item.value
            this.select_date = [];
            this.dateTip = '请选择时间段';
            this.$emit('refreshData','saveLimit')
        },
		/* 打开时间段弹窗 */
		openDateDia() {
			// 自定义时间段回显
			let selectDateStart = this.chartInfo.ChartType === 2?this.season_year[0]:this.select_date[0]
			let selectDateEnd = this.chartInfo.ChartType === 2?this.season_year[1]:this.select_date[1]

            let year_select_real = this.chartInfo.ChartType === 2?this.year_select_season:this.year_select

			this.dateForm = {
				date_type: year_select_real,
				start_date:
					year_select_real === 5 || year_select_real === 6
						? selectDateStart
						: '',
				end_date: year_select_real === 5 ? selectDateEnd : '',
				count_year: year_select_real === 20 ?
                            this.chartInfo.ChartType === 2?this.count_year_season:this.count_year 
                            : ''
			};
			this.isDateDia = true;
		},
        /* 保存完自定义日期 刷新数据 保存当前的图表配置和上下限 只改变图表*/
        dataChangeBack(data) {
            this.isDateDia = false;

            if(this.chartInfo.ChartType==1){
                this.year_select = data.dateType
                this.count_year = data.count_year
            }else{
                this.year_select_season = data.dateType
                this.count_year_season = data.count_year
            }
            let dateStart = data.start_date
            let dateEnd = data.end_date
            let latestYear = parseInt(this.tableData[0].LatestDate.substring(0,4))

			if(this.chartInfo.ChartType === 2){
                if(data.dateType==20){
                    dateStart = `${latestYear-data.count_year+1}-01-01`
                    dateEnd = `${latestYear}-12-31`
                }else if(data.dateType==6){
					// 回显
					dateEnd = this.tableData[0].LatestDate
				}
                this.season_year = [dateStart, dateEnd];
			}

            this.select_date = [dateStart, dateEnd];

            this.dateTip =
                data.dateType === 5
                ? `${data.start_date}~${data.end_date}`
                : data.dateType === 6
                ?`${data.start_date}~至今`
                :`最近${this.count_year}年`

            this.$emit('refreshData','saveLimit')
        },

        // 曲线图/季节图切换
        chartTypeChange(){
            this.chartInfo.ChartType=this.chartInfo.ChartType==1?2:1
            this.$emit('refreshData','saveLimit')
        },

        seasonYearChange(){
            this.$emit('refreshData','saveLimit')
        },

        seasonTypeChange2(){
            this.$emit('refreshData','saveLimit')
        }
    },
}
</script>

<style lang="scss" scoped>
.predicedb-chart-wrap{
    /* padding: 30px; */
    .header {
        display: flex;
        position: relative;
        margin-bottom: 30px;
        .year-btn,.btn-sty {
            min-width: 90px;
            font-size: 14px;
            margin-right: 5px;
            margin-bottom: 5px;
        }
        .btn-sty {
            background-color: #fff;
			color: #0052D9;
        }
        .date-setting{
			width: 210px;
			// height: 40px;
			padding: 10px;
			border: 1px solid #DCDFE6;
			border-radius: 4px;
			cursor: pointer;
			font-size: 14px;
			color: #333333;
			box-sizing: border-box;
		}
        .change-chart-btn{
            float: right;
            color: #409eff;
            font-size: 16px;
            cursor: pointer;
            &::before{
                content:'';
                display: inline-block;
                width: 18px;
                height: 18px;
                background-image: url('~@/assets/img/chart_m/change.png');
                background-size: cover;
                position: relative;
                top: 4px;
                right: 4px;
            }
        }
    }
    .calendar-cont {
        /* margin: 30px auto; */
        text-align: center;
        display: block;
        .el-radio-button__inner {
          padding: 8px 16px;
        }
    }
    .chartWrapper {
        position: relative;
        padding-left: 100px;
        .range-cont {
            position: absolute;
            top: 13%;
            .min-data-input {
                width: 60px;
                display: block;
                
            }
            &.left {
                left: 0;
            }
        }
        @media screen and (min-width: 1711px) {
            .min-data-input { margin-top: 300px; }
        }
        @media screen and (max-width:1710px) {
            .min-data-input { margin-top: 210px; }
        }
    }
}
</style>

<style lang="scss">
.predicedb-chart-wrap{
    .range-cont {
        .el-input--mini .el-input__inner {
            padding: 0 2px;
        }
    }
}
</style>