<script setup>
import {apiChartIsCollect,apiChartCollectCancel,apiChartCollect,apiMyChartClassifyList,apiMyChartRelateClassify,apiMyChartClassifyAdd} from '@/api/hzyb/chart'
import { reactive, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { Toast, Popup,Dialog } from 'vant'
const VanDialog = Dialog.Component;

const route=useRoute()

const props = defineProps({
  code: String,
  myChartInfo:Object,
  isNodata:{
      type:Boolean,
      default:false
  }
})

watch(
    ()=>props.code,
    (n)=>{
        if(n){
            getIsCollect()
        }
    },
    {
        immediate:true
    }
)

let isCollect=ref(false)
async function getIsCollect(){
    const res=await apiChartIsCollect({
        unique_code:props.code,
        authorization:route.query.token
    })
    if(res.code==200){
        isCollect.value=res.data
    }
}

function handleCollectStatusChange(){
    if(isCollect.value){
        collectChartCancel()
    }else{
        collectChart()
    }
}

// 收藏
async function collectChart(){
    const res=await apiChartCollect({
        unique_code:props.code,
        authorization:route.query.token,
        report_id:props.myChartInfo.report_id,
        report_chapter_id:props.myChartInfo.report_chapter_id
    })
    if(res.code===200){
        Toast('收藏成功')
        isCollect.value=true
        props.myChartInfo.my_chart_id=res.data
    }
}

//取消收藏
async function collectChartCancel(){
    const res=await apiChartCollectCancel({
        unique_code:props.code,
        authorization:route.query.token
    })
    if(res.code===200){
        Toast('取消收藏成功')
        isCollect.value=false
    }
}

let showTrans=ref(false)
function handleShowTrans(type){
    if(!isCollect.value){
        Toast('您已经取消收藏,不可操作转移')
        return
    }
    if(type==='mobile'){
        showTrans.value=true
    }else{
        // pc端转移
        window.parent.postMessage({
            opt:'pcShowTransClassify',
            myChartId:props.myChartInfo.my_chart_id,
            classifyId:props.myChartInfo.my_chart_classify_id||0
        },"*")
    }
    transData.selectId=props.myChartInfo.my_chart_classify_id||0
    getClassify()
}

//获取分类数据
let transData=reactive({
    list:[],
    selectId:0
})
async function getClassify(){
    const res=await apiMyChartClassifyList()
    if(res.code===200){
        transData.list=res.data||[]
    }
}

//添加分类
let showAdd=ref(false)
let inputClassifyVal=ref('')
async function handleConfirmAdd(){
    if(!inputClassifyVal.value){
        Toast('请输入分类名称')
        return
    }
    const res=await apiMyChartClassifyAdd({
        classify_name:inputClassifyVal.value
    })
    if(res.code===200){
        Toast.success('新增成功')
        showAdd.value=false
        inputClassifyVal.value=''
    }
}


// 确定转移
async function handleTrans(){
    if(transData.list.length===0){
        showAdd.value=true
        showTrans.value=false
        return
    }
    if(!transData.selectId){
        Toast('请选择分类')
        return
    }
    const res=await apiMyChartRelateClassify({
        my_chart_id:props.myChartInfo.my_chart_id,
        classify_id:transData.selectId
    })  
    if(res.code===200){
        Toast('设置成功')
        props.myChartInfo.my_chart_classify_id=transData.selectId
        showTrans.value=false
    }else{
        Toast(res.msg)
    }
}

window.addEventListener('message',e=>{
    // 监听转移了分类
    if(e.data.opt=="updateClassifyId"){
        props.myChartInfo.my_chart_classify_id=e.data.id
    }
})


</script>

<template>
    <div v-if="props.isNodata" style="text-align:center">
        <span 
            @click="handleCollectStatusChange"
            v-if="isCollect"
            style="font-size:14px;display:inline-block;background:#E3B377;color:#fff;margin-top:20px;padding:8px 14px;border-radius:4px;line-height:1"
        >取消收藏</span>
    </div>
    <div class="collect-box" v-else>
        <span 
            @click="handleCollectStatusChange"
            :style="{color:isCollect?'#999999':'#E3B377'}"
        >{{isCollect?'取消收藏':'收藏'}}</span>
        <span class="trans" @click="handleShowTrans('mobile')">设置分类</span>
        <span class="trans-pc" @click="handleShowTrans('pc')">设置分类</span>
    </div>

    <!-- 转移弹窗移动端 -->
    <Popup
        v-model:show="showTrans"
        position="bottom"
        closeable
    >   
        <div class="mobile-trans-box">
            <div class="label">设置分类</div>
            <div v-if="transData.list.length==0" style="line-height:250px;text-align:center">暂无分类，请先添加分类！</div>
            <div class="list" v-else>
                <div 
                    :class="['item',item.my_chart_classify_id==transData.selectId?'active':'']" 
                    v-for="item in transData.list" 
                    :key="item.my_chart_classify_id"
                    @click="transData.selectId=item.my_chart_classify_id"
                >{{item.my_chart_classify_name}}</div>
            </div>
            <div class="btn" @click="handleTrans">确定</div>
        </div>
    </Popup>

    <!-- 添加分类弹窗 -->
    <van-dialog 
        v-model:show="showAdd" 
        title="添加分类" 
        show-cancel-button
        confirm-button-text="确定"
        @cancel="showAdd=false"
        @confirm="handleConfirmAdd"
    >
        <input class="add-input" v-model="inputClassifyVal" maxlength="10" type="text" placeholder="请输入分类名称">
        <p style="color:#999;padding-left:10%;margin-bottom:40rpx;font-size:12px">注：字数控制在10个字以内！</p>
    </van-dialog>
</template>

<style lang="scss" scoped>
.collect-box{
    padding: 20px 34px;
    span{
        margin-right: 60px;
        vertical-align: middle;
    }
    .trans{
        color: #E3B377;
        &::before{
            content: '';
            display: inline-block;
            width: 26px;
            height: 26px;
            background-image: url('@/assets/hzyb/chart/transf.png');
            background-size: cover;
            vertical-align: middle;
            margin-right: 5px;
        }
    }
    .trans-pc{
        display: none;
    }
}
@media (min-width: 768px){
    .collect-box{
        padding: 0;
        font-size: 16px;
        span{
            cursor: pointer;
            margin-right: 30px;
        }
    }
    .trans{
        display: none;
    }
    .trans-pc{
        display: inline-block !important;
        color: #E3B377;
        &::before{
            content: '';
            display: inline-block;
            width: 18px;
            height: 18px;
            background-image: url('@/assets/hzyb/chart/transf.png');
            background-size: cover;
            vertical-align: middle;
            margin-right: 5px;
        }
    }
}

.mobile-trans-box{
    padding-top: 27px;
    .label{
        text-align: center;
        font-size: 32px;
        font-weight: 500;
        padding-bottom: 40px;
    }
    .list{
        height: 40vh;
        overflow-y: auto;
        padding: 0 34px;
        .item{
            padding: 24px;
            border-bottom: 1px solid #ededed;
        }
        .active{
            color: #E3B377;
        }
    }
    .btn{
        background-color: #333;
        color: #E3B377;
        text-align: center;
        line-height: 80px;
        letter-spacing: 4px;
    }
}


.add-input{
    display: block;
    width: 80%;
    background: #F7F8FA;
    border-radius: 8px;
    padding: 20px;
    margin: 30px auto 10px auto;
    border: none;
}
</style>