<script setup>
import {computed, ref} from 'vue'
import { useRoute } from "vue-router";
import {apiMyChartClassifyList,apiMyChartRelateClassify,apiMyChartClassifyAdd} from '@/api/myChart'
import { ElMessage} from 'element-plus'

const route=useRoute()

let url=ref('')

function init(){
    const queryObj={
        ChartInfoId:route.query.chartInfoId,
        chartSource: route.query.chartSource,
        chartCode:route.query.chartCode,
        source:'ybxcx_my_chart',
        classifyId:route.query.classifyId||'',
        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/detail?${queryObjStr}`
}
init()

let classifyList=ref([])
let showTrans=ref(false)
let currentClassifyId=ref(0)
let currentClassifyName=ref('')
let myChartId=0

// 获取我的分类数据
async function getMyClassifyList(){
    const res=await apiMyChartClassifyList()
    if(res.code===200){
        classifyList.value=res.data||[]
    }
}
getMyClassifyList()

//添加分类
let showAdd=ref(false)
let inputText=ref('')

async function handleConfirmAdd(){
    if(!inputText.value){
        ElMessage.warning('请填写分类名称')
        return
    }
    const res=await apiMyChartClassifyAdd({
        classify_name:inputText.value
    })
    if(res.code===200){
        ElMessage.success(`新增成功`)
        getMyClassifyList()
        showAdd.value=false
        inputText.value=''
    }
}


// 获取当前图对应的分类
// const currentClassifyItem=computed(()=>{
//     return classifyList.value.filter(e=>e.my_chart_classify_id==currentClassifyId.value)[0]
// })

window.addEventListener('message',(e)=>{
    // 监听转移分类
    if(e.data?.opt=="pcShowTransClassify"){
        currentClassifyId.value=e.data.classifyId
        myChartId=e.data.myChartId
        showTrans.value=true
        if(classifyList.value.length>0){
            classifyList.value.forEach(item=>{
                if(item.my_chart_classify_id==e.data.classifyId){
                    currentClassifyName.value=item.my_chart_classify_name
                }
            })
        }
    }
})


// 确定转移
async function handleConfirm(){
    if(!currentClassifyId)return
    const res=await apiMyChartRelateClassify({
        my_chart_id:myChartId,
        classify_id:currentClassifyId.value
    })
    if(res.code===200){
        ElMessage.success('设置成功')
        showTrans.value=false
        const target=document.getElementById('iframe')
        target.contentWindow.postMessage({opt:'updateClassifyId',id:currentClassifyId.value},"*")
    }
}
</script>

<template>
    <div class="mychart-detail-page">
        <iframe id='iframe' :src="url"></iframe>
    </div>
    <!-- 转移分类弹窗 -->
    <el-dialog
        v-model="showTrans"
        title="设置分类"
        :width="450"
        draggable
        :close-on-click-modal="false"
        append-to-body
    >
        <div class="trans-wrap">
            <div v-if="classifyList.length!==0" style="margin-bottom:20px">所属分类：{{currentClassifyName}}</div>
            <div v-if="classifyList.length==0">暂无分类，请先添加分类</div>
            <div class="list-box">
                <span 
                    :class="['item',currentClassifyId==item.my_chart_classify_id?'active':'']" 
                    v-for="item in classifyList" 
                    :key="item.my_chart_classify_id"
                    @click="currentClassifyId=item.my_chart_classify_id"
                >{{item.my_chart_classify_name}}</span>
            </div>
            <div style="text-align:center;margin:40px 0 20px 0">
                <el-button round plain size="large" style="width:100px" @click="showTrans=false">取消</el-button>
                <el-button round size="large" type="primary" style="width:100px" @click="showAdd=true" v-if="classifyList.length==0">添加</el-button>
                <el-button round size="large" type="primary" style="width:100px" @click="handleConfirm" v-else>确定</el-button>
            </div>
        </div>
    </el-dialog>
    <!-- 添加分类弹窗 -->
    <el-dialog
        v-model="showAdd"
        title="添加分类"
        :width="450"
        draggable
        :close-on-click-modal="false"
        append-to-body
    >
        <div class="add-box">
            <input v-model="inputText" type="text" placeholder="请输入分类名称" maxlength="10">
            <p style="color:#999">注：字数控制在10个字以内</p>
            <div style="text-align:center;margin:40px 0 20px 0">
                <el-button round plain size="large" style="width:100px" @click="showAdd=false,inputText=''">取消</el-button>
                <el-button round size="large" type="primary" style="width:100px" @click="handleConfirmAdd">确定</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<style lang="scss" scoped>
.mychart-detail-page{
    iframe{
        width: 100%;
        height: 800px;
        border: none;
    }
}
.trans-wrap{
    .list-box{
        .item{
            display: inline-block;
            padding: 5px 10px;
            font-size: 14px;
            background: #F4F4F5;
            border: 1px solid #E9E9EB;
            border-radius: 4px;
            margin-right: 20px;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .active{
           background: #FDF6EC;
           color: #E6A23C;
        }
    }
}
.add-box{
    input{
        width: 100%;
        display: block;
        line-height: 40px;
        border: 1px solid #DCDFE6;
        padding: 0 15px;
        box-sizing: border-box;
        border-radius: 40px;
        &:focus{
            outline: none;
        }
    }
}
</style>