<script setup>
import {nextTick, ref} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import moment from 'moment'
import { useStore } from 'vuex';

const route=useRoute()
const router=useRouter()
const store=useStore()

const selectDate=ref('')//选择的日期
const latestDate=ref('')//数据最新日期
// 周六日禁用
function disabledDate(t){
    if([5,6].includes(moment(t).weekday())){
        return true
    }else{
        return false
    }
}

// 向小程序发送消息
function sendDataToXCX(){
    const postData={
        path:'/pages/positionAnalysis/detail',
        params:{
            classify_name:route.query.classify_name,
            classify_type:route.query.classify_type,
            exchange:route.query.exchange,
        },
        title:`${route.query.classify_type} ${moment(selectDate.value).format('YYYYMMDD')}持仓`||'持仓分析',
        shareImg:''
    }
    wx.miniProgram.postMessage({ data: postData })
}

let url=ref('')
function init(){
    const queryObj={
        classify_name:route.query.classify_name,
        classify_type:route.query.classify_type,
        exchange:route.query.exchange,
        showType:'pc',
        token:localStorage.getItem('token'),
        timestamp:new Date().getTime(),//防止缓存
    }
    let queryObjStr=''
    for (const key in queryObj) {
        if(!queryObjStr){
                queryObjStr=`${key}=${queryObj[key]}`
        }else{
            queryObjStr=`${queryObjStr}&${key}=${queryObj[key]}`
        }
    }
    console.log('拼接字符串：',queryObjStr);
    url.value=`${import.meta.env.MODE==='production'?'https://details.hzinsights.com':'https://xcxh5test.hzinsights.com/xcx_h5'}/hzyb/chart/positionanalysis?${queryObjStr}`
    sendDataToXCX()
}
init()

let showDetailData=ref(null)
let showDetail=ref(false)

window.addEventListener('message',(e)=>{
    // 监听iframe高度
    if(e.data?.opt=="updateIframeHeight"){
        console.log(e.data.height);
        const iframeEl=document.getElementById('iframe')
        iframeEl.style.height=e.data.height+100+'px'
    }
    // 监听iframe重新获取数据时的参数
    if(e.data?.opt=="updateInfo"){
        console.log('重新获取数据传来了',e.data);
        selectDate.value=e.data.data_time
        latestDate.value = e.data.latestDate
        router.replace({
            query:{
                exchange:e.data.exchange,
                classify_name:e.data.classify_name,
                classify_type:e.data.classify_type
            }
        })
        setTimeout(() => {
            store.commit('modifyBreadCrumb',e.data.title)
        }, 1000)
        sendDataToXCX()
    }
    // 监听打开弹窗
    if(e.data?.opt==='showDetail'){
        console.log(e.data.data);
        showDetailData.value=JSON.parse(e.data.data)
        showDetail.value=true
    }
})

// 操作选项
function handleOpt(type){
    let obj={}
    if(type==='date'){
        obj={
            opt:type,
            val:selectDate.value
        }
    }else if(type==='beforeDate'){
        obj={
            opt:type
        }
    }else if(type==='nextDate'){
        obj={
            opt:type
        }
    }else if(type==='beforeClassifyType'){
        obj={
            opt:type
        }
    }else if(type==='nextClassifyType'){
        obj={
            opt:type
        }
    }
    const target=document.getElementById('iframe')
    target.contentWindow.postMessage(obj,"*")
}

</script>

<template>
    <div class="hasrightaside-box position-analysis-detail-page">
        <div class="content-box detail-content">
            <iframe id='iframe' :src="url"></iframe>
        </div>
        <div class="right-aside-box right-wrap">
            <div class="fix-top">
                <div class="backlist-box" @click="$router.back()">返回持仓列表</div>
                <div class="item-box">
                    <div class="lable">日期选择</div>
                    <el-date-picker
                        v-model="selectDate"
                        type="date"
                        placeholder="请选择日期"
                        value-format="YYYY-MM-DD"
                        :disabled-date="disabledDate"
                        @change="handleOpt('date')"
                    />
                </div>
                <div class="item-box">
                    <div class="lable">切换合约</div>
                    <div class="btn" @click="handleOpt('beforeClassifyType')">上一个合约</div>
                    <div class="btn" @click="handleOpt('nextClassifyType')">下一个合约</div>
                </div>
                <div class="item-box">
                    <div class="lable">切换日期</div>
                    <div class="btn" @click="handleOpt('beforeDate')">查看前一天</div>
                    <div class="btn" @click="handleOpt('nextDate')" v-if="selectDate?moment(selectDate).valueOf()<moment(latestDate).valueOf():true">查看后一天</div>
                </div>
                <div class="item-box">
                    <div class="lable">操作指南</div>
                    <div style="color:#666;font-size: 14px;line-height: 24px;">上下滑动图表，点击图表中柱体弹出详细信息。</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 详情弹窗 -->
    <el-dialog
        v-model="showDetail"
        title="详情"
        :width="500"
        draggable
        :close-on-click-modal="false"
        append-to-body
        custom-class="position-analysis-detail-page-dialog"
    >
        <div class="detail-pop-wrap">
            <h2 class="title">{{showDetailData.deal_short_name}}</h2>
            <div class="table-box">
                <div class="item">
                    <div>持{{showDetailData.type_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="showDetail=false">知道了</div>
        </div>
    </el-dialog>
</template>

<style lang="scss">
    .el-date-editor--date{
        width: 180px !important;
        .el-input__wrapper{
            background: #F6F6F6;
            border: 1px solid #EBEBEB;
            border-radius: 20px;
            height: 40px;
            box-shadow: none;
        }
    }
    .position-analysis-detail-page-dialog{
        .el-dialog__header{
            border-bottom: 1px solid #E9E9E9;
            margin-right: 0;
        }

    }
</style>

<style lang="scss" scoped>
.position-analysis-detail-page{
    min-height: calc(100vh - 410px);
    
    .detail-content{
        #iframe{
            width: 100%;
            min-height: 800px;
            border: none;
        }
    }
    .right-wrap{
        .backlist-box{
            color: #999999;
            cursor: pointer;
            vertical-align: middle;
            &::before{
                content: '';
                display: inline-block;
                width: 16px;
                height: 16px;
                background-image: url('@/assets/icon-back2.png');
                background-size: cover;
                vertical-align: middle;
                margin-right: 10px;
            }
        }
        .item-box{
            margin-top: 40px;
            .lable{
                font-size: 18px;
                margin-bottom: 20px;
                &::before{
                    content: '';
                    display: inline-block;
                    width: 3px;
                    height: 20px;
                    background-color: #F3A52F;
                    border-radius: 2px;
                    vertical-align: middle;
                    margin-right: 10px;
                }
            }
            .btn{
                width: 140px;
                height: 40px;
                background: #FFFFFF;
                border: 1px solid #F3A52F;
                border-radius: 20px;
                font-size: 16px;
                line-height: 40px;
                color: #F3A52F;
                text-align: center;
                cursor: pointer;
                margin-bottom: 20px;
            }
        }
    }
}

.detail-pop-wrap{
    .title{
        text-align: center;
        font-size: 16px;
        padding-bottom: 10px;
        margin-top: 0;
    }
    .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: 14px;
            }
            div:last-child{
                font-size: 16px;
                font-weight: 600;
            }
            
        }
        .item:nth-child(3n){
            border-right: none;
        }
        .item:nth-child(n+4){
            border-bottom: none;
        }
        

    }
    .close-btn{
        text-align: center;
        line-height: 40px;
        color: #fff;
        width: 300px;
        height: 40px;
        background: #F3A52F;
        border-radius: 41px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
        cursor: pointer;
    }
}
</style>