<script setup>
import {ref,onMounted, reactive, nextTick, computed} from 'vue'
import moment from 'moment'
import {yearSelectOpt} from '@/hooks/chart/config'
import apiDataEDB from '@/api/dataEDB'
import { useWindowSize } from '@vueuse/core'
import {chartDefaultOpts,seasonOptions} from '@/hooks/chart/config'
import lodash from 'lodash'
import Highcharts from 'highcharts/highstock';
import HighchartsFormat from 'highcharts';
import Boost from 'highcharts/modules/boost'
import HighchartszhCN  from '@/hooks/chart/highcahrts-zh_CN.js'
HighchartszhCN(Highcharts)
Boost(Highcharts)

import { useRoute } from 'vue-router'
import { showToast } from 'vant'

import {edbDataBtn,useAuthBtn} from '@/hooks/useAuthBtn'
const {checkAuthBtn} = useAuthBtn()

const { width } = useWindowSize()
const route=useRoute()

const props=defineProps({
    edbInfo:{
        type:Object,
        default:null,
        require:true
    },
    langType:{//当前显示的语言
        type:String,
        default:'zh'
    }
})

defineExpose({handleShowLimitPop,getEDBDataList,handleSaveChartLimit})

// 获取指标数据
const edbDataInfo=ref(null)
async function getEDBDataList(){
    const res=await apiDataEDB.edbDataList({
        PageSize: 3,
        CurrentIndex: 1,
        EdbInfoId:route.query.edbInfoId
    })
    if(res.Ret===200){
        edbDataInfo.value=res.Data.Item
    }
}
getEDBDataList()


const oldOptions=reactive({
    MinValue:0,
    MaxValue:0,
})
const chartInfo=ref({})
const tableData=ref([])
const options=ref({})
const limitData=reactive({
    leftMin: 0,
	leftMax: 0,
	rightMin: 0,
	rightMax: 0,
})

//同比，环比，环差，超季节性、 残差只展示基础图
const isOnlyShowBaseChart=computed(()=>{
    return [6,12,13,35,37].includes(chartInfo.value.Source)
})

// 渲染图
function renderChart(){
    const chartRenderOpt={...chartDefaultOpts,...options.value}
    console.log(chartRenderOpt);
    //stock不支持线形图只支持时间图 某些用chart
    let is_linear = options.value.series 
    ? options.value.series.every(_ => _.type === 'scatter') || options.value.series.some(_ => _.chartType === 'linear')
    : false ;
    is_linear ?Highcharts.chart('chart-box',chartRenderOpt) : Highcharts.stockChart('chart-box',chartRenderOpt);
}

//查询范围为1年内 x轴显示为月/日 否则默认年/月
function xTimeDiffer(){
    const end_date =
        selectYear.value === 5
          ? selectEndDate.value
          : selectYear.value === 6
          ? new Date()
          : '';
    //年限差
    const year_differ = moment(end_date).diff(
        moment(selectStartDate.value),
        'years',
        true
    );
    // console.log(year_differ)
    if ([5, 6].includes(selectYear.value) && year_differ <= 1) {
        return true;
    } else {
        return false;
    }
}

// 设置曲线图
function setLineChart(){
    let data=[],ydata=[];

    //y轴
    // 单位 中文时 为无不显示   英文时 为空提示点击输入
	// 中文不存在或等于无时 英文显示为空  中文存在且英文不存在时 显示'英文单位'
    let yTitleText = props.langType=='zh'?
	(chartInfo.value.Unit && chartInfo.value.Unit!='无') ? chartInfo.value.Unit:'':
	!chartInfo.value.UnitEn && chartInfo.value.Unit && chartInfo.value.Unit!='无' ? '英文单位':chartInfo.value.UnitEn
	// title样式  英文为空时，提示文字样式  英文可以点击设置
    let yTitleStyle = {}
    if(props.langType=='en'){
		yTitleStyle.cursor='pointer'
		if(yTitleText=='英文单位'){
			yTitleStyle.color="#999"
		}
	}
    let yItem = {
		title: {
			text: yTitleText,
			align: 'high',
			rotation: 0,
			y: -15,
			offset: 0,
			style:yTitleStyle
		},
		labels: {
			formatter: function (ctx) {
				return ctx.value;
			},
			align: 'center',
		},
		min: Number(chartInfo.value.MinValue),
		max: Number(chartInfo.value.MaxValue),
		...seasonOptions.yAxis,
	};

    // 图例名称和图例文字样式
	let dataName = props.langType=='zh'?chartInfo.value.EdbName:chartInfo.value.EdbNameEn?chartInfo.value.EdbNameEn:'无英文名称'
	let color = props.langType=='en'&&(!chartInfo.value.EdbNameEn)?'#999':'#333'
	let legend={
		...chartDefaultOpts.legend,
		itemStyle: {
			color
		},
	}
    //数据列
	let obj = {
		data: [],
		type: 'spline',
		yAxis: 0,
		name: dataName,
		lineWidth: 3
	};
    tableData.value.forEach((item, index) => {
		obj.data.push([item.DataTimestamp, item.Value]);
	});
    data.push(obj);
    ydata.push(yItem);

    // 范围为1年内 x轴显示为月/日 否则默认年/月
    let xAxis = {};
    const bool_time = xTimeDiffer();
    if(bool_time){
        xAxis={
            ...chartDefaultOpts.xAxis,
            labels: {
              formatter: function (ctx) {
                return HighchartsFormat.dateFormat('%m/%d', ctx.value);
              },
            },
        }
    }else{
        xAxis={
            ...chartDefaultOpts.xAxis,
			labels: {
                formatter: function (ctx) {
                    return HighchartsFormat.dateFormat('%y/%m', ctx.value);
                },
            },
        }
    }

    options.value={
        series: data,
        yAxis: ydata,
        xAxis,
        legend
    }
    // 如果是渲染同比图要先获取曲线图数据然后再获取同比图数据再渲染图
    if(chartType.value==='同比图'){
        getEDBTBChartData()
    }else{
        nextTick(()=>{
            renderChart()
        })
    }
}

//设置同比图
function setTBChart(data){
    const { DataList,EdbInfo } = data;
    if(!limitData.rightMin && !limitData.rightMax) {
		limitData.rightMin = Number(EdbInfo.MinValue);
		limitData.rightMax = Number(EdbInfo.MaxValue);
	}
    options.value.yAxis.push({
        title: {
			text: '',
			align: 'high',
			rotation: 0,
			y: -15,
			offset: 0
		},
		labels: {
			formatter: function (ctx) {
				return ctx.value;
			},
			align: 'center',
		},
		min: Number(limitData.rightMin),
		max: Number(limitData.rightMax),
		...seasonOptions.yAxis,
		opposite: true,
    })
    options.value.series.push({
		data: DataList.map(item=>([item.DataTimestamp, item.Value])),
		type: 'spline',
		yAxis: 1,
		name: props.langType=='zh'?`${EdbInfo.EdbName}同比`:EdbInfo.EdbNameEn?`${EdbInfo.EdbNameEn}同比`:'无英文名称',
		lineWidth: 1
	})
    nextTick(()=>{
        renderChart()
    })
}

//设置季节性图
function setSeasonChart(){
    let seasonYdata = [],seasonData = [];
    /* 公历数据处理 处理数据列 y轴 */
    if (calendarType.value === '公历'){
        for (let j of tableData.value) {
            let serie_item = {
                data: [],
                type: 'spline',
                yAxis: 0,
                name: j.Year,
            };
            const data_array = j.DataList||[];
            data_array.forEach((item) => {
                serie_item.data.push([item.DataTimestamp, item.Value]);
            });
            const index = tableData.value.findIndex((item) => item.Year === j.Year);
            const s_yItem = {
                labels: {
                    formatter: function () {
                        let val = this.value;
                        return index !== 0 ? '' : val;
                    },
                    align: 'center',
                },
                title: {
                    text:  props.langType=='zh'?chartInfo.value.Unit:
                                    !chartInfo.value.UnitEn && chartInfo.value.Unit && chartInfo.value.Unit!='无' ? '英文单位':chartInfo.value.UnitEn,
                    align: 'high',
                    rotation: 0,
                    y: -15,
                    offset: -(12 * chartInfo.value.Unit.length),
                },
                max: Number(chartInfo.value.MaxValue),
                min: Number(chartInfo.value.MinValue),
                ...seasonOptions.yAxis,
            };
            seasonData.push(serie_item);
            seasonYdata.push(s_yItem);
        }
    }

    /* 农历数据处理  */
    let filterArr =calendarType.value === '农历'?tableData.value.List.filter((item, index) => index > 0):[]
    if (calendarType.value === '农历'){
        for (let j of filterArr) {
            let serie_item = {
                data: [],
                type: 'spline',
                yAxis: 0,
                name: j.Year
            };
            const data_array =j.Items||[];
            data_array.forEach((item) => {
                serie_item.data.push([item.DataTimestamp, item.Value]);
            });
            const index = filterArr.findIndex((item) => item.Year === j.Year);
            const s_yItem = {
                labels: {
                    formatter: function () {
                        let val = this.value;
                        return index !== 0 ? '' : val;
                    },
                    align: 'center',
                },
                title: {
                    text:  props.langType=='zh'?chartInfo.value.Unit:
                                    !chartInfo.value.UnitEn && chartInfo.value.Unit && chartInfo.value.Unit!='无' ? '英文单位':chartInfo.value.UnitEn,
                    align: 'high',
                    rotation: 0,
                    y: -15,
                    offset: -(12 * chartInfo.value.Unit.length),
                },
                max: Number(chartInfo.value.MaxValue),
                min: Number(chartInfo.value.MinValue),
                ...seasonOptions.yAxis,
            };
            seasonData.push(serie_item);
            seasonYdata.push(s_yItem);
        }
    }

    /* x轴显示月日  提示框显示月日*/
    let xAxis={
        labels:{
            formatter: function () {
                return HighchartsFormat.dateFormat('%m/%d', this.value);
            },
        }
    }
    const tooltip = {
        ...chartDefaultOpts.tooltip,
        dateTimeLabelFormats: {
            // 时间格式化字符
            day: '%m/%d',
            week: '%m/%d',
            month: '%m/%d',
            year: '%m/%d',
        },
        xDateFormat: '%m/%d',
    }
    let rangeSelector ={}
    if(calendarType.value==='农历'){
        rangeSelector={
            enabled: true,
            selected: 0,
            inputStyle: {
                display: 'none',
            },
            labelStyle: {
                display: 'none',
            },
            buttonTheme: {
                style: {
                    display: 'none',
                },
            },
            buttons: [
                {
                    type: 'month',
                    count: 12,
                    text: '12月',
                },
                {
                    type: 'month',
                    count: 15,
                    text: '15月',
                },
                {
                    type: 'all',
                    text: '全部',
                    type: 'all',
                },
            ],
        }
    }else{
        rangeSelector={enabled: false,}
    }
    options.value={
        colors:calendarType.value === '公历'
            ? seasonOptions.colors.slice(-tableData.value.length)
            : seasonOptions.colors.slice(-filterArr.length),
        series: seasonData,
        yAxis: seasonYdata,
        xAxis:xAxis,
        rangeSelector,
        tooltip
    }
    nextTick(()=>{
        renderChart()
    })
}

// 获取指标曲线图数据
async function getEDBLineChartData(){
    const res=await apiDataEDB.edbLineChartData({
        EdbInfoId:route.query.edbInfoId,
        DateType:selectYear.value,
        StartDate:selectStartDate.value,
        EndDate:selectEndDate.value
    })
    if(res.Ret===200){
        const { DataList,EdbInfo } = res.Data;
        // DataList 表格数据列表
		chartInfo.value = (oldOptions.MinValue || oldOptions.MaxValue) ? {
			...EdbInfo,
			MinValue:oldOptions.MinValue,
            MaxValue:oldOptions.MaxValue
		} : EdbInfo;
		tableData.value = DataList || [];
        limitData.leftMin=chartInfo.value.MinValue
        limitData.leftMax=chartInfo.value.MaxValue
        minDate = new Date(EdbInfo.StartDate)

        setLineChart()
    }
}

//获取同比图数据
async function getEDBTBChartData(){
    const res=await apiDataEDB.edbTBChartData({
        EdbInfoId:route.query.edbInfoId,
        DateType:selectYear.value,
        StartDate:selectStartDate.value,
        EndDate:selectEndDate.value
    })
    if(res.Ret===200){
        setTBChart(res.Data)
    }
}

//获取季节性图数据
async function getEDBSeasonChartData(){
    const res=await apiDataEDB.edbSeasonChartData({
        EdbInfoId:route.query.edbInfoId,
        DateType:selectYear.value,
        Calendar:calendarType.value,
        StartDate:selectStartDate.value,
        EndDate:selectEndDate.value,
        StartYear:startYear.value
    })
    if(res.Ret===200){
        const { DataList,EdbInfo } = res.Data;
        // DataList 表格数据列表
		chartInfo.value = (oldOptions.MinValue || oldOptions.MaxValue) ? {
			...EdbInfo,
			MinValue:oldOptions.MinValue,
            MaxValue:oldOptions.MaxValue
		} : EdbInfo;
		tableData.value = DataList || [];
        limitData.leftMin=chartInfo.value.MinValue
        limitData.leftMax=chartInfo.value.MaxValue
        latestDate = EdbInfo.LatestDate
        if(selectYear.value == 20){
            let latestYear = parseInt(latestDate.substring(0,4))
            selectStartDate.value = `${latestYear-startYear.value+1}-01-01`
            selectEndDate.value = `${latestYear}-01-01`
        }
        setSeasonChart()
    }
}

onMounted(() => {
    getEDBLineChartData()
})



// 图表类型
const chartTypeOpts = computed(()=>{
    let optionArr=[{name:'曲线图'}]
    if(checkAuthBtn(edbDataBtn.edbData_showChartBasis)){
        optionArr.push({name:'同比图'})
    }
    if(checkAuthBtn(edbDataBtn.edbData_switchSeason)){
        optionArr.push({name:'季节性图'})
    }
    return optionArr
})
let beforeChartType='曲线图'
const chartType=ref('曲线图')
const showChartType=ref(false)
function onChartTypeSelect(e){
    chartType.value=e.name
    if(chartType.value==='季节性图'){
        initData()
        getEDBSeasonChartData()
    }else{
        // 如果是从同比图和曲线图之间切换则不重置选项
        if(beforeChartType==='季节性图'){
            initData()
        }
        getEDBLineChartData()
    }
    showChartType.value=false
    beforeChartType=e.name
}

// 初始化选项数据
function initData(){
    console.log('init data');
    selectStartDate.value=''
    selectEndDate.value=''
    // 季节性图默认最近5年 selectYear：20代表最近几年
    selectYear.value=chartType.value==='季节性图'?20:10
    startYear.value=5
    options.value={}
    oldOptions.MinValue=0
    oldOptions.MaxValue=0
    chartInfo.value={}
    tableData.value=[]
    limitData.leftMin=0
    limitData.leftMax=0
    limitData.rightMin=0
    limitData.rightMax=0
    calendarType.value='公历'
}


// 自定义时间段数据
let minDate=new Date(1970, 0, 1)
const maxDate=new Date(2050, 11, 31)
const temStartDate=ref([moment().format('YYYY'),moment().format('MM'),moment().format('dd')])
const temEndDate=ref([moment().format('YYYY'),moment().format('MM'),moment().format('dd')])
const showSelectDate=ref(false)
const selectStartDate=ref('')
const selectEndDate=ref('')
const startYear=ref(5)
// 最新日期
let latestDate=''

function handleConfrimSelectDate(e){
    selectStartDate.value=e[0].selectedValues.join('-')
    selectEndDate.value=e[1].selectedValues.join('-')
    selectYear.value=5
    if(chartType.value==='季节性图'){
        getEDBSeasonChartData()
    }else{
        getEDBLineChartData()
    }
    showSelectDate.value=false
}

// 时间选项
const yearOpts=ref([{name: '全部',value:10},...yearSelectOpt])
const selectYear=ref(10)
function handleSelectYearChange(e){
    selectStartDate.value=''
    selectEndDate.value=''
    selectYear.value=e.value
    getEDBLineChartData()
}

//季节性图公历农历切换
const calendarType=ref('公历')
function handleSeasonTypeChange(e){
    calendarType.value=e
    getEDBSeasonChartData()
}

//调整上下限
const showLimitPop=ref(false)
const temLimitData=reactive({
    leftMin: 0,
	leftMax: 0,
	rightMin: 0,
	rightMax: 0,
})
function handleShowLimitPop(){
    temLimitData.leftMin=limitData.leftMin
    temLimitData.leftMax=limitData.leftMax
    temLimitData.rightMin=limitData.rightMin
    temLimitData.rightMax=limitData.rightMax
    showLimitPop.value=true
}
function handleConfirmLimitChange(){
    limitData.leftMin=temLimitData.leftMin
    limitData.leftMax=temLimitData.leftMax
    limitData.rightMin=temLimitData.rightMin
    limitData.rightMax=temLimitData.rightMax
    options.value.yAxis[0].min=limitData.leftMin
    options.value.yAxis[0].max=limitData.leftMax
    if(chartType.value==='同比图'){
        options.value.yAxis[1].min=limitData.rightMin
        options.value.yAxis[1].max=limitData.rightMax
    }
    renderChart()
    showLimitPop.value=false
}

async function handleSaveChartLimit(){
    const res=await apiDataEDB.edbChartInfoSave({
        EdbInfoId:Number(route.query.edbInfoId),
        MaxValue:limitData.leftMax,
        MinValue:limitData.leftMin
    })
    if(res.Ret===200){
        showToast('保存成功')
    }
}

</script>

<template>
    <div class="edb-chart-detail-page">
        <div class="top-filter-box">

            <!-- 选择日期 -->
            <div class="select-date-box" @click="showSelectDate=true">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
                    <path d="M20 6H12L12 3H10L10 6H6C4.89543 6 4 6.89543 4 8V26C4 27.1046 4.89543 28 6 28H26C27.1046 28 28 27.1046 28 26V8C28 6.89543 27.1046 6 26 6H22V3H20L20 6ZM10 10L12 10L12 8H20L20 10L22 10V8H26V12H6V8H10L10 10ZM6 14H26V26H6L6 14Z" fill="#999999"/>
                </svg>
                <span :style="{color:!selectStartDate?'#999':'#333'}">{{selectStartDate||'开始日期'}}</span>
                <span style="display:inline-block;margin:0 5px">-</span>
                <span :style="{color:!selectEndDate?'#999':'#333'}">{{selectEndDate||'结束日期'}}</span>
            </div>
            <!-- 图类型切换 -->
            <div class="chart-type-box" @click="showChartType=true" v-if="!isOnlyShowBaseChart">
                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
                    <path d="M2.50049 11.9999L26.0165 11.9999L18.3281 4.50217L19.7244 3.07031L29.0668 12.181C29.7475 12.8447 29.2776 13.9999 28.3268 13.9999L2.50049 13.9999V11.9999Z" fill="#0052D9"/>
                    <path d="M29.5 19.9999L6.04053 19.9999L13.6611 27.2007L12.2874 28.6544L2.94908 19.8303C2.2522 19.1718 2.71812 17.9999 3.6771 17.9999L29.5 17.9999V19.9999Z" fill="#0052D9"/>
                </svg>
                <span>{{chartType}}</span>
            </div>
        </div>
        <!-- 图表渲染区域 -->
        <div class="chart-render-box">
            <div class="chart-box" id="chart-box"></div>
        </div>
        <div class="calendar-type-box" v-show="chartType==='季节性图'">
            <span 
                :class="calendarType=='公历'?'active':''"
                @click="handleSeasonTypeChange('公历')"
            >公历</span>
            <span 
                :class="calendarType=='农历'?'active':''"
                @click="handleSeasonTypeChange('农历')"
            >农历</span>
        </div>
        <!-- 来源和作者 -->
        <div class="data-source-auth">
            <span>数据来源：{{props.edbInfo.SourceName}}</span>
            <span>作者：{{props.edbInfo.SysUserRealName}}</span>
        </div>
        <!-- 选择时间选项 -->
        <div class="select-year-box" v-if="chartType!=='季节性图'">
            <span 
                :class="['item',selectYear===item.value?'active':'']"
                v-for="item in yearOpts" 
                :key="item.value"
                @click="handleSelectYearChange(item)"
            >{{item.name}}</span>
        </div>
        <!-- 指标数据 -->
        <ul class="edb-data-list-box">
            <li class="item" v-for="item in edbDataInfo?.DataList" :key="item.DataTime">
                <span class="frequency">{{edbDataInfo.Frequency}}</span>
                <span class="time">{{item.DataTime}}</span>
                <span class="value">{{item.Value}}</span>
            </li>
        </ul>
    </div>

    <!-- 选择时间段 -->
    <van-popup 
        v-model:show="showSelectDate"
        :position="width>650?'center':'bottom'"
        :style="width>650?{ width: '400px'}:''"
        round
    >
        <div class="time-picker-wrap">
            <van-picker-group
                title="选择起始时间"
                :tabs="['开始时间', '结束时间']"
                next-step-text="下一步"
                @cancel="showSelectDate=false"
                @confirm="handleConfrimSelectDate"
            >
                <van-date-picker
                    v-model="temStartDate"
                    :min-date="minDate"
                    :max-date="maxDate"
                    :columns-type="['year','month','day']"
                />
                <van-date-picker
                    v-model="temEndDate"
                    :min-date="minDate" 
                    :max-date="maxDate"
                    :columns-type="['year','month','day']"
                />
            </van-picker-group>
        </div>
    </van-popup>

    <!-- 图表类型 -->
    <van-action-sheet 
        v-model:show="showChartType" 
        :actions="chartTypeOpts" 
        @select="onChartTypeSelect" 
    />

    <!-- 调整上下限 -->
    <van-popup 
        v-model:show="showLimitPop"
        :position="width>650?'center':'bottom'"
        round
        closeable
        :style="width>650?{ width: '400px'}:''"
    >
        <div class="global-pop-wrap_mobile chart-set-limit-wrap">
            <div class="head-box">
                <div class="title">上下限设置</div>
            </div>
            <div class="content">
                <!-- 左轴 -->
                <div class="item-box">
                    <span class="lable-text">左轴</span>
                    <div class="input-box">
                        <div class="item">
                            <div class="type-text">上限</div>
                            <div class="step-box">
                                <van-stepper input-width="60px" :min="-99999999999999999" v-model.number="temLimitData.leftMax" />
                            </div>
                        </div>
                        <div class="item">
                            <div class="type-text">下限</div>
                            <div class="step-box">
                                <van-stepper input-width="60px" :min="-99999999999999999" v-model.number="temLimitData.leftMin" />
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 右轴 -->
                <div class="item-box" v-if="chartType==='同比图'">
                    <span class="lable-text">右轴</span>
                    <div class="input-box">
                        <div class="item">
                            <div class="type-text">上限</div>
                            <div class="step-box">
                                <van-stepper input-width="60px" :min="-99999999999999999" v-model.number="temLimitData.rightMax" />
                            </div>
                        </div>
                        <div class="item">
                            <div class="type-text">下限</div>
                            <div class="step-box">
                                <van-stepper input-width="60px" :min="-99999999999999999" v-model.number="temLimitData.rightMin" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bot-btn-box" @click="handleConfirmLimitChange">确定</div>
        </div>
    </van-popup>

</template>

<style lang="scss" scoped>
.edb-chart-detail-page{
    .chart-render-box{
        .chart-box{
            width: 100%;
            height: 700px;
        }
    }
}
.top-filter-box{
    padding: $page-padding;
    display: flex;
    align-items: center;
    .select-date-box{
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: $page-bg-grey;
        padding: 0 32px;
        border-radius: 12px;
        flex: 1;
        height: 72px;
        .icon{
            width: 32px;
            height: 32px;
            margin-right: 10px;
        }
    }
    .chart-type-box{
        cursor: pointer;
        margin-left: 20px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        height: 72px;
        padding: 0 16px;
        color: $theme-color;
        background-color: #F2F3FF;
        border-radius: 12px;
        .icon{
            width: 32px;
            height: 32px;
            margin-right: 10px;
        }
    }
}
.data-source-auth{
    padding: 0 $page-padding;
    display: flex;
    justify-content: space-between;
    color: $font-grey;
    margin-bottom: 20px;
}
.select-year-box{
        width: 100vw;
        position: relative;
        margin-top: 30px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
        height: 88px;
        display: flex;
        align-items: center;
        gap: 0 40px;
        overflow-y: auto;
        padding: 0 $page-padding;
        &::-webkit-scrollbar{
            height: 0;
        }
        .item{
            cursor: pointer;
            line-height: 88px;
            position: relative;
            height: 100%;
            flex-shrink: 0;
            display: inline-block;
            font-size: 32px;
            &.active{
                color: $theme-color;
                &::after{
                    content: '';
                    display: block;
                    width: 50px;
                    height: 6px;
                    border-radius: 3px;
                    background-color: $theme-color;
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }
}
.calendar-type-box{
    width: 404px;
    margin: 30px auto;
    text-align: center;
    border: 1px solid $theme-color;
    border-radius: 12px;
    overflow: hidden;
    span{
        display: inline-block;
        width: 200px;
        height: 80px;
        line-height: 80px;
        color: $theme-color;
        font-weight: bold;
        &.active{
            background-color: $theme-color;
            color: #fff;
        }
    }
}
.chart-set-limit-wrap{
    .head-box{
        .title{
            padding: 0 $page-padding;
            font-size: 36px;
            font-weight: 600;
            line-height: 120px;
        }
    }
    .bot-btn-box{
        line-height: 112px;
        text-align: center;
        color: $theme-color;
        font-size: 32px;
    }
    .content{
        padding: $page-padding;
        .item-box{
            display: flex;
            align-items: flex-end;
            margin-bottom: 30px;
            .lable-text{
                width: 100px;
            }
            .input-box{
                flex: 1;
                display: flex;
                .item{
                    flex: 1;
                    text-align: center;
                    .type-text{
                        margin-bottom: 40px;
                    }
                    .step-box{
                        display: inline-block;
                        :deep(.van-stepper){
                            display: flex;
                            justify-content: center;
                        }
                    }
                }
            }
        }
    }
}
.edb-data-list-box{
    padding: $page-padding;
    .item{
        display: flex;
        height: 86px;
        align-items: center;
        border-bottom: 1px solid $border-color;
        span{
            flex-shrink: 0;
        }
        .frequency{
            width: 150px;
        }
        .time{
            flex: 1;
        }
        .value{
            display: inline-block;
            padding: 0 10px;
            line-height: 48px;
            background-color: #F2F3FF;
            color: $theme-color;
            border-radius: 4px;
            min-width: 60px;
            text-align: center;
        }
    }
}

@media screen and (min-width:$media-width){
    .edb-chart-detail-page{
        .chart-render-box{
            .chart-box{
                height: 440px;
            }
        }
    }
    .top-filter-box{
        padding: $page-padding;
        .select-date-box{
            padding: 0 16px;
            border-radius: 6px;
            height: 48px;
            max-width: 300px;
            .icon{
                width: 20px;
                height: 20px;
            }
        }
        .chart-type-box{
            margin-left: 10px;
            height: 48px;
            padding: 0 8px;
            border-radius: 6px;
            .icon{
                width: 20px;
                height: 20px;
                margin-right: 10px;
            }
        }
    }
    .data-source-auth{
        padding: 0 $page-padding;
        margin-bottom: 10px;
    }
    .select-year-box{
        margin-top: 15px;
        height: 44px;
        gap: 0 20px;
        padding: 0 $page-padding;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
        .item{
            line-height: 44px;
            font-size: 16px;
            &.active{
                &::after{
                    width: 25px;
                    height: 3px;
                    border-radius: 3px;
                }
            }
        }
    }
    .calendar-type-box{
        width: 224px;
        margin: 20px auto;
        border-radius: 4px;
        span{
            width: 111px;
            height: 38px;
            line-height: 38px;
        }
    }
    .chart-set-limit-wrap{
            .head-box{
                .title{
                    font-size: 18px;
                    line-height: 50px;
                    padding-left: 16px;
                }
            }
            .bot-btn-box{
                font-size: 16px;
                line-height: 56px;
                border-top-width: 8px;
            }
            .content{
                max-height: 500px;
                padding: 30px;
                .item-box{
                    margin-bottom: 15px;
                    .lable-text{
                        width: 50px;
                    }
                    .input-box{
                        .item{
                            .type-text{
                                margin-bottom: 20px;
                            }
                        }
                    }
                }
            }
        }
    .edb-data-list-box{
        padding: $page-padding;
        .item{
            height: 43px;
            .frequency{
                width: 80px;
            }
            .value{
                padding: 0 5px;
                line-height: 28px;
                border: 2px;
                min-width: 40px;
            }
        }
    }
}
</style>