<script setup>
import {ref,onMounted,watch } from 'vue'
import { Popup } from 'vant';
import Highcharts from 'highcharts';
import HighchartsMore from 'highcharts/highcharts-more'
import HighchartszhCN  from '../../../utils/highcahrts-zh_CN'
import { useRoute } from 'vue-router';
HighchartszhCN(Highcharts)
HighchartsMore(Highcharts)

const route=useRoute()

// 是否为pc端展示
const isPcShow=ref(route.query.showType||'')

const props=defineProps({
    keyVal:String,
    data:Object
})

//配色表
const colorMap=new Map([
    ['buy_list',['#FFD600','#F32F2F','#52D424']],
    ['sold_list',['#C6DDFF','#363EFF','#52D424']],
    ['clean_buy_list',['#FFD600','#F32F2F','#52D424']],
    ['clean_sold_list',['#C6DDFF','#363EFF','#52D424']],
])
//图表默认配置项
const chartDefaultOpts={
    chart: {
		type: 'column',
        inverted:true,//xy轴换位置
        marginRight:85
	},
    title: {
		text:''
	},
    //版权信息
	credits: {enabled:false},
    plotOptions:{
        column: {
            pointPadding: 0,
			stacking: 'normal',
            dataLabels: {
                enabled: true,
                align: 'right',
                color: '#333',
                inside:false,
                crop:false,
                overflow:true,
                x:80,
                formatter:function(e){
                    return this.point.options.isLabel
                }
            },
            events: {
                click: function (event) {
                    const name=event.point.category
                    showDetail(name)
                }
            }
        },
    },
    legend: {
		enabled: false,//关闭图例
	},
    tooltip: {
        enabled: false
    },

}


//绘图
function chartRender(){
    let options={}
    let categories=[]
    let series=[
        {
            name: '总数',
            data: [],
        },
        {
            name: '增长',
            data: [],
        },
        {
            name:'减少',
            data:[]
        },
    ]
    let totalArr=[],increaseArr=[],reduceArr=[];
    props.data.list.forEach((item,index)=>{
        categories.push(item.deal_short_name)
        // 处理series
        if(item.deal_change<0){//减少
            totalArr.push({y:item.deal_value})
            increaseArr.push({y:0})
            reduceArr.push({y:-item.deal_change,isLabel:`${item.deal_value}/${item.deal_change}`})
        }else{
            totalArr.push({y:item.deal_value-item.deal_change})
            reduceArr.push({y:0})
            increaseArr.push({y:item.deal_change,isLabel:`${item.deal_value}/+${item.deal_change}`})
        }

    })
    series[0].data=totalArr
    series[1].data=increaseArr
    series[2].data=reduceArr
    let xAxis={
        categories: categories,
        tickWidth:1,
        tickPosition:'outside',
    }
    let yAxis={
        opposite:true,
        gridLineWidth: 1,
        gridLineColor:'#E4E4E4',
        gridLineDashStyle: 'longdash',
        endOnTick: false,
        showLastLabel: true,
        lineWidth: 1,
        tickWidth:1,
        tickPosition:'outside',
        title: {
          text: '',
        },
        reversedStacks: false
    }
    
    options.colors=colorMap.get(props.keyVal)
    options.xAxis=xAxis
    options.yAxis=yAxis
    options.series=series
    options={...chartDefaultOpts,...options}
    // console.log('渲染',options);
    Highcharts.chart(`chart-box-${props.keyVal}`,options)
}


//点击柱子显示弹窗
let showDetailPop=ref(false)
let showDetailData=ref(null)
function showDetail(name){
    let data={}
    props.data.list.forEach(item=>{
        if(item.deal_short_name===name){
            data=item
        }
    })
    // 判断是否是在pc中 如果是则通知pc显示弹窗
    // console.log(window.innerWidth);
    if(isPcShow.value=='pc'){
        window.parent.postMessage({
            opt:'showDetail',
            data:JSON.stringify({...data,type_name:props.data.name})
        },"*")
        return
    }
    showDetailData.value=data
    showDetailPop.value=true
}


onMounted(()=>{
    watch(
        ()=>props.data,
        (n)=>{
            if(n.list){
                chartRender()
            }
        },
        {
            deep:true,
            immediate:true
        }
    )
})


</script>

<template>
    <div :class="['chart-render-box',isPcShow?'chart-render-box-pc':'']">
        <div class="label-box">
            <div>
                <span class="color-box" :style="{background:colorMap.get(keyVal)[0]}"></span>
                <span>{{data.labelName}}</span>
            </div>
            <div>
                <span class="color-box" :style="{background:colorMap.get(keyVal)[1]}"></span>
                <span>增</span>
            </div>
            <div>
                <span class="color-box" :style="{background:colorMap.get(keyVal)[2]}"></span>
                <span>减</span>
            </div>
        </div>
        <div class="chart-content">
			<img class="mark-img" src="../../../../../assets/hzyb/chart/mark.png" alt="">
			<div class="chart-box" :id="'chart-box-'+keyVal"></div>
		</div>
        
    </div>
    <!-- 详情弹窗 -->
    <Popup 
        v-model:show="showDetailPop"
        round
    >
        <div class="mobile-detail-pop-wrap">
            <h2 class="title">{{showDetailData.deal_short_name}}</h2>
            <div class="table-box">
                <div class="item">
                    <div>持{{data.name}}</div>
                    <div>{{showDetailData.deal_value}}</div>
                </div>
                <div class="item">
                    <div>增减</div>
                    <div>{{showDetailData.deal_change}}</div>
                </div>
                <div class="item">
                    <div>占比</div>
                    <div>{{(showDetailData.rate*100).toFixed(2)}}%</div>
                </div>
                <div class="item">
                    <div>前{{showDetailData.rank}}名持净多单</div>
                    <div>{{showDetailData.before_all_value}}</div>
                </div>
                <div class="item">
                    <div>增减</div>
                    <div>{{showDetailData.before_all_change}}</div>
                </div>
                <div class="item">
                    <div>占比</div>
                    <div>{{(showDetailData.before_all_rate*100).toFixed(2)}}%</div>
                </div>
            </div>
            <div class="close-btn" @click="showDetailPop=false">关闭</div>
        </div>
    </Popup>
</template>

<style lang="scss" scoped>
.chart-render-box{
    width: 100%;
    overflow: hidden;
    .label-box{
        display: flex;
        justify-content: center;
        div{
            margin-right: 30px;
        }
        .color-box{
            display: inline-block;
            width: 22px;
            height: 22px;
            margin-right: 10px;
            border-radius: 4px;
        }
    }
    .chart-content{
        width: 100%;
        height: 70vh;
        position: relative;
		.mark-img{
			position: absolute;
			width: 58%;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			pointer-events: none;
			z-index: 2;
		}
        .chart-box{
            width: 100%;
            height: 100%;
        }
    }
}
.mobile-detail-pop-wrap{
    width: 90vw;
    .title{
        text-align: center;
        font-size: 32px;
        padding: 30px;
    }
    .table-box{
        display: flex;
        flex-wrap: wrap;
        .item{
            width: 33.33%;
            text-align: center;
            padding: 30px 20px;
            border-right: 1px solid #E5E5E5;
            border-bottom: 1px solid #E5E5E5;
            div:first-child{
                color: #999999;
                font-size: 24px;
            }
            div:last-child{
                font-size: 32px;
                font-weight: 600;
            }
        }
        

    }
    .close-btn{
        text-align: center;
        line-height: 96px;
        color: #E3B377;
    }
}
// @media (min-width: 600px){
    .chart-render-box-pc{
        .label-box{
            display: flex;
            justify-content: center;
            font-size: 14PX;
            div{
                margin-right: 20PX;
            }
            .color-box{
                display: inline-block;
                width: 14PX;
                height: 14PX;
                margin-right: 8PX;
                border-radius: 4PX;
                position: relative;
                top: 2PX;
            }
        }
        .chart-content{
            height: 800PX;
        }
    }
// }
</style>