eta_mobile_front/src/views/report/List.vue

<script setup name="ReportList">
import {computed, nextTick, onMounted, reactive,ref} from 'vue'
import apiReport from '@/api/report'
import {getSystemInfo} from '@/api/common'
import moment from 'moment'
import ListClassify from './components/ListClassify.vue'
import ReportPublishPop from './components/ReportPublishPop.vue'
import { showToast,showDialog,Dialog } from 'vant';
import { useRouter } from 'vue-router';
import { useWindowSize } from '@vueuse/core'
import {useCachedViewsStore} from '@/store/modules/cachedViews'
import {useDownLoadFileAddWaterMark} from '@/hooks/useDownLoadFile'
import {reportManageBtn,useAuthBtn} from '@/hooks/useAuthBtn'
import {useReportApprove} from '@/hooks/useReportApprove'
import {usePublicSettingStore} from '@/store/modules/publicSetting'
import {Base64} from 'js-base64'
import {isWeiXin} from '@/hooks/common'
import AddReportBaseInfoV2 from './components/AddReportBaseInfoV2.vue'
import ReportFilter from './components/ReportFilter.vue'
import AudioBox from './components/AudioBox.vue'
import { useConfigSettingStore } from '@/store/modules/etaConfig'
import { storeToRefs } from 'pinia'

const cachedViewsStore=useCachedViewsStore()
const publicSettingStore = usePublicSettingStore()

const {startDownload}=useDownLoadFileAddWaterMark()
const {isApprove,isOtherApprove,getEtaConfig} = useReportApprove()

const {checkAuthBtn} = useAuthBtn()

//添加按钮和添加选项
const isAddReportBtnShow = computed(()=>{
    return checkAuthBtn(reportManageBtn.reportManage_reportAdd)
})


const { width, height } = useWindowSize()

const router=useRouter()
//是否显示一键清空选项
const showCleanFilterBox=computed(()=>{
    if(isClickClose.value) return false
    if(
        listState.ClassifyNameFirst||
        listState.ClassifyNameFirst||
        listState.EndDate||
        listState.MsgIsSend||
        listState.publishStatus
    ) return true
})
const isClickClose=ref(false)//是否点击过关闭一键清空模块
function handleCleanFilter(){
    listState.ClassifyNameFirst=''
    listState.ClassifyNameSecond=''
    listState.ClassifyNameThird=''
    listState.classifyIds=[]

    listState.MsgIsSend=''
    listState.StartDate=''
    listState.EndDate=''
    listState.timeType='publish_time'
    listState.publishStatus=''
    refreshList()
}


const reportTypes = [
    { label: '我的研报',key:'3' },
    { label: '共享研报',key:'2' },
    { label: '公共研报',key:'1' },
]

const statusMap = new Map([
    [1,{ bg:'#EEEEEE', color:'#333', msg:'未发布'}],
    [2,{ bg:'rgba(0, 82, 217, 0.1)', color:'#0052D9', msg:'已发布'}],
    [3,{ bg:'#FFF1E9', color:'#BE5A00', msg:'待提交'}],
    [4,{ bg:'#FFF1E9', color:'#BE5A00', msg:'待审批'}],
    [5,{ bg:'#FFF0ED', color:'#AD352F', msg:'已驳回'}],
    [6,{ bg:'#E3F9E9', color:'#006C45', msg:'已通过'}]
])


// 水印
const waterMarkStr=ref('')
const listState = reactive({
    listType: '3',
    publishStatus:'',
    MsgIsSend:'',
    timeType: 'publish_time',
    classifyIds: [],
    ClassifyNameFirst:'',
    ClassifyNameSecond:'',
    ClassifyNameThird:'',
    StartDate:'',
    EndDate:'',
    list:[],
    page:0,
    pageSize:20,
    finished:false,
    loading:false
})
async function getList(){
    const res=await apiReport.getList({
        CurrentIndex:listState.page,
        PageSize:listState.pageSize,
        StartDate:listState.StartDate,
        EndDate:listState.EndDate,
        // ClassifyNameFirst:listState.ClassifyNameFirst,
        // ClassifyNameSecond:listState.ClassifyNameSecond,
        ClassifyIdFirst: listState.classifyIds
          ? listState.classifyIds[0]
          : "",
        ClassifyIdSecond:
          listState.classifyIds &&
          listState.classifyIds.length > 1
            ? listState.classifyIds[1]
            : "",
        ClassifyIdThird:
          listState.classifyIds &&
          listState.classifyIds.length > 2
            ? listState.classifyIds[2]
            : "",
        MsgIsSend:listState.MsgIsSend,
        TimeType:listState.timeType,
        State:listState.publishStatus,
        FilterReportType: listState.listType
    })
    if(res.Ret===200){
        listState.loading=false
        if(!res.Data){
            listState.finished=true
            return
        }
        
        listState.finished=res.Data.Paging.IsEnd
        const arr=res.Data.List||[]
        listState.list= listState.page < 2 ? arr : [...listState.list,...arr]
    }
}
function onLoad(){
    listState.page++
    getList()
}
function refreshList(){
    document.documentElement.scrollTop=0
    listState.page=1
    listState.list=[]
    listState.finished=false
    getList()
}



// 删除报告
function handleReportDel(item){
    showDialog({
        title: '提示',
        message: '删除操作不可恢复，确认删除吗？',
        showCancelButton:true
    }).then(() => {
        // on close
        apiReport.reportDel({ReportIds:item.Id}).then(res=>{
            if(res.Ret===200){
                showToast('删除成功')
                refreshList()
                showReportItemOpt.value=false
            }
        })
    }).catch(()=>{})
}


// 发布报告
let activeReportData=ref('')
let showPublishPop=ref(false)
async function handleReportPublish(item){
    activeReportData.value=item

    //如果走审批流 直接发布
    if(isApprove.value){
        confirmPublish(item)
        return
    }
    // 判断是否有推送权限
    if(!checkAuthBtn(reportManageBtn.reportManage_sendMsg)){
        confirmPublish(item)
        return
    }

    showPublishPop.value=true
    showReportItemOpt.value=false
}
function confirmPublish(item){
    showDialog({
        title: '提示',
        message: item.PrePublishTime ? '是否立即发布定时报告？' : '是否确定立即发布报告？',
        showCancelButton:true
    }).then(res=>{
        publishReportApprove()
        showReportItemOpt.value=false
    }).catch(err=>{})
}
function publishReportApprove(){
    apiReport.reportPublish({
        ReportIds:activeReportData.value.Id.toString(),
        ReportUrl:generatePdfLinks(activeReportData.value.ReportCode)
    }).then(res=>{
        if(res.Ret!==200) return 
        showToast('发布成功')
        handlePublishPopClose('refresh')
    })
}

function generatePdfLinks(Code){
    return `${publicSettingStore.publicSetting.ReportViewUrl}/reportshare_pdf?code=${Code}&flag=${waterMarkStr.value}`
}

//提交报告
function handleReportSubmit(item){
    showDialog({
        title: '提示',
        message: '是否确认提交该报告进入审批流程?',
        showCancelButton:true
    }).then(()=>{
        apiReport.reportCnSubmit({
            ReportId:Number(item.Id)
        }).then(res=>{
            if(res.Ret!==200) return 
            showToast('提交成功')
            refreshList()
        })
    }).catch(()=>{})
}

//撤销报告
function handleReportCancel(item){
    showDialog({
        title: '提示',
        message: '确定要撤销审批吗?',
        showCancelButton:true
    }).then(()=>{
        apiReport.reportCnCancel({
            ReportId:Number(item.Id)
        }).then(res=>{
            if(res.Ret!==200) return 
            showToast('撤销成功')
            refreshList()
        })
    }).catch(()=>{})
}

// type 1-电脑版pdf 2-电脑版长图 3-移动版pdf 4-移动版长图
async function downloadPdfImg(item,type){
    let waterMark=''
    // 判断是否需要水印
    await useConfigSettingStore().getBaseConfigSetting()
    const configSettingStore = useConfigSettingStore()
    const { etaConfigInfo } = storeToRefs(configSettingStore)
    if(etaConfigInfo.value.WatermarkDownloadPdf==='true'){
        // 设置水印
        waterMark=decodeURIComponent(Base64.decode(waterMarkStr.value))
    }
    showReportItemOpt.value=false
    let name = `${item.Title}${moment().format('YYYYMMDD')}`
    if(type == 1){
        // window.open(item.DetailPdfUrl,"_blank")
        startDownload({
            url:item.DetailPdfUrl,
            filename:`${name}.pdf`,
            waterMark:waterMark,
            type:'pdf'
        })
    }else if(type===2){
        startDownload({
            url:item.DetailImgUrl,
            filename:`${name}.jpg`,
            waterMark:waterMark,
            type:'img'
        })
    }else if(type===3){
        startDownload({
            url:item.DetailPdfUrlMobile,
            filename:`${name}.pdf`,
            waterMark:waterMark,
            type:'pdf'
        })
    }else if(type===4){
        startDownload({
            url:item.DetailImgUrlMobile,
            filename:`${name}.jpg`,
            waterMark:waterMark,
            type:'img'
        })
    }
    showDownloadPdfImg.value=false
}
const showDownloadPdfImg=ref(false)
const downloadPdfImgType=ref('pdf')

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

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

// 推送消息
function handldReportMsgSend(item){
    apiReport.reportMessageSend({
        ReportId:Number(item.Id)
    }).then(res=>{
        if(res.Ret===200){
            showToast('推送成功')
            showReportItemOpt.value=false
            refreshList()
        }
    })
}


/* 上传章节音频 */
// 上传音频
const showUploadAudio=ref(false)
const temAudioData=reactive({
    time:0,
    size:0,
    url:'',
})
function handleShowUploadAudio(){
    showReportItemOpt.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)
        })
    })
}
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("ReportId", activeItem.value.Id);
      const res = await apiReport.uploadAudio(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
}



const downloadUrl = `${import.meta.env.VITE_APP_API_URL}/voice/download`
/* 音频下载 */
function handleDownloadAudio(item) {
    showReportItemOpt.value = false;
    let url = downloadUrl+`?ReportId=${parseInt(item.Id)}`;

    const elink = document.createElement('a')
    elink.download = item.VideoName
    elink.style.display = 'none'
    elink.href = url
    document.body.appendChild(elink)
    elink.click()
    window.URL.revokeObjectURL(elink.href)
    document.body.removeChild(elink)
}



const selectClassifyName = computed(() => {
    return `${listState.ClassifyNameFirst}${listState.ClassifyNameSecond?('/'+listState.ClassifyNameSecond):''}${listState.ClassifyNameThird?('/'+listState.ClassifyNameThird):''}`
})
// 分类弹窗
const showClassify=ref(false)
// 分类筛选
function handleConfirmClassify(arr){
    console.log(arr)
    listState.ClassifyNameFirst=arr[0]?.text;
    listState.ClassifyNameSecond=arr[1]?.text;
    listState.ClassifyNameThird=arr[2]?.text;
    listState.classifyIds = arr.map(_=>_.id);
    refreshList()
    showClassify.value=false
}


// 跳转详情
function goDetail(item){
    console.log(item);
    //若没有预览权限，则不跳转
    if(!checkAuthBtn(reportManageBtn.reportManage_reportView)) return 
    router.push({
        path:"/report/preview",
        query:{
            id:item.Id
        }
    })
}

// 弹出操作
let activeItem=ref(null)
const showReportItemOpt=ref(false)
async function handleOptReportItem(e){
    // 校验是否有人在编辑报告
    if(!e.CanEdit){
        showToast(`${e.Editor}正在编辑中，不可操作！`)
        return
    }
    //检验权限，如果该状态下无可操作项，则长按不弹出
    let checkState = false
    if([1,3].includes(e.State)){ //编辑、发布、删除
        checkState = checkAuthBtn(reportManageBtn.reportManage_reportEdit)
            ||checkAuthBtn(reportManageBtn.reportManage_publish)
            ||checkAuthBtn(reportManageBtn.reportManage_reportDel)
    }
    if([2,6].includes(e.State)){ //推送消息、取消发布
        checkState = checkAuthBtn(reportManageBtn.reportManage_sendMsg)
            ||checkAuthBtn(reportManageBtn.reportManage_cancelPublish)
    }
    if([4,5].includes(e.State)){ //撤销
        checkState = checkAuthBtn(reportManageBtn.reportManage_cancelPublish)
    }
    
    if(!checkState) return
    activeItem.value=e
    showReportItemOpt.value=true
}



// 更多操作
const isShowFilterPopup = ref(false)
function handleShowFilter(){
    isShowFilterPopup.value = true
}
function handleChangeFilter({ publishStatus,msgIsSend,timeType,startDate,endDate }) {
    listState.MsgIsSend = msgIsSend
    listState.publishStatus = publishStatus
    listState.timeType = timeType
    listState.StartDate = startDate
    listState.EndDate = endDate
    isShowFilterPopup.value=false
    refreshList()
}



async function goSearch(){
    // 删除报告搜索页的缓存
    await cachedViewsStore.removeCaches('ReportSearch')
    router.push('/report/search')
}


const isShowReportInfoPopup = ref(false)
//添加报告
function handeAddReport(e){
    isShowReportInfoPopup.value = true
    
}

//点击编辑
async function handleReportEdit(e){
    console.log(e);
    showReportItemOpt.value=false

    if(e.CollaborateType===1) {
        // 先mark一下
        const markRes=await apiReport.reportMark({
            Status:1,
            ReportId:e.Id
        })
        if(markRes.Ret===200){
            if(markRes.Data.Status===1){
                showToast(markRes.Data.Msg || '该研报正在编辑，不可重复编辑')
                listState.list.forEach(item=>{
                    if(item.Id===e.Id){
                        item.CanEdit=false
                        item.Editor=markRes.Data.Editor || ''
                    }
                })
                return
            }else if(markRes.Data.Status===0){
                listState.list.forEach(item=>{
                    if(item.Id===e.Id){
                        item.CanEdit=true
                        item.Editor=markRes.Data.Editor || ''
                    }
                })
            }
        }else{
            showToast(markRes.ErrMsg || '未知错误，请稍后重试')
            return
        }
    }

    // 晨报周报
    if(e.CollaborateType===2){
        router.push({
            path:"/report/chapter/list",
            query:{
                id:e.Id
            }
        })
        return
    }

    // 研报d
    router.push({
        path:e.ReportLayout===1 ? '/report/edit' : "/smart_report/edit",
        query:{
            id:e.Id,
            coopType: e.CollaborateType
        }
    })
}

const getSystemInfoFun=()=>{
    getSystemInfo().then(res=>{
        if(res.Ret===200){
          const systemUserInfo=res.Data
          // 设置水印文案
          let waterMarkString=''
          if(systemUserInfo){
            waterMarkString=`${systemUserInfo.RealName}${systemUserInfo.Mobile?systemUserInfo.Mobile:systemUserInfo.Email}`
            waterMarkString=encodeURIComponent(waterMarkString)
            waterMarkStr.value=Base64.encode(waterMarkString)
          }
        }
    })
}

onMounted(async ()=>{
    getEtaConfig()
    getSystemInfoFun()
})

</script>

<template>
    <div class="report-list-page">
        <div class="sticky-box">
            <div class="clear-filter-box" v-if="showCleanFilterBox">
                <span>想要清空所有筛选项？试试</span>
                <span @click="handleCleanFilter" style="display:flex;align-items:center">
                    <span style="color:#0052D9">一键清空</span>
                    <img class="rocket" src="@/assets/imgs/icon_rocket.png" alt="">
                </span>
                <van-icon name="cross" class="close-icon" @click="isClickClose=true"/>
            </div>
            <div class="top-box">
                <van-search
                    style="flex:1"
                    shape="round"
                    readonly 
                    placeholder="请输入报告标题或创建人"
                    @click-input="goSearch"
                />
                <div :class="['menu-icon',showClassify||listState.ClassifyNameSecond?'active':'']" @click="showClassify=true">
                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M33.75 5.25C38.7206 5.25 42.75 9.27944 42.75 14.25C42.75 19.2206 38.7206 23.25 33.75 23.25C28.7794 23.25 24.75 19.2206 24.75 14.25C24.75 9.27944 28.7794 5.25 33.75 5.25ZM27.75 14.25C27.75 17.5637 30.4363 20.25 33.75 20.25C37.0637 20.25 39.75 17.5637 39.75 14.25C39.75 10.9363 37.0637 8.25 33.75 8.25C30.4363 8.25 27.75 10.9363 27.75 14.25Z" fill="currentColor"/>
                        <path d="M6 9C6 7.34315 7.34315 6 9 6H19.5C21.1569 6 22.5 7.34315 22.5 9V19.5C22.5 21.1569 21.1569 22.5 19.5 22.5H9C7.34315 22.5 6 21.1569 6 19.5V9ZM9 9V19.5H19.5V9H9Z" fill="currentColor"/>
                        <path d="M6 28.5C6 26.8431 7.34315 25.5 9 25.5H19.5C21.1569 25.5 22.5 26.8431 22.5 28.5V39C22.5 40.6569 21.1569 42 19.5 42H9C7.34315 42 6 40.6569 6 39V28.5ZM9 28.5V39H19.5V28.5H9Z" fill="currentColor"/>
                        <path d="M25.5 28.5C25.5 26.8431 26.8431 25.5 28.5 25.5H39C40.6569 25.5 42 26.8431 42 28.5V39C42 40.6569 40.6569 42 39 42H28.5C26.8431 42 25.5 40.6569 25.5 39V28.5ZM28.5 39H39V28.5H28.5V39Z" fill="currentColor"/>
                    </svg>
                </div>

                <div 
                    :class="['menu-icon',{
                        'active': listState.MsgIsSend||listState.publishStatus
                    }]" 
                    @click="handleShowFilter"
                >
                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M30.283 23.977L40.824 9.5685C41.3719 8.81954 41.6002 7.88381 41.459 6.96667C41.3177 6.04952 40.8184 5.22589 40.0705 4.6765C39.4715 4.23699 38.7479 4 38.005 4H9.995C8.065 4 6.5 5.567 6.5 7.5C6.5 8.244 6.7365 8.9685 7.1755 9.5685L17.717 23.977V42.5C17.717 43.3285 18.3875 44 19.215 44C19.6125 43.9996 19.9935 43.8414 20.2743 43.5601C20.5552 43.2788 20.7128 42.8975 20.7125 42.5V23.486C20.7125 23.1675 20.611 22.857 20.423 22.5995L9.592 7.7955C9.53761 7.72096 9.50489 7.63283 9.49745 7.54085C9.49001 7.44887 9.50814 7.35663 9.54984 7.27431C9.59155 7.192 9.65519 7.12281 9.73375 7.0744C9.81231 7.02599 9.90272 7.00024 9.995 7H38.005C38.0973 7.00015 38.1878 7.02586 38.2664 7.07427C38.345 7.12268 38.4086 7.1919 38.4503 7.27426C38.492 7.35663 38.51 7.44892 38.5025 7.54092C38.4949 7.63292 38.4621 7.72104 38.4075 7.7955L27.5765 22.5995C27.3884 22.8568 27.287 23.1673 27.287 23.486V38.271C27.287 39.0995 27.9575 39.771 28.785 39.771C28.9819 39.7709 29.1768 39.732 29.3586 39.6565C29.5404 39.5811 29.7056 39.4705 29.8447 39.3312C29.9838 39.192 30.0941 39.0266 30.1693 38.8447C30.2445 38.6628 30.2831 38.4678 30.283 38.271V23.977Z" fill="currentColor"/>
                    </svg>
                </div>
            </div>
            
            
            <div class="report-type">
                <van-tabs 
                    v-model:active="listState.listType" 
                    title-active-color="#0052D9" 
                    title-inactive-color="#333"
                    @change="refreshList"
                >
                    <van-tab 
                        :title="tab.label" 
                        v-for="tab in reportTypes" 
                        :key="tab.key" 
                        :name="tab.key"
                    ></van-tab>
                </van-tabs>
            </div>

            <div class="classify-name" v-if="listState.classifyIds&&listState.classifyIds.length">{{ selectClassifyName }}</div>
        </div>
        <van-list
            v-model:loading="listState.loading"
            :finished="listState.finished"
            :offset="100"
            :finished-text="listState.list.length>0?'没有更多了':'暂无相关报告'"
            @load="onLoad"
        >   
            <img v-if="listState.list.length==0&&listState.finished" class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
            <ul class="list-wrap">
                <li
                    v-for="item in listState.list" 
                    :key="item.Id"
                    class="select-text-disabled item"
                    @click="goDetail(item)"
                >   
                    <div class="list-top">
                        <h2 class="van-ellipsis title">
                            <span :class="['tag',item.ChapterType]">{{['周报','晨报'].includes(item.ClassifyNameFirst)?item.ClassifyNameFirst:'研报'}}</span>
                            {{item.Title}}
                            <span v-if="item.CreateTime">({{item.CreateTime.substring(5,7)}}{{item.CreateTime.substring(8,10)}})</span>
                        </h2>
                        <div class="status">
                            <van-tag 
                                type="primary" 
                                size="large"
                                :color="statusMap.get(item.State).bg"
                                :text-color="statusMap.get(item.State).color"
                            >{{statusMap.get(item.State).msg}}</van-tag>
                        </div>
                    </div>
                    <p class="van-multi-ellipsis--l2 des">{{item.Abstract}}</p>
                    <div class="bot-info">
                        <div class="time">
                            <span style="margin-right:2px">{{moment(item.ModifyTime).format('YYYY-MM-DD')}}</span>
                            <svg v-if="item.PrePublishTime&&item.State==1" style="width:14px;height:14px;position: relative;top:2px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="none">
                                <path d="M13.0357 6.28571V14.7501L17.8576 19.7857L19.2213 18.422L14.9643 13.9512V6.28571H13.0357Z" fill="#0052D9"/>
                                <path d="M27.5 14C27.5 21.4558 21.4558 27.5 14 27.5C6.54416 27.5 0.5 21.4558 0.5 14C0.5 6.54416 6.54416 0.5 14 0.5C21.4558 0.5 27.5 6.54416 27.5 14ZM25.5714 14C25.5714 7.60928 20.3907 2.42857 14 2.42857C7.60928 2.42857 2.42857 7.60928 2.42857 14C2.42857 20.3907 7.60928 25.5714 14 25.5714C20.3907 25.5714 25.5714 20.3907 25.5714 14Z" fill="#0052D9"/>
                            </svg>
                            <span style="margin-left:10px">{{item.AdminRealName}}</span>
                        </div>
                        <div class="read-count">
                            <span>PV:{{item.Pv}}</span>
                            <span v-permission="reportManageBtn.reportManage_reportList_uv">UV:{{item.Uv}}</span>
                        </div>
                        
                        <div class="handle-icon" @click.stop="handleOptReportItem(item)" v-if="item.ClassifyEnabled">
                            <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>
                </li>
            </ul>
        </van-list>
    </div>

    <!-- 添加报告按钮 -->
    <div class="add-report-btn" @click="handeAddReport" v-if="isAddReportBtnShow">
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.0499 15.9499V27.5H15.9499V15.9499H27.5V12.0499H15.9499V0.5H12.0499V12.0499H0.5V15.9499H12.0499Z" fill="white"/>
        </svg>
    </div>

    <!-- 下载pdf和图片选择下载类型 -->
    <van-action-sheet 
        v-model:show="showDownloadPdfImg"
        cancel-text="取消"
        close-on-click-action
    >
        <div class="report-item-action-box" v-if="activeItem">
            <div class="title">{{downloadPdfImgType==='pdf'?'下载pdf':'下载长图'}}</div>
            <template v-if="downloadPdfImgType==='pdf'">
                <div 
                    class="item" 
                    v-if="checkAuthBtn(reportManageBtn.reportManage_exportPdf) && activeItem.DetailPdfUrl"
                    @click="downloadPdfImg(activeItem,1)"
                >电脑版</div>
                <div 
                    class="item" 
                    v-if="checkAuthBtn(reportManageBtn.reportManage_exportPdf) && activeItem.DetailPdfUrlMobile"
                    @click="downloadPdfImg(activeItem,3)"
                >手机版</div>
            </template>
            <template v-if="downloadPdfImgType==='img'">
                <div 
                    class="item" 
                    v-if="checkAuthBtn(reportManageBtn.reportManage_exportImg) && activeItem.DetailImgUrl"
                    @click="downloadPdfImg(activeItem,2)"
                >电脑版</div>
                <div 
                    class="item" 
                    v-if="checkAuthBtn(reportManageBtn.reportManage_exportImg) && activeItem.DetailImgUrlMobile"
                    @click="downloadPdfImg(activeItem,4)"
                >手机版</div>
            </template>
        </div>
    </van-action-sheet>

    <!-- 报告item操作 -->
    <van-action-sheet 
        teleport="body"
        v-model:show="showReportItemOpt"
        cancel-text="取消"
        close-on-click-action
    >
        <div class="report-item-action-box" v-if="activeItem">
            <div class="title">{{activeItem.Title}}</div>
            <!-- 操作：未发布——发布、编辑、删除
                    已发布——取消发布、推送消息/已推送消息
                    待提交——提交、编辑、删除
                    待审批——撤销
                    已通过——撤销、推送消息/已推送消息
                    已驳回——撤销 
            -->
            <!-- 未发布，待提交 -->
            <template v-if="[1,3].includes(activeItem.State)">
                <div class="item" @click="handleReportEdit(activeItem)" v-permission="reportManageBtn.reportManage_reportEdit">编辑</div>
                <div class="item" v-if="checkAuthBtn(reportManageBtn.reportManage_publish)&&activeItem.State===1"
                    @click="handleReportPublish(activeItem)">发布</div>
                <div class="item" v-if="checkAuthBtn(reportManageBtn.reportManage_publish)&&activeItem.State===3"
                    @click="handleReportSubmit(activeItem)">提交</div>
                <div class="item" @click="handleReportDel(activeItem)" v-permission="reportManageBtn.reportManage_reportDel">删除</div>
            </template>
            <!-- 已发布，已通过 -->
            <template v-if="[2,6].includes(activeItem.State)">
                <div class="item" v-if="checkAuthBtn(reportManageBtn.reportManage_cancelPublish)&&activeItem.State===2&&activeItem.HasAuth"
                    @click="handleReportPublishCancle(activeItem)">撤销</div> <!-- 实际上是取消发布 -->
                <div class="item" v-if="checkAuthBtn(reportManageBtn.reportManage_cancelPublish)&&activeItem.State===6&&activeItem.HasAuth"
                    @click="handleReportCancel(activeItem)">撤销</div>
                <div class="item" v-if="checkAuthBtn(reportManageBtn.reportManage_exportPdf) && activeItem.DetailPdfUrl"
                    @click="showDownloadPdfImg=true;downloadPdfImgType='pdf'">下载pdf</div>
                <div class="item" v-if="checkAuthBtn(reportManageBtn.reportManage_exportImg) && activeItem.DetailImgUrl"
                    @click="showDownloadPdfImg=true;downloadPdfImgType='img'">下载长图</div>
                <div class="item" @click="handldReportMsgSend(activeItem)" v-if="activeItem.MsgIsSend==0&&checkAuthBtn(reportManageBtn.reportManage_sendMsg)&&activeItem.HasAuth">推送消息</div>
            </template>
            <!-- 待审批,已驳回 -->
            <template v-if="[4,5].includes(activeItem.State)">
                <div class="item" v-if="checkAuthBtn(reportManageBtn.reportManage_cancelPublish)&&activeItem.HasAuth"
                    @click="handleReportCancel(activeItem)">撤销</div>
            </template>
            

            <div class="item" v-if="checkAuthBtn(reportManageBtn.reportManage_audioUpload)&&activeItem.HasAuth"
                @click="handleShowUploadAudio(activeItem)">音频上传</div>
            <div class="item" v-if="checkAuthBtn(reportManageBtn.reportManage_audioDownload)&&(activeItem.VideoUrl || activeItem.ChapterVideoList.length>0)"
                @click="handleDownloadAudio(activeItem)">音频下载</div>

        </div>
        
    </van-action-sheet>

    <!-- 分类弹窗 -->
    <van-popup 
        v-model:show="showClassify"
        :position="width>650?'center':'bottom'"
        :style="width>650?{ width: '400px'}:''"
        round
    >
        <ListClassify @close="showClassify=false" @confirm="handleConfirmClassify"/>
    </van-popup>

    <!-- 报告发布弹窗 -->
    <van-popup 
        v-model:show="showPublishPop"
        position="center"
        round
    >
        <ReportPublishPop :reportData="activeReportData" :waterMarkStr="waterMarkStr" @close="handlePublishPopClose"/>
    </van-popup>


    <!-- 筛选项弹窗-->
    <van-popup
        v-model:show="isShowFilterPopup"
        position="bottom"
        :style="{ height: '100%' }"
    >
        <ReportFilter 
            :filter="listState"
            @change="handleChangeFilter"
            @close="isShowFilterPopup=false"
        />
    </van-popup>


    <!-- 报告基础信息弹窗 -->
     <van-popup
        v-model:show="isShowReportInfoPopup"
        position="bottom"
        :style="{ height: '100%' }"
    >
        <AddReportBaseInfoV2 
            @close="isShowReportInfoPopup=false"
        />
    </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"
                >
                    <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>
</template>

<style lang="scss" scoped>
.add-report-btn{
    width: var(--van-back-top-size);
    height: var(--van-back-top-size);
    position: fixed;
    right: var(--van-back-top-right);
    bottom: calc(var(--van-back-top-bottom) + var(--van-back-top-size) + 10px);
    background-color: $theme-color;
    border-radius: 50%;
    box-shadow: 0px 6px 28px 4px rgba(0, 0, 0, 0.05), 0px 16px 20px 2px rgba(0, 0, 0, 0.06), 0px 10px 10px -6px rgba(0, 0, 0, 0.1);
    svg{
        width: 27px;
        height: 27px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
}
.sticky-box{
    position: sticky;
    top: 0;
    z-index: 99;
    border-bottom: 1px solid #E7E7E7;
    background: #fff;
    :deep(.van-dropdown-menu__bar){
        box-shadow: none;
        border-bottom: 1px solid $border-color;
    }
    .bot-btn-box{
        border-top: 1px solid $border-color;
        padding: 32px;
        display: flex;
        justify-content: space-between;
        .btn{
            width: 327px;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 12px;
            font-size: 32px;
            font-weight: 600;
        }
        .cancel-btn{
            background-color: #F2F3FF;
            color: $theme-color;
        }
        .confirm-btn{
            background-color: $theme-color;
            color: #fff;
        }
    }
    .frequency-opt-box{
        ul{
            display: flex;
            flex-wrap: wrap;
            padding: 32px;
        }
        .item{
            width: 200px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(0, 0, 0, 0.9);
            margin-left: 12px;
            margin-right: 12px;
            margin-bottom: 24px;
            background-color: #F3F3F3;
            border-radius: 12px;
        }
        .item-active{
            background-color: #F2F3FF;
            color: $theme-color;
        }
    }
    .report-status-box{
        ul{
           padding: 32px; 
        }
        
        .status-item{
            line-height: 80px;
            border-radius: 12px;
            background-color: #F3F3F3;
            text-align: center;
            margin-bottom: 24px;
            &.active{
                background-color: #F2F3FF;
                color: $theme-color;
            }
        }
    }
    .clear-filter-box{
        padding: 0 34px;
        height: 84px;
        background-color: #F2F3FF;
        display: flex;
        align-items: center;
        font-size: 28px;
        position: relative;
        .rocket{
            width: 48px;
            height: 48px;
        }
        .close-icon{
            position: absolute;
            right: 34px;
            top: 50%;
            transform: translateY(-50%);
        }
    }

}
.top-box{
    padding: 30px 34px;
    background-color: #fff;
    display: flex;
    align-items: center;
    .menu-icon{
        width: 70px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #F2F6FA;
        margin-left: 20px;
        border-radius: 50%;
        &.active{
            color: $theme-color;
        }
        svg{
            width: 48px;
            height: 48px;
        }
    }
    :deep(.van-search){
        padding: 0;
    }
}


.list-wrap{
    padding: 30px 34px;
    .item{
        padding: 20px;
        margin-bottom: 20px;
        border: 1px solid $border-color;
        box-shadow: 0px 3px 12px rgba(52, 75, 120, 0.08);
        border-radius: 8px;
        .list-top {
            display: flex;
            justify-content: space-between;
            .status {
                flex-shrink: 0;
            }
        }
        .title{
            .tag{
                display: inline-block;
                width: 100px;
                height: 44px;
                line-height: 44px;
                text-align: center;
                font-size: 28px;
                background: rgba(0, 82, 217, 0.1);
                border-radius: 4px;
                color: $theme-color;
            }
            .week{
                color: $font-success;
                background: rgba(43, 164, 113, 0.1);
            }
            .day{
                color: $theme-warning;
                background: rgba(227, 115, 24, 0.1);
            }
            font-size: 32px;
            line-height: 44px;
            margin: 0;
        }
        .inline-title{
            margin-left: -14px;
        }
        .des{
            margin-top: 10px;
            margin-bottom: 20px;
            font-size: 28px;
            color: $font-grey;
            min-height: 60px;
        }
        .bot-info{
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: $font-grey;
            font-size: 28px;
            .time{
                flex: 1;
            }
            .active-status{
                color: $font-success;
            }
            .read-count{
                color: $theme-warning;
                margin-right: 30px;
                span{
                    display: inline-block;
                    margin: 0 10px;
                }
            }
        }
    }
}

.classify-name {
    padding: 30px 34px;
    color: #666;
}

.report-item-action-box{
    .title{
        padding: 30px 32px;
        font-weight: 700;
        text-align: center;
        background: #eee;
    }
    .item{
        text-align: center;
        line-height: 48PX;
        font-size: 32px;
        border-top: 1px solid $border-color;
    }
}

.calendar-box{
    :deep(.van-calendar__header-title){
        height: auto;
        min-height: var(--van-calendar-header-title-height);
    }
    :deep(.van-calendar__header){
        box-shadow: none;
    }
    .time-type-box{
        font-weight: normal;
        text-align: left;
        padding-left: 32px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
        .item{
            display: inline-block;
            margin-right: 40px;
            color: $font-grey;
            position: relative;
            &.active{
                color: #333;
                &::after{
                    content: '';
                    width: 30PX;
                    height: 4PX;
                    background-color: $theme-color;
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    border-radius: 2px;
                    transform: translateX(-50%);
                }
            }
        }
    }
}

.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;
        }
    }
}


@media screen and (min-width:$media-width){
    .add-report-btn{
        svg{
            width: 14px;
            height: 14px;
        }
    }
    .sticky-box{
        top: 60px;
        .bot-btn-box{
            padding: 32px;
            justify-content: flex-end;
            .btn{
                width: 120px;
                height: 40px;
                border-radius: 6px;
                font-size: 16px;
                margin-left: 20px;
            }
        }
        .frequency-opt-box{
            ul{
                padding: 32px;
            }
            .item{
                width: 100px;
                height: 40px;
                margin-left: 6px;
                margin-right: 6px;
                margin-bottom: 12px;
                border-radius: 6px;
            }
        }
        .report-status-box{
            ul{
                padding: 32px;
            }
            .status-item{
                line-height: 40px;
                border-radius: 6px;
                margin-bottom: 12px;
            }
        }
        .clear-filter-box{
            padding: 0 17px;
            height: 42px;
            font-size: 14px;
            .rocket{
                width: 24px;
                height: 24px;
            }
            .close-icon{
                right: 17px;
            }
        }
    }
    .top-box{
        padding: 15px;
        .menu-icon{
            width: 40px;
            height: 40px;
            svg{
                width: 28px;
                height: 28px;
            }
        }
    }

    .list-wrap{
        padding: 30px;
        .item{
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 4px;
            .title{
                font-size: 16px;
                line-height: 22px;
                .tag{
                    width: 50px;
                    height: 22px;
                    line-height: 22px;
                    font-size: 14px;
                    border-radius: 2px;
                }
            }
            .inline-title{
                margin-left: -14px;
            }
            .des{
                margin-top: 5px;
                margin-bottom: 10px;
                font-size: 14px;
                min-height: 30px;
            }
            .bot-info{
                font-size: 14px;
            }
        }
    }

    .bot-btns{
        bottom: 24px;
    }

    .report-item-action-box{
        .title{
            padding: 10px 16px;
        }
        .item{
            font-size: 16px;
        }
    }

    .classify-name {
        padding: 15px;
    }
}
</style>