<script setup name="reportDetail">
import {ref} from 'vue'
import { useRoute } from "vue-router";
import apiReport from '@/api/report'
import ReportPublishPop from './components/ReportPublishPop.vue'
import AudioBox from './components/AudioBox.vue'
import { showToast,showDialog } from 'vant';
import {useCachedViewsStore} from '@/store/modules/cachedViews'
const cachedViewsStore=useCachedViewsStore()

const route=useRoute()

// 获取报告详情
let reportInfo=ref(null)
async function getReportDetail(){
    const res=await apiReport.getReportDetail({ReportId:Number(route.query.id)})
    if(res.Ret===200){
        reportInfo.value=res.Data
        document.title=res.Data.Title
    }
}
getReportDetail()


// 发布报告
const showPublishPop=ref(false)

// 取消发布
function handleReportPublishCancle(){
    showDialog({
        title: '提示',
        message: `是否确认撤销发布？`,
        showCancelButton:true
    }).then(()=>{
        apiReport.reportPublishCancle({ReportIds:Number(route.query.id)}).then(res=>{
            if(res.Ret===200){
                getReportDetail()
            }
        })
    })
}

// 发布弹窗关闭
function handlePublishPopClose(refresh){
    if(refresh){
        getReportDetail()
    }
    showPublishPop.value=false
}

// 删除报告
function handleDelReport(){
    showDialog({
        title: '提示',
        message: '删除操作不可恢复，确认删除吗？',
        showCancelButton:true
    }).then(() => {
        // on close
        apiReport.reportDel({ReportIds:Number(route.query.id)}).then(res=>{
            if(res.Ret===200){
                showToast('删除成功')
                cachedViewsStore.removeCaches('ReportList')
                setTimeout(() => {
                    router.back()
                }, 1500);
            }
        })
    }).catch(()=>{})
}

// 推送消息
function handleReportSendMsg(){
    apiReport.reportMessageSend({
        ReportId:Number(route.query.id)
    }).then(res=>{
        if(res.Ret===200){
            showToast('推送成功')
            getReportDetail()
        }
    })
}

</script>

<template>
    <div class="report-detail-page" v-if="reportInfo">
        <div class="top-stage-box">
            <span class="stage">第{{reportInfo.Stage}}期 / {{reportInfo.Frequency}}</span>
            <template v-if="reportInfo.State===1">
                <!-- 删除 -->
                <div class="btn-item red-bg" @click="handleDelReport">
                    <img src="@/assets/imgs/icon_del.png" alt="">
                </div>
                <!-- 发布 -->
                <div class="btn-item" @click="showPublishPop=true">
                    <img src="@/assets/imgs/report/icon_publish.png" alt="">
                </div>
            </template>
            <template v-if="reportInfo.State===2">
                <!-- 推送消息 -->
                <div class="btn-item" v-if="!reportInfo.MsgIsSend" @click="handleReportSendMsg">
                    <img src="@/assets/imgs/report/icon_sendmsg2.png" alt="">
                </div>
                <!-- 取消发布 -->
                <div class="btn-item red-bg" @click="handleReportPublishCancle">
                    <img src="@/assets/imgs/report/icon_publish_cancel2.png" alt="">
                </div>
            </template>
        </div>
        <h1 class="report-title">{{reportInfo.Title}}</h1>
        <div class="auth-box">
            <span>{{reportInfo.Author}}</span>
            <span>{{reportInfo.PublishTime}}</span>
        </div>
        <!-- 音频 -->
        <AudioBox :url="reportInfo.VideoUrl" v-if="reportInfo.VideoUrl"/>
        <div class="report-abstract">{{reportInfo.Abstract}}</div>
        <div class="report-html-wrap" v-html="reportInfo.Content"></div>
    </div>
    <!-- 报告发布弹窗 -->
    <van-popup 
        v-model:show="showPublishPop"
        position="center"
        round
    >
        <ReportPublishPop :reportData="reportInfo" @close="handlePublishPopClose"/>
    </van-popup> 
</template>

<style lang="scss" scoped>
.report-detail-page{
    padding: 30px 34px;
    .report-title{
        margin: 30px 0;
        font-weight: 600;
        font-size: 42px;
        line-height: 56px;
    }
    .auth-box{
        display: flex;
        justify-content: space-between;
        font-size: $font-grey;
        font-size: 36px;
        padding-bottom: 40px;
        border-bottom: 1px solid $border-color;
        margin-bottom: 40px;
    }
    .report-abstract{
        font-size: 34px;
        line-height: 54px;
        margin: 40px 0;
    }
}
.top-stage-box{
    .stage{
        display: inline-block;
        background-color: #F2F3FF;
        border-radius: 8px;
        height: 72px;
        line-height: 72px;
        padding: 0 20px;
        font-size: 28px;
    }
    .btn-item{
        float: right;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #F2F3FF;
        margin-left: 40px;
        img{
            width: 48px;
            height: 48px;
        }
    }
    .red-bg{
        background-color: #FFF2F2;
    }
}

@media screen and (min-width:$media-width){
    .report-detail-page{
        max-width: 800px;
        margin: 0 auto;
        padding: 30px;
        .report-title{
            margin: 15px 0;
            font-size: 21px;
            line-height: 28px;
        }
        .auth-box{
            font-size: 18px;
            padding-bottom: 20px;
            margin-bottom: 20px;
        }
        .report-abstract{
            font-size: 17px;
            line-height: 27px;
            margin: 20px 0;
        }
    }
    .top-stage-box{
        .stage{
            border-radius: 4px;
            height: 36px;
            line-height: 36px;
            padding: 0 10px;
            font-size: 14px;
        }
        .btn-item{
            width: 35px;
            height: 35px;
            margin-left: 20px;
            img{
                width: 24px;
                height: 24px;
            }
        }
    }
}
</style>