<script setup name="reportChapterList">
import {computed, nextTick, reactive, ref} from 'vue'
import { useRoute, useRouter } from "vue-router";
import { V3ColorPicker } from "v3-color-picker-teleport"
import apiReport from '@/api/report'
import { apiGetWXQRCodeImg,getSystemInfo } from '@/api/common'
import moment from 'moment';
import {Base64} from 'js-base64'
import { showToast,showDialog } from 'vant';
import { useWindowSize } from '@vueuse/core'
import {useCachedViewsStore} from '@/store/modules/cachedViews'
import {usePublicSettingStore} from '@/store/modules/publicSetting'
import ReportPublishTimeSet from '../components/ReportPublishTimeSet.vue'
import html2canvas from "html2canvas";
import {transfImgTobase64,isWeiXin} from '@/hooks/common'
import draggable from 'vuedraggable'
import {reportManageBtn,useAuthBtn} from '@/hooks/useAuthBtn'
import {useReportApprove} from '@/hooks/useReportApprove'
import AddReportBaseInfoV2 from '../components/AddReportBaseInfoV2.vue'
import EditChapterBaseInfo from './components/EditChapterBaseInfo.vue'
import ReportLayoutImg from '../smartReport/components/ReportLayoutImg.vue'
import { useReportHandles } from '../hooks/useReport'
import AudioBox from '../components/AudioBox.vue'
import {useUploadFileToOSS} from '@/hooks/useUploadFileToOSS'
import MD5 from 'js-md5'

const cachedViewsStore=useCachedViewsStore()
const publicSettingStore = usePublicSettingStore()
const { width, height } = useWindowSize()

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


const {isApprove,hasApproveFlow,getEtaConfig,checkClassifyNameArr} = useReportApprove()

const {checkAuthBtn} = useAuthBtn()

//基础信息
const showBaseInfoPop=ref(false)
//更新基本信息
let reportBaseInfoData={}
async function handleReportBaseInfoChange(e){
    reportBaseInfoData={
        ...e,
        classifyName:e.classifys,
        createtime:e.time,
    }

    reportInfo.value.Title=e.title
    reportInfo.value.Author=e.author
    reportInfo.value.Abstract=e.abstract
    reportInfo.value.CreateTime=e.createtime
    reportInfo.value.ClassifyIdFirst=e.classifys[0]?.id
    reportInfo.value.ClassifyIdSecond=e.classifys[1]?.id
    reportInfo.value.ClassifyIdThird=e.classifys[2]?.id
    reportInfo.value.ClassifyNameFirst=e.classifys[0]?.text
    reportInfo.value.ClassifyNameSecond=e.classifys[1]?.text
    reportInfo.value.ClassifyNameThird=e.classifys[2]?.text

    const classify = e.classifys.map(i=>i.id)
    checkClassifyNameArr(1,classify)
    showBaseInfoPop.value=false
}


const isCreator = computed(() => {

    let userInfo = JSON.parse(Base64.decode(localStorage.getItem('userInfo')))
    return userInfo.AdminId===reportInfo.value.AdminId || userInfo.RoleTypeCode==='admin';
})

// 获取报告详情
let reportInfo=ref(null)
const reportVarietyOpts = ref([])
const userOpts = ref([])
async function getReportDetail(){
    const res=await apiReport.getRportBase({ReportId:Number(route.query.id)})
    if(res.Ret===200){
        reportInfo.value=res.Data;
        
        reportBaseInfoData = {
            addType: res.Data.AddType,
            classifyName:[
                {
                    id:res.Data.ClassifyIdFirst,
                    text:res.Data.ClassifyNameFirst,
                },
                {
                    id:res.Data.ClassifyIdSecond,
                    text:res.Data.ClassifyNameSecond,
                },
                {
                    id:res.Data.ClassifyIdThird,
                    text:res.Data.ClassifyNameThird,
                }
            ],
            author:res.Data.Author ? res.Data.Author.split(',') : ['FICC团队'],
            createtime:moment(res.Data.CreateTime).format('YYYY-MM-DD'),
            title:res.Data.Title,
            abstract:res.Data.Abstract,
            cooperationType:res.Data.CollaborateType,
            cooperationUsers:res.Data.GrandAdminList
                ? res.Data.GrandAdminList.map(_ => ({
                    NodeId: _.AdminId,
                    NodeName: _.AdminName
                }))
                : [],
            reportLayout: res.Data.ReportLayout,
            isPublcPublish: res.Data.IsPublicPublish
        }

        reportVarietyOpts.value = res.Data.PermissionList||[];
        userOpts.value = res.Data.GrandAdminList||[];

        document.title=res.Data.ClassifyNameFirst
    }
    getChapterList()

    checkClassifyNameArr(1,[res.Data.ClassifyIdFirst,res.Data.ClassifyIdSecond,res.Data.ClassifyIdThird])
}
getReportDetail()

// 获取章节列表
let chapterList=ref([])
async function getChapterList(){
    const res=await apiReport.getChapterList({ReportId:Number(route.query.id)})
    if(res.Ret===200){
        chapterList.value=res.Data||[]
        getChapterTrendTagList()
    }
}


/* 章节操作弹窗 */
const showItemOpt = ref(false)
const activeItem = ref(null)
function handleOptChapterItem(e) {
    activeItem.value = e;
    showItemOpt.value = true
}


/* 章节信息弹窗 */
const showChapterBaseInfo = ref(false)
function handleChapterInfo(e) {
    activeItem.value = e;
    showItemOpt.value = false
    showChapterBaseInfo.value = true
}
function handleChapterBaseInfoSave() {
    getChapterList()
    showChapterBaseInfo.value = false
}


const { handlePublishReportHook,handleDSPublish,showDSFBTime } = useReportHandles()
/* 发布报告 */
async function  handlePublishReportCheck(tp) {
    //校验章节是否都已发布
    let res = await apiReport.checkChaterPublishState({
    ReportId: Number(route.query.id)
    })
    if(res.Data&&res.Data.length>0){
        let str = res.Data.map(_ =>_.Title).join('，')
        return showToast(`${str}内容未提交`)
    } 

    handlePublishReport(tp)
}

//发布 定时 提交
async function handlePublishReport(tp) {
    cachedViewsStore.removeCaches('ReportList')

    handlePublishReportHook(tp,reportInfo.value)
}


// 定时发布报告选择时间
function onConfirmDSFBTime(time){

    handleDSPublish(time,reportInfo.value)
}

/* 预览报告 */
function handlePreviewReport() {
    router.push({
        path:"/report/preview",
        query:{
            id:reportInfo.value.Id
        }
    })
}

 /* 删除章节 */
function handleDelChapter(item) {
    showItemOpt.value = false
    showDialog({
        title: '删除提示',
        showCancelButton: true,
        message: '是否确认删除该章节？',
        confirmButtonText: '确认',
        cancelButtonText: '取消', 
    }).then( async() => {
        const res = await apiReport.removeChapter({
            ReportChapterId: item.ReportChapterId
        })

        if(res.Ret!==200) return
        showToast('删除成功')
        chapterList.value.splice(chapterList.value.findIndex(_=>_.ReportChapterId===item.ReportChapterId),1)

    }).catch(() =>{})

}

/* 撤销章节 */
function handleCancelChapter(item) {
    showItemOpt.value = false
    showDialog({
        title: '提示',
        showCancelButton: true,
        message: '是否确认撤销该章节？',
        confirmButtonText: '确认',
        cancelButtonText: '取消', 
    }).then( async() => {
        const res = await apiReport.cancelChapter({
            ReportChapterId: item.ReportChapterId
        })

        if(res.Ret!==200) return
        showToast('撤销成功')
        
        let index = chapterList.value.findIndex(_=>_.ReportChapterId===item.ReportChapterId)
        chapterList.value[index].PublishState = 1;

    }).catch(() =>{})
}


/* 上传章节音频 */
// 上传音频
const showUploadAudio=ref(false)
const temAudioData=reactive({
    time:0,
    size:0,
    url:'',
})
function handleShowUploadAudio(){
    showItemOpt.value = false;
    temAudioData.time=activeItem.value.VideoPlaySeconds
    temAudioData.size=activeItem.value.VideoSize
    temAudioData.url=activeItem.value.VideoUrl
    showUploadAudio.value=true
}
// 获取音频时长
function handleGetAudioDuration(file){
    return new Promise((resolve,reject)=>{
        if(isWeiXin()){
            console.log('微信？');
            resolve(0)
        }

        const fileUrl=URL.createObjectURL(file)
        const audioEl=new Audio(fileUrl)
        audioEl.addEventListener('loadedmetadata',(e)=>{
            console.log('e.path',e.path)
            console.log('e.composedPath',e.composedPath())
            console.log('获取音频时长',e.composedPath()[0].duration);
            console.log(audioEl.duration);
            const t=e.composedPath()[0].duration
            resolve(t)
        })
    })
}
function handleAudioUploadBeforeRead(e){
    const allowedTypes = ['audio/mpeg', 'audio/mp4','audio/aac','audio/x-m4a','audio/wav']
    //由于部分安卓机的部分浏览器无法获取到文件类型，无法判断故先去除判断
    // if(!allowedTypes.includes(e.type)){
    //     showToast('上传失败，上传音频格式不正确')
    //     return false
    // }
    return true
}
async function handleAudioUploadAfterRead(e){
    // console.log(e);
    const duration=await handleGetAudioDuration(e.file)

    temAudioData.time=duration||0
    temAudioData.size=e.file.size/1024/1024 //单位MB
    temAudioData.name=e.file.name
    console.log('音频数据temAudioData',temAudioData);

    let params = new FormData();
        params.append("file", e.file);
        params.append("ReportChapterId", activeItem.value.ReportChapterId);
      const res = await apiReport.uploadChpterAudio(params)

      if(res.Ret !== 200) return
      temAudioData.url = res.Data.ResourceUrl;
}
function handleUpdateAudio(){
    activeItem.value.VideoUrl=temAudioData.url
    activeItem.value.VideoPlaySeconds=temAudioData.time
    activeItem.value.VideoSize=temAudioData.size
    showUploadAudio.value=false
}
//更新下音频时长
function handleUpdateAudioTime(e){
    temAudioData.time=e
}


//章节拖动
async function handleMoveChapter({oldIndex,newIndex}) {
    console.log(oldIndex,newIndex)
    console.log(chapterList.value)
    
    let ReportChapterId = chapterList.value[newIndex].ReportChapterId,
        PrevReportChapterId = (newIndex > 0 ? chapterList.value[newIndex-1].ReportChapterId : 0),
        NextReportChapterId = newIndex === chapterList.value.length - 1 ? 0 : chapterList.value[newIndex + 1].ReportChapterId;
    const res = await apiReport.moveChapter({
        ReportChapterId,
        PrevReportChapterId,
        NextReportChapterId
    })
    
    if (res.Ret !== 200) return;
    showToast('移动成功')
}




// 获取章节标签数据
let tagOpts=ref([])
function getChapterTrendTagList(){
    apiReport.getChapterTagList().then(res=>{
        if(res.Ret===200){
            tagOpts.value=res.Data
        }
    })
}

const showTagPop=ref(false)
const isEditTag=ref(false)
const customFieldName={
    text: 'KeyWord',
    value: 'KeyWord',
}
const temTrendTagData=reactive({
    ReportChapterId:'',
    tagVal:['']
})
function handleShowTrendTag(item){
    showItemOpt.value = false
    temTrendTagData.ReportChapterId=item.ReportChapterId
    temTrendTagData.tagVal[0]=item.Trend||tagOpts.value[0].KeyWord
    showTagPop.value=true
    isEditTag.value=item.Trend?true:false
}
function handleConfirmEditTrendTag(){
    if(reportInfo.value.State==2){
        showToast('报告已发布，不可修改')
        return
    }
    apiReport.editChapterTrendTag({
        ReportChapterId:Number(temTrendTagData.ReportChapterId),
        Trend:temTrendTagData.tagVal[0]||''
    }).then(res=>{
        if(res.Ret===200){
            showToast('修改成功')
            showTagPop.value=false
            getChapterList()
        }
    })
}


// 跳转章节详情
async function goChapterDetail(item){

    if(item.IsAuth && item.PublishState===1) {
        //编辑前标记一下
        const res = await apiReport.reportMark({
            Status: 1,
            ReportId: Number(reportInfo.value.Id),
            ReportChapterId: item.ReportChapterId
        });
        
        if (res.Ret === 200) {
        if (res.Data.Status === 1) {
            showToast(res.Data.Msg || '该研报正在编辑，不可重复编辑')
            item.CanEdit = false;
            item.Editor = res.Data.Editor || "";
            return;
        } else if (res.Data.Status === 0) {
            item.CanEdit = true;
            item.Editor = res.Data.Editor || "";
        }
        } else {
            showToast(res.ErrMsg || "未知错误，请稍后重试");
            return;
        }
        
        router.push({
            path:reportInfo.value.ReportLayout===1 ? '/report/edit' : "/smart_report/edit",
            query:{
                id:reportInfo.value.Id,
                chapterId: item.ReportChapterId,
                coopType: reportInfo.value.CollaborateType
            }
        })
    }else {
        router.push({
            path:'/report/chapter/preview',
            query:{
                id:item.ReportChapterId
            }
        })
    }

}


// 显示海报
const showChapterItemPoster=ref(false)
const chapterItemPosterInfo=ref(null)
const posterImgBase64=ref('')
async function handleShowPoster(item){
    if(!item.QRCodeImg){//获取二维码
        const res=await apiGetWXQRCodeImg({
            CodeScene:JSON.stringify({chapterId:item.ReportChapterId.toString()}),
            CodePage:'pages-report/chapterDetail'
        })
        if(res.Ret===200){
            item.QRCodeImg=res.Data
        }
    }
    chapterItemPosterInfo.value=item
    chapterItemPosterInfo.value.TypeEditImg=await transfImgTobase64(chapterItemPosterInfo.value.TypeEditImg)
    chapterItemPosterInfo.value.QRCodeImg=await transfImgTobase64(chapterItemPosterInfo.value.QRCodeImg)

    nextTick(()=>{
        const targetEl = document.getElementById('chapter-poster-box');
        if(targetEl){
            html2canvas(targetEl,{
                backgroundColor: "#ffffff",
                useCORS: true, // 允许图片跨域
                allowTaint: true, // 在渲染前测试图片
                imageTimeout: 0, // 加载延时
                scale:3,
            }).then(res=>{
                let img = res.toDataURL("image/png");
                posterImgBase64.value=img
                showChapterItemPoster.value=true
            })
        }
    })
}



//显示版图设置弹窗
const showLayoutSetPop = ref(false)
const showLayoutImgPop = ref(false)
const layoutState = reactive({
    defaultType: 1,
    bgColor: '',
    headImg:'',//版头图片
    endImg: '',//版尾图片
    headImgId: 0,//版头Id
    endImgId: 0,//版尾Id
})
function handleShowLayoutSet() {
    layoutState.defaultType = 1
    layoutState.bgColor = reportInfo.value.CanvasColor
    layoutState.headImg = reportInfo.value.HeadImg
    layoutState.endImg = reportInfo.value.EndImg
    layoutState.headImgId = reportInfo.value.HeadResourceId
    layoutState.endImgId = reportInfo.value.EndResourceId

    showLayoutSetPop.value = true
}
//设置版图图片
function  handleConfirmSetLayoutImg(e) {
		if(e.type===1){
				layoutState.headImg=e.data.ImgUrl
				layoutState.headImgId = e.data.ResourceId
		}else{
				layoutState.endImg=e.data.ImgUrl
				layoutState.endImgId = e.data.ResourceId
		}
		showLayoutImgPop.value = false
}
async function handleConfirmSetLayout() {
    const res = await apiReport.setReportLayoutImg({
    ReportId: reportInfo.value.Id,
    HeadImg: layoutState.headImg,
    EndImg: layoutState.endImg,
    HeadResourceId: layoutState.headImgId,
    EndResourceId: layoutState.endImgId,
    CanvasColor: layoutState.bgColor,
    })

    if(res.Ret !== 200) return 
    
    showToast('设置成功')

    reportInfo.value.CanvasColor = layoutState.bgColor
    reportInfo.value.HeadImg = layoutState.headImg
    reportInfo.value.EndImg = layoutState.endImg
    reportInfo.value.HeadResourceId = layoutState.headImgId
    reportInfo.value.EndResourceId = layoutState.endImgId

    showLayoutSetPop.value = false
}

</script>

<template>
    <div class="report-chapterlist-page" v-if="reportInfo">
        <div class="chapter-list-wrap">
            
            <draggable 
                class="chapter-list"
                :list="chapterList" 
                item-key="ReportChapterId"
                handle=".move-icon"
                animation="300"
                @end="handleMoveChapter"
                tag="ul"
            >
                <template #item="{element}">
                    <li class="item"  @click="goChapterDetail(element)">
                        <div class="item-top">
                            <div class="type-name" v-if="element.TypeName">{{element.TypeName}}</div>
                        </div>

                        <div class="content">
                            <div class="title">{{element.Title}}</div>
                            <div class="bottom">
                                <div class="flex-info">
                                    <div 
                                        :class="['status',element.PublishState!=1&&'status-success']"
                                        v-if="element.CanEdit"
                                    >{{element.PublishState==1?'未提交':'已提交'}}</div>
                                    <div :style="`color:${$theme-warning}`" v-else>{{element.Editor}}编辑中...</div>
                                    <div class="tag-text" v-if="element.Trend">#{{element.Trend}}</div>
                                </div>
                                <div class="flex-info">
                                    <img v-if="element.PublishState==2" @click.stop="handleShowPoster(element)" class="icon icon-wx" src="@/assets/imgs/report/icon_wx.png" alt="">

                                    <div class="handle-icon" @click.stop="handleOptChapterItem(element)" v-if="element.IsAuth">
                                        <svg width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M16 8C17.1045 8 18 7.10455 18 6C18 4.89545 17.1045 4 16 4C14.8955 4 14 4.89545 14 6C14 7.10455 14.8955 8 16 8Z" fill="black" fill-opacity="0.9"/>
                                            <path d="M16 18C17.1045 18 18 17.1046 18 16C18 14.8954 17.1045 14 16 14C14.8955 14 14 14.8954 14 16C14 17.1046 14.8955 18 16 18Z" fill="black" fill-opacity="0.9"/>
                                            <path d="M18 26C18 24.8954 17.1045 24 16 24C14.8955 24 14 24.8954 14 26C14 27.1046 14.8955 28 16 28C17.1045 28 18 27.1046 18 26Z" fill="black" fill-opacity="0.9"/>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                        
                        <img src="@/assets/imgs/report/icon_drag.png" alt="" class="move-icon" v-if="isCreator">
                    </li>
                </template>
            </draggable>

            <van-button
                v-if="checkAuthBtn(reportManageBtn.reportMange_chapter_add)&&isCreator"
                type="primary" 
                :size="chapterList.length?'normal':'large'" 
                @click="handleChapterInfo(null)"
            >添加章节</van-button>
        </div>

        <div class="bot-action-box">
            <div class="action-box">
                <div class="item" @click="handleShowLayoutSet" v-if="reportInfo.ReportLayout===2&&isCreator">
                    <img src="@/assets/imgs/report/icon_set.png" alt="">
                    <span>版图设置</span>
                </div>
                <div class="item" @click="showBaseInfoPop=true" v-if="isCreator">
                    <img src="@/assets/imgs/report/icon_info.png" alt="">
                    <span>基础信息</span>
                </div>
                <div class="item" @click="handlePreviewReport" v-permission="reportManageBtn.reportManage_reportView">
                    <img src="@/assets/imgs/report/icon_preview.png" alt="">
                    <span>预览</span>
                </div>
                <template v-if="!isApprove||!hasApproveFlow">
                    <div class="item" @click="handlePublishReportCheck('dsfb')" v-permission="reportManageBtn.reportManage_publish">
                        <img src="@/assets/imgs/report/icon_time.png" alt="">
                        <span>定时发布</span>
                    </div>
                    <div class="item" @click="handlePublishReportCheck('fb')" v-permission="reportManageBtn.reportManage_publish">
                        <img src="@/assets/imgs/report/icon_publish3.png" alt="">
                        <span>发布</span>
                    </div>
                </template>
                <template v-if="isApprove&&hasApproveFlow">
                    <div class="item" @click="handlePublishReportCheck('submit')" v-permission="reportManageBtn.reportManage_publish">
                        <img src="@/assets/imgs/report/icon_publish3.png" alt="">
                        <span>提交</span>
                    </div>
                </template>
            </div>
        </div>
    </div>

    <!-- 基础信息 -->
    <van-popup 
        v-model:show="showBaseInfoPop" 
        position="bottom"
        :style="{height:'100%'}"
    >

        <AddReportBaseInfoV2
            @close="showBaseInfoPop=false"
            :id="Number(route.query.id)"
            :defaultData="reportBaseInfoData"
            @confirm="handleReportBaseInfoChange"
        />
    </van-popup>

    <!-- 选择标签 -->
    <van-popup 
        v-model:show="showTagPop" 
        round 
        :position="width>650?'center':'bottom'"
        :style="width>650?{ width: '400px'}:''"
    >
        <van-picker
            :title="isEditTag?'编辑标签':'添加标签'"
            v-model="temTrendTagData.tagVal"
            :columns="tagOpts"
            :columns-field-names="customFieldName"
            @cancel="showTagPop = false"
            @confirm="handleConfirmEditTrendTag"
        />
    </van-popup>

    <!-- 海报 -->
    <van-popup 
        v-model:show="showChapterItemPoster" 
        round
    >
        <img class="chapter-poster-img" :src="posterImgBase64" alt="">
    </van-popup>

    <!-- 章节信息弹窗 -->
    <van-popup 
        v-model:show="showChapterBaseInfo" 
        position="bottom"
        :style="{height:'100%'}"
    >
        <EditChapterBaseInfo
            v-if="showChapterBaseInfo"
            :defaultData="activeItem"
            :userOpts="userOpts"
            :varietyOpts="reportVarietyOpts"
            :isCreator="isCreator"
            @close="showChapterBaseInfo=false"
            @confirm="handleChapterBaseInfoSave"
        />
    </van-popup>

     <!-- 上传音频 -->
    <van-popup 
        v-model:show="showUploadAudio" 
        position="bottom"
        round
        :style="{height:'60%'}"
    >
        <div class="upload-audio-wrap" v-if="showUploadAudio">
            <div style="font-size:12px;color:#666">tips:如果是在微信中访问,请上传完音频点击播放,获取音频时长后方可保存</div>
            <template v-if="temAudioData.url">
                <h2>音频链接</h2>
                <p>{{temAudioData.url}}</p>
                <AudioBox :time="temAudioData.time" :url="temAudioData.url" @updateDuration="handleUpdateAudioTime"/>
            </template>
            <div class="bot-btns">
                <van-uploader 
                    accept="*" 
                    :after-read="handleAudioUploadAfterRead"
                    :before-read="handleAudioUploadBeforeRead"
                >
                    <van-button class="bot-btn" type="default">{{temAudioData.url?'重新上传':'上传音频'}}</van-button>
                </van-uploader>
                <van-button class="bot-btn" type="primary" :disabled="!temAudioData.url||temAudioData.time===0" @click="handleUpdateAudio">保存</van-button>
            </div>
        </div>
    </van-popup>

    <!-- item操作 -->
    <van-action-sheet 
        teleport="body"
        v-model:show="showItemOpt"
        cancel-text="取消"
        close-on-click-action
    >
        <div class="report-item-action-box" v-if="activeItem">
            <div class="title">{{activeItem.Title}}</div>

            <div class="item" @click="handleChapterInfo(activeItem)" v-if="activeItem.IsAuth">基础信息</div>
            <div class="item" @click="handleCancelChapter(activeItem)" v-if="activeItem.IsAuth&&activeItem.PublishState===2">撤销</div>
            <div class="item" @click="handleDelChapter(activeItem)" v-if="isCreator">删除</div>
            <div class="item" @click="handleShowTrendTag(activeItem)" v-permission="reportManageBtn.reportMange_chapter_editTag">添加标签</div>
            <div class="item" @click="handleShowUploadAudio()">上传录音</div>
        </div>
    </van-action-sheet>

    <!-- 版图设置 -->
    <van-popup
        v-model:show="showLayoutSetPop"
        position="bottom"
        :style="{height:'70%'}"
    >
        <div class="top-box">
            <span style="color:#666666" @click="showLayoutSetPop=false">取消</span>
            <span class="title">版图设置</span>
            <span style="color:#0052D9" @click="handleConfirmSetLayout">确定</span>
        </div>
        <van-cell-group>
            <van-cell
                title="版头设置"
                is-link
                @click="layoutState.defaultType=1;showLayoutImgPop=true"
            />
            <div class="show-wrapper" v-if="layoutState.headImg">
                <img :src="layoutState.headImg" width="100" height="100">
            </div>
        </van-cell-group>
        <van-cell-group>
            <van-cell
                title="版尾设置"
                is-link
                @click="layoutState.defaultType=2;showLayoutImgPop=true;"
        
            />
            <div class="show-wrapper" v-if="layoutState.endImg">
                <img :src="layoutState.endImg" width="100" height="100">
            </div>
        </van-cell-group>
        <van-cell-group>
            <div class="show-wrapper">
                <span style="margin-right: 20px">背景色</span>
                <V3ColorPicker v-model:value="layoutState.bgColor" :zIndex="9999"/>
            </div>
        </van-cell-group>
    </van-popup>
    
    <!-- 版图图片设置 -->
    <van-popup
        v-model:show="showLayoutImgPop"
        position="bottom"
    >
        <ReportLayoutImg 
            v-if="showLayoutImgPop"
            :defaultVal="layoutState.defaultType"
            @close="showLayoutImgPop=false" 
            @confirm="handleConfirmSetLayoutImg"
        />
    </van-popup>

    <!-- 定时发布选择时间 -->
    <ReportPublishTimeSet 
        v-model="showDSFBTime" 
        :prePublishTime="reportInfo?.PrePublishTime" 
        @confirm="onConfirmDSFBTime"
    />

    <!-- 海报dom模块 -->
        <div v-if="chapterItemPosterInfo" class="select-text-disabled chapter-poster-box" id="chapter-poster-box">
            <!-- <img class="bg" :src="chapterItemPosterInfo.TypeEditImg" alt=""> -->
            <h2 class="title">【第{{reportInfo.Stage}}期|{{reportInfo.ClassifyNameFirst}}|{{chapterItemPosterInfo.TypeName}}】{{chapterItemPosterInfo.Title}}</h2>
            <img class="code-img" :src="chapterItemPosterInfo.QRCodeImg" alt="">
            <p class="tips">长按保存图片，发送给好友</p>
        </div>
</template>

<style lang="scss" scoped>
.report-chapterlist-page{
    height: 100dvh;
    min-height: 95vh;
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
    .bot-btns{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
        padding: 20px 0;
        display: flex;
        justify-content: center;
        .bot-btn{
            width: 315px;
            margin: 0 10px;
        }
    }
}

.chapter-list-wrap{
    flex: 1;
    overflow-y: auto;
    padding: 60px $page-padding;
    .list-lable{
        display: block;
        font-size: 32px;
        margin-bottom: 30px;
    }

}
.chapter-list{
    .item{
        /* display: flex; */
        padding:20px;
        border: 1px solid $border-color;
        border-radius: 8px;
        margin-bottom: 20px;
        position: relative;
        .img-box{
            position: relative;
            width: 160px;
            height: 160px;
            overflow: hidden;
            border-radius: 8px;
            img{
                width: 100%;
                height: 100%;
            }
            span{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                color: #fff;
                font-size: 24px;
                display: inline-block;
                width: 80%;
                text-align: center;
            }
        }
        .content{
            padding-left: 20px;
            .title{
                font-size: 32px;
                font-weight: 600;
                padding-right: 160px;
            }

            .bottom {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 20px;
                .status{
                    color: $font-grey_999;
                    margin-right: 10px;
                    &.status-success{
                        color: $font-success;
                    }
                }
                
                .icon{
                    width: 70px;
                    height: 70px;
                }

                .flex-info {
                    display: flex;
                    align-items: center;
                }
                .handle-icon {
                    margin-left: 20px;
                }
            }

        }

        .move-icon {
            width: 40px;
            height: 40px;
            position: absolute;
            top: 20px;
            right: 20px;
        }

        .item-top {
            margin-bottom: 20px;
            .type-name {
                color: #fff;
                padding: 4px 30px;
                border-radius: 16px;
                background: $theme-color;
                width: fit-content;
            }
        }
    }
}

.chapter-poster-img{
    display: block;
    width: 300PX;
    border-radius: 6PX;
    padding: 10PX;
}
.chapter-poster-box{
    position: fixed;
    z-index: -100;
    width: 300PX;
    border-radius: 6PX;
    padding: 20PX;
    background-color: #fff;
    .bg{
        width: 280PX;
        height: 280PX;
        display: block;
    }
    .title{
        font-size: 16PX;
    }
    .code-img{
        width: 140PX;
        height: 140PX;
        display: block;
    }
    .tips{
        color: $font-grey;
        font-size: 14PX;
        margin-top: 5PX;
    }
}

.report-baseinfo-wrap{
    height: 100%;
    position: relative;
    background-color: $page-bg-grey;
}

.bot-action-box{
    padding: 20px 16px;
    display: flex;
    align-items: center;
    .action-box{
        flex: 1;
        background: #FFFFFF;
        box-shadow: 0px 12px 60px 10px rgba(0, 0, 0, 0.05), 0px 32px 48px 4px rgba(0, 0, 0, 0.04), 0px 16px 20px -10px rgba(0, 0, 0, 0.08);
        border-radius: 100px;
        height: 112px;
        display: flex;
        align-items: center;
        margin-right: 20px;
        padding: 0 20px;
        .item{
            flex: 1;
            text-align: center;
            font-size: 20px;
            img{
                width: 40px;
                height: 40px;
                display: block;
                margin: 5px auto;
            }
        }
    }
}

.report-item-action-box{
    .title{
        padding: 30px 32px;
        font-weight: 700;
        text-align: center;
        background: #eee;
    }
    .item{
        padding: 20px 0;
        text-align: center;
        line-height: 48px;
        font-size: 32px;
        border-top: 1px solid $border-color;
    }
}
.upload-audio-wrap{
    height: 100%;
    position: relative;
    overflow: hidden;
    padding: $page-padding;
    p{
        color: rgba(0, 0, 0, 0.6);
        padding-bottom: 32px;
        border-bottom: 1px solid $border-color;
        margin-bottom: 32px;
        word-wrap: break-word;
    }
    .bot-btns{
        // width: 100%;
        position: absolute;
        bottom: 0;
        padding: 20px 0;
        text-align: center;
        .bot-btn{
            width: 315px;
            margin: 0 10px;
        }
    }
}

.top-box{
    padding:32px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #DCDFE6;
    .close{
        color:#666666;
    }
    .title{
        font-size: 36px;
    }
    .add-btn{
        color:$theme-color;
    }
}
.show-wrapper {
    padding: 20px;
}
@media screen and (min-width:$media-width){
    .report-chapterlist-page{
        padding-bottom: 80px;
        .bot-btns{
            padding: 10px 0;
        }
    }
    .chapter-list-wrap{
        border: none;
        padding: var(--van-padding-md);
        .list-lable{
            font-size: 16px;
            margin-bottom: 15px;
        }
        .top-box{
            margin-bottom: 15px;
            .btn{
                width: 35px;
                height: 35px;
            }
        }
        .list-lable{
            font-size: 16px;
        }
    }
    .chapter-list{
        .item{
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 10px;
            .img-box{
                width: 80px;
                height: 80px;
                border-radius: 4px;
                span{
                    font-size: 12px;
                }
            }
            .content{
                padding-left: 10px;
                .title{
                    font-size: 16px;
                    padding-right: 100px;
                }
                .audio-icon{
                    width: 18px;
                    height: 18px;
                    right: 60px;
                }

                .bottom .icon{
                    width: 35px;
                    height: 35px;
                }
            }
            .move-icon {
                width: 40px;
                height: 40px;
            }
        }
    }

    .bot-action-box{
        margin: 0 auto;
        width: 600px;
        padding: 10px 16px;
        .action-box{
            border-radius: 50px;
            height: 56px;
            margin-right: 10px;
            padding: 0 10px;
            .item{
                font-size: 12px;
                img{
                    width: 20px;
                    height: 20px;
                    margin: 3px auto;
                }
            }
        }
    }

    .report-item-action-box{
        .item{
            font-size: 14px;
            line-height: 20px;
            padding: 20px 0;
        }
    }
}
</style>