<script setup>
import { ref, reactive, onMounted } from 'vue'
import {useRoute, useRouter,onBeforeRouteUpdate} from 'vue-router'
import chartBox from '../chart/component/chartBox.vue'
import {
    apiGetbaseEdbInfo,apiGetpredictEdbInfo,apiGetCalendarEventList
} from '@/api/hzyb/forexCalendar.js'
import {setSplineOpt,setOptions} from '../hooks/chartBase'
/**
 * 外汇日历详情
        传入参数：
            选中的指标
            月份的起始日期，结束日期
        获取所有事项
        找到带指标的事项，设置初始索引为选中的指标在所有指标事项中的位置
        切换上下张切换索引，当到达第一张/最后一张时，循环这个列表
 */
const route=useRoute()
let EdbList = ref([])
let currentEdbIndex=ref(0) //当前展示的指标索引
let currentEdbId=ref('') //当前展示的指标id
let chartData=ref({
    series:[],
    xAxis:[],
    yAxis:[],

})// 图表配置数据
let resData=ref({
    EdbInfo:{}
})//接口详情数据
let pageBoxPosition=reactive({
    top:window.innerHeight-165,
    left:window.innerWidth-50,
    temTop:0,
    temLeft:0,
})
localStorage.setItem('hzyb-token',route.query.token)

function pageChange(type){
    const length = EdbList.value.length
    if(type==='before'){
        if(currentEdbIndex.value===0){
            currentEdbIndex.value = length-1
        }else{
            currentEdbIndex.value = currentEdbIndex.value - 1
        }
    }else{
        if(currentEdbIndex.value===length-1){
            currentEdbIndex.value = 0
        }else{
            currentEdbIndex.value = currentEdbIndex.value + 1
        }
    }
    currentEdbId.value = EdbList.value[currentEdbIndex.value].edbInfoId
    getEdbDetail()
}
const pageTouchmove=(e)=>{
    const touchObj=e.touches[0]
    let top=touchObj.clientY-82
    let left=touchObj.clientX-25
    if(left<=0){
        left=0
    }
    if(left>window.innerWidth-50){
        left=window.innerWidth-50
    }
    if(top<=0){
        top=0
    }
    if(top>window.innerHeight-115){
        top=window.innerHeight-115
    }

    pageBoxPosition.top=top
    pageBoxPosition.left=left

    event.preventDefault();//阻止页面移动
}

//获取当月指标列表
async function getEdbList(){
    const {startDate,endDate,edbInfoId,permissionId,permissionName} = route.query
    document.title = startDate.slice(0,-3)+permissionName+'事项详情'
    await apiGetCalendarEventList({
        chart_permission_id:Number(permissionId),
        start_date:startDate,
        end_date:endDate
    }).then(res=>{
        if(res.code!==200) return 
        let events = (res.data?res.data:[]).map(dailyEvents=>{
            return dailyEvents.matters
        })
        events = events.flat().filter(e=>e.matter_type!==1).map(e=>{
            return {
                edbInfoId:e.edb_info_id,
                matterType:e.matter_type
            }
        })
        EdbList.value = events
        currentEdbId.value = Number(edbInfoId)
        const eventIndex = events.findIndex(e=>e.edbInfoId===Number(edbInfoId))
        currentEdbIndex.value = eventIndex>=0?eventIndex:0
        getEdbDetail()
    })
}
getEdbList()

function capitalizeFirstLetter(obj) {
  return Object.keys(obj).reduce((acc, key) => {
    const capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
    acc[capitalizedKey] = obj[key];
    return acc;
  }, {});
}
async function getEdbDetail(){
    const res = EdbList.value[currentEdbIndex.value].matterType===2
                ?await apiGetbaseEdbInfo({edb_info_id:currentEdbId.value})
                :await apiGetpredictEdbInfo({edb_info_id:currentEdbId.value})
    resData.value=res.data
    //由于EdbInfo大小写命名和后台不一致，重新整一份
    const EdbInfo = capitalizeFirstLetter(res.data.EdbInfo)
    const edbData = {
        DataList:res.data.DataList||[],
        EdbInfo:{
            ...EdbInfo,
            ChartColor:'',
            ChartStyle:'',
            PredictChartColor:'',
            ChartType:0,
            ChartWidth:3,
            MaxData:res.data.EdbInfo.maxValue,
            MinData:res.data.EdbInfo.minValue,
            EdbInfoCategoryType:1,
            EdbInfoType:0,
            IsAxis:1,
        }
    }

    chartData.value = EdbList.value[currentEdbIndex.value].matterType===2
                      ? setOptions(res.data.DataList||[],EdbInfo)
                      : setSplineOpt([{
                            ...edbData.EdbInfo,
                            DataList:res.data.DataList||[]
                            }],
                            {value:{ChartInfo:{ChartType:1}}}
                        )
}
</script>

<template>
    <div class="edb-detail-wrap">
        <div class="edb-title">{{resData.EdbInfo.edbName}}</div>
        <chartBox :options='chartData' :chartInfo="{ChartType:1}" :showTitle="false"></chartBox>
        <!-- 上一张下一张图切换 -->
        <div 
            class="change-page-wrap" 
            :style="{left:pageBoxPosition.left+'px',top:pageBoxPosition.top+'px'}"
            @touchmove.stop="pageTouchmove"
            @touchstart.stop=""
        >
            <div class="top" @click.stop="pageChange('before')"></div>
            <div class="bot" @click.stop="pageChange('next')"></div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.edb-detail-wrap{
    .edb-title{
        padding: 40px 34px 20px 34px;
        font-size: 32px;
        font-weight: bold;
        color: #1F243A;
        letter-spacing: 2px;
        @media (min-width: 768px){
            padding: 0px 0 20px 0;
            font-size: 18px;
        }
    }
    .change-page-wrap{
        position: fixed;
        right: 0;
        bottom: 50px;
        width: 50PX;
        height: 115PX;
        background-image: url('../../../assets/hzyb/chart/before-next.png');
        background-size: cover;
        z-index: 10;
        .top,.bot{
            height: 50%;
        }

    }
}
</style>
