<script setup>
import {nextTick,ref} from 'vue'
import {useChartRender} from '@/hooks/chart/render'
import {chartInfoByCode} from './api/getData.js'
import {parseQueryString} from "./utils/index"
const {chartRender,setLimitData,isUseSelfLimit}=useChartRender()

const props=defineProps({
    src:'',
    width:'',
    height:'',
    style:''
})

// const params=reactive(parseQueryString(props.src))
const params=parseQueryString(props.src)
const chartContentEl=ref(null)
const chartBoxId=ref('')
const chartInfo=ref(null)
const dataList=ref(null)
const haveData=ref(false)
const markDom=ref(null)

const chartContainer=ref(null)
const chartFooter=ref(null)

async function getChartData(){
    if(!params.code) {
        haveData.value = false; 
        return
    } 
    try {
        const res=await chartInfoByCode({
            UniqueCode:params.code
        })
        if(res.Ret!==200) return
        chartInfo.value=res.Data.ChartInfo
        dataList.value=res.Data.ChartInfo.Source === 1 ? res.Data.EdbInfoList : [res.Data.EdbInfoList[0]];
        chartBoxId.value=`hz-chart_${params.code}_${new Date().getTime()}`

        setLangFromEnReport();
        haveData.value = true;
        //仅ETA图库图表需要初始化上下限
        if(res.Data.ChartInfo.Source===1&&![7,10,11].includes(res.Data.ChartInfo.ChartType)){
            isUseSelfLimit.value = true
            setLimitData(res.Data)
        }else{
            isUseSelfLimit.value = false
        }
        nextTick(()=>{
            chartRender({
                data:res.Data,
                renderId:chartContentEl.value,
                lang:params.language,
                changeLangIsCheck:false,
                showChartTitle:false,
                shouldUseSelfLimit:true
            })
            res.Data.WaterMark&&(markDom.value.style.backgroundImage = `url(${res.Data.WaterMark})`)
        })
        nextTick(()=>{
            // console.log(chartContainer.value.clientWidth);
            chartFooter.value && (chartFooter.value.style.maxWidth=chartContainer.value?.clientWidth+'px')
        })
    }catch (e) {
        haveData.value = false; 
    }
}

const setLangFromEnReport=()=>{
    //来源于英文研报
    params.language = params.fromPage || params.lang || 'zh'

    // 不再校验英文是否完整
    // if(params.fromPage !== 'en') return
    // let is_name_en = chartInfo.value.ChartNameEn ? true : false;//名称是否有英文
    // let is_target_en = [2,9,10].includes(chartInfo.value.ChartType) ? true : dataList.value.every(_ => _.EdbNameEn);//指标是否有英文
    // params.language = (is_name_en && is_target_en) ? 'en' : 'ch';
    // params.language='ch'
}

getChartData()
</script>

<template>
    <div class="hz-chart-wrap" ref="chartContainer" :style="props.style+';height:'+props.height+'px'" style="margin: 0 0 10px 0;">
        <header class="hz-chart-head">
            <span 
                v-if="chartInfo"
                class="chart-title" 
                :style="chartInfo.ChartThemeStyle?`
                text-align:${JSON.parse(chartInfo.ChartThemeStyle).titleOptions.align};
                font-size:${JSON.parse(chartInfo.ChartThemeStyle).titleOptions.style.fontSize}px;
                color:${JSON.parse(chartInfo.ChartThemeStyle).titleOptions.style.color}
                `:''"
            >
                {{ params.language === 'en'?chartInfo.ChartNameEn: chartInfo.ChartName}}
            </span>
        </header>
        <div v-if="haveData" class="chart-wrapper">
            <div :id="chartBoxId" ref="chartContentEl" class="hz-chart-content"></div>
            <div class="mark" ref="markDom"></div>
        </div>
        <div class="notfound" v-else>
            哎吆，你的图飞了，赶快去找管理员救命吧~
        </div>
        <div 
        class="chart-bottom-info bootom-source"
        v-if="chartInfo?.Instructions&&JSON.parse(chartInfo?.Instructions).isShow"
        >
            <div 
                class="chart-instruction text_oneLine" 
                v-text="JSON.parse(chartInfo.Instructions).text"
                :style="`
                color: ${JSON.parse(chartInfo.Instructions).color};
                font-size: ${ JSON.parse(chartInfo.Instructions).fontSize }px
                `"
            ></div>
        </div>
        <div class="hz-chart-footer" ref="chartFooter"
        v-if="chartInfo?.SourcesFrom&&JSON.parse(chartInfo.SourcesFrom)?.isShow"
        :style="`
            color: ${ JSON.parse(chartInfo.SourcesFrom).color };
            font-size: ${ JSON.parse(chartInfo.SourcesFrom).fontSize }px;
        `"
        >
            source：<em>{{ JSON.parse(chartInfo.SourcesFrom).text}}</em>
        </div>
    </div>
</template>

<style lang="scss" scoped>
div{
    box-sizing: border-box;
}
.hz-chart-wrap{
    font:initial;
    page-break-inside: avoid;
    max-width: 1200PX;
    height: 100%;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    border: 1PX solid rgba(0,0,0,.125) !important;
    background: #fff;
    border-radius: 5PX;
    display: flex;
    flex-direction: column;
    font-family: 'PingFangSC-Regular','微软雅黑','宋体'!important;
    .hz-chart-head{
        box-sizing: border-box;
        background-color: #F2F2F2;
        border-bottom: 1px solid rgba(0, 0, 0, 0.125);
        cursor: pointer;
        min-height: 40PX;
        display: flex;
        align-items: center;
        padding: 2PX 10PX;
        .chart-title {
            width: 100%;
        }
    }
    .chart-wrapper{
        position: relative;
        display: flex;
        height: 100%;
        width: 100%;
        .hz-chart-content{
            width: 100%;
            flex: 1;
        }
        .mark{
            position:absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            background-image: none;
            background-position:center center;
            background-repeat:  no-repeat;
            background-size: contain;
            pointer-events: none;
            width: 80%;
            height: 80%;
        }
    }

    .notfound {
        flex: 1;
        overflow: hidden;
        padding: 10PX;
        color: #777;
        text-align: center;
    }
    .chart-bottom-info{
        padding-right: 10PX;
        padding-bottom: 0;
        padding-left: 25PX;
        display: flex;
        .chart-instruction {
            max-width: 80%;
            flex: 1;
            text-align: right;
            margin-left: auto;
        }
    }
    .hz-chart-footer{
        padding-left: 25PX;
        padding-right: 10PX;
        padding-bottom: 10PX;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        // 等待图表加载出来 会根据祖先元素的长度修改max-width 先定为1px防止长度太长,撑开祖先元素
        max-width: 1px;
    }
    .text_oneLine{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>