<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="medium"
				:plain="item.value !== year_select"
				class="year-btn"
				@click.native="changeYear(item)"
				>{{ item.name }}</el-button
			>
			<el-button 
                type="text" 
                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>
            <span class="change-chart-btn" @click="chartTypeChange">切换{{chartInfo.ChartType==1?'季节性图':'曲线图'}}</span>
        </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="上限"
                    v-model="tableData[0].MaxData"
                    @change="setChartOptionHandle(tableData)"
                />
                <el-input
                    class="min-data-input"
                    size="mini"
                    type="number"
                    placeholder="下限"
                    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
    },
    watch:{
        'edbData':{
            handler(n){
                this.handleInitData()
            },
            deep:true,
            immediate:true
        },
        // lang(n){
        //     this.changeLanguage(n)
        // }
    },
    data() {
        return {
            year_select: 10, //年份选择项 默认全部
            yearSelector: [
                {
                    name: '全部',
                    value: 10,
                },
                ...yearSelector,
            ],
            select_date: [], // 自定义时间段项
            season_year:[],//季节图日期选择

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

            /* 日期弹窗 */
            isDateDia: false, // 时间段弹窗
            dateForm: {},
            dateTip: '请选择时间段',
        }
    },
    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')
        },

        /* 保存完自定义日期 刷新数据 保存当前的图表配置和上下限 只改变图表*/
        dataChangeBack(data) {
            this.year_select = data.dateType;
            this.isDateDia = false;
            this.select_date = [data.start_date, data.end_date];

            this.dateTip =
                data.dateType === 5
                ? `${data.start_date}~${data.end_date}`
                : `${data.start_date}~至今`;

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

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

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

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

<style lang="scss" scoped>
.predicedb-chart-wrap{
    padding: 30px;
    .header {
        position: relative;
        margin-bottom: 30px;
        .year-btn {
            min-width: 90px;
            font-size: 14px;
            margin-right: 5px;
            margin-bottom: 5px;
        }
        .btn-sty {
            font-size: 16px;
            padding: 9px;
            border: 1px solid #409eff;
        }
        .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>