<script setup>
import {ref,reactive,onMounted,onActivated} from 'vue'
import {apiGetWechatQRCode} from '@/api/common'
import {apiVoiceList,apiVoiceDel,apiVoicePlayRecord,apiVoiceSendMsg,apiMyVoiceCount,apiVoicePublish} from '@/api/voice'
import {apiApplyPermission,apiUserInfo} from '@/api/user'
import SelfList from '@/components/SelfList.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useElementSize } from '@vueuse/core'
import moment from 'moment'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'

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

//监听列表页面版心宽度
const listPageEl=ref('')
const {width}=useElementSize(listPageEl)

let user_id=store.state.userInfo?.user_id||''
const init=async ()=>{
    if(!user_id){
        const res=await apiUserInfo()
        if(res.code===200){
            user_id=res.data.user_id
        }
    }
    getStatusCount()
    getVoiceList()
}


//状态选项
let status=reactive({
    list:[
        {
            lable:'未发布',
            count:0,
            value:0,
            key:'Unpublished'
        },
        {
            lable:'已发布',
            count:0,
            value:1,
            key:'Published'
        },
        {
            lable:'全部',
            count:0,
            value:2,
            key:'All'
        }
    ],
    select:0
})
const getStatusCount=async ()=>{
    const res=await apiMyVoiceCount({author_id:user_id})
    if(res.code===200){
        status.list.forEach(item=>{
            item.count=res.data[item.key]
        })
    }
}


//状态切换
const handleChangeStatus=(item)=>{
    status.select=item.value
    listState.finished=false
    listState.page=1
    listState.list=[]
    getStatusCount()
    getVoiceList()
}


//获取音频列表数据
let listState = reactive({
    loading:false,
    finished:false,
    page:1,
    pageSize:20,
    list:[],
})
const getVoiceList=async ()=>{
    listState.loading=true
    const res=await apiVoiceList({
        page_index:Number(listState.page),
        page_size:listState.pageSize,
        author_id:Number(user_id),
        mine_status:status.select
    })
    listState.loading=false
    if(listState.page===1){
        document.body.scrollTop=document.documentElement.scrollTop=0
    }
    if(res.code===200){
        let arr=res.data.List||[]
        listState.list=[...listState.list,...arr]
        if(arr.length===0||arr.length<listState.pageSize){
            listState.finished=true
        }
    }
}

// 加载下一页
const onLoad=()=>{
    listState.page++
    getVoiceList()
}

//处理音频时长显示
const formarVoiceTime=(e)=>{
    let m=parseInt(e/60)
    let s=parseInt(e%60)
    return `${m>9?m:'0'+m}:${s>9?s:'0'+s}`
}

//获取音频单个对应的小程序二维码
const handelGetQRCodeImg=async (item)=>{
    if(item.QRCodeImg) return
    const res=await apiGetWechatQRCode({
        CodeScene:JSON.stringify({voiceId:item.BroadcastId}),
        CodePage:'pages-voice/voiceDetail'
    })
    if(res.code===200){
        item.QRCodeImg=res.data
    }
}

//删除音频
const handleDel=(item)=>{
    ElMessageBox({
        title:`温馨提醒`,
        message:'确定要删除该语音播报吗？',
        center: true,
        dangerouslyUseHTMLString: true,
        confirmButtonText:'确定',
        confirmButtonClass:'self-elmessage-confirm-btn',
        showCancelButton:true,
        cancelButtonText:'取消',
        cancelButtonClass:'self-elmessage-cancel-btn'
    }).then(()=>{
        if(store.state.audioData.voiceId==item.BroadcastId){
            //删除的正在播放
            store.commit('closeAudio')
        }
        apiVoiceDel({broadcast_id:Number(item.BroadcastId)}).then(res=>{
            if(res.code===200){
                ElMessage.success('操作成功')
                listState.page=1
                listState.finished=false
                listState.list=[]
                getStatusCount()
                getVoiceList()
            }
        })
    }).catch(()=>{
            
    })
}

//发送模板消息
const handleSendMsg=async (item)=>{
    ElMessageBox({
        title:`温馨提醒`,
        message:'该操作将推送模板消息和客群，确认推送吗？',
        center: true,
        dangerouslyUseHTMLString: true,
        confirmButtonText:'确定',
        confirmButtonClass:'self-elmessage-confirm-btn',
        showCancelButton:true,
        cancelButtonText:'取消',
        cancelButtonClass:'self-elmessage-cancel-btn'
    }).then(()=>{
        apiVoiceSendMsg({broadcast_id:Number(item.BroadcastId)}).then(res=>{
            if(res.code===200){
                ElMessage.success('操作成功')
                item.CouldSendMsg=false
            }
        })
    }).catch(()=>{
            
    })
}

//发布语音&推送
const handlePublish=(item)=>{
    ElMessageBox({
        title:`温馨提醒`,
        message:'该操作将发布并且推送模板消息和客群',
        center: true,
        dangerouslyUseHTMLString: true,
        confirmButtonText:'确定',
        confirmButtonClass:'self-elmessage-confirm-btn',
        showCancelButton:true,
        cancelButtonText:'取消',
        cancelButtonClass:'self-elmessage-cancel-btn'
    }).then(async ()=>{
        const pubRes=await apiVoicePublish({
            broadcast_id:Number(item.BroadcastId),
            publish_type:1
        })
        if(pubRes.code===200){
            const sendRes=await apiVoiceSendMsg({broadcast_id:item.BroadcastId})
            if(sendRes.code===200){
                ElMessage.success('发布且推送成功')
                listState.page=1
                listState.list=[]
                listState.finished=false
                getStatusCount()
                getVoiceList()
            }else{
                ElMessage.warning(sendRes.msg)
            }
        }else{
            ElMessage.warning(pubRes.msg)
        }
    }).catch(()=>{
            
    })
}

//播放音频
const handlePlay=(item)=>{
    if(store.state.audioData.voiceId==item.BroadcastId){
        if(store.state.audioData.paused){
            store.state.audioData.INS.play()
        }else{
            store.state.audioData.INS.pause()
        }
        return
    }
    store.commit('addAudio',{
        list:[{name:item.BroadcastName,url:item.VoiceUrl,time:item.VoicePlaySeconds}],
        voiceId:item.BroadcastId,
        index:0
    })
    if(item.PublishState==0) return //待发布的不记录
    // handleVoiceRecord(item)
}

//上报音频播放记录
const handleVoiceRecord=async (item)=>{
    const res=await apiVoicePlayRecord({
        broadcast_id:item.BroadcastId
    })
    if(res.code===200){
        console.log('上报音频播放记录');
    }
}

//跳转详情
const goDetail=async (item)=>{
    if(item.PublishState==0){
        const res=await apiGetWechatQRCode({
            CodeScene:JSON.stringify({voiceId:item.BroadcastId}),
            CodePage:'pages-voice/addVoice'
        })
        let htmlStr=`<div>PC端暂不支持编辑语音播报，请扫码进入小程序编辑</div>`
        if(res.code===200){
            htmlStr=`<div style="margin-bottom:10px">PC端暂不支持编辑语音播报，请扫码进入小程序编辑</div><div><img style="width:150px;height:150px" src="${res.data}" ></div>`
        }

        ElMessageBox({
            title:`温馨提醒`,
            message:htmlStr,
            center: true,
            dangerouslyUseHTMLString: true,
            confirmButtonText:'知道了',
            confirmButtonClass:'self-elmessage-confirm-btn',
            showCancelButton:false,
            cancelButtonText:'取消',
            cancelButtonClass:'self-elmessage-cancel-btn'
        }).then(()=>{}).catch(()=>{})
    }else{
        router.push({
            path:'/voice/detail',
            query:{
                voiceId:item.BroadcastId,     
            }
        })
    }
    
}


onMounted(() => {
    init()
    //向小程序发送消息
    let postData = {
        path: "/pages/voice/voice",
        params:{},
        title: "语音播报",
        shareImg:''
    };
    wx.miniProgram.postMessage({ data: postData });
});
onActivated(()=>{
    //向小程序发送消息
    let postData = {
        path: "/pages/voice/voice",
        params:{},
        title: "语音播报",
        shareImg:''
    };
    wx.miniProgram.postMessage({ data: postData });
})


</script>

<template>
    <div class="my-voice-list-page" ref="listPageEl">
        <div class="top-nav-list-box" :style="{width:width+'px'}">
            <span 
                v-for="item in status.list" :key="item.value" 
                :class="item.value==status.select?'active':''"
                @click="handleChangeStatus(item)"
            >{{item.lable}}（{{item.count}}）</span>
        </div>

        <SelfList 
            :finished="listState.finished" 
            :isEmpty="listState.list.length===0&&listState.finished"
            :loading="listState.loading"
            :count="listState.list.length"
            @listOnload="onLoad"
        >
            <div class="list-wrap">
                <div class="item" v-for="item in listState.list" :key="item.BroadcastId">
                    <h2 class="title" @click="goDetail(item)">{{item.BroadcastName}}</h2>
                    <div class="time">{{item.PublishState==0?'保存':'发布'}}时间：{{moment(item.PublishState==0?item.ModifyTime:item.PublishTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
                    <div class="flex audio-box" @click="handlePlay(item)">
                        <div :class="['icon',($store.state.audioData.voiceId==item.BroadcastId)&&!$store.state.audioData.paused?'active':'']"></div>
                        <div>{{formarVoiceTime(item.VoicePlaySeconds)}}</div>
                    </div>
                    <div class="btns-box">
                        <el-popover
                            :width="200"
                            trigger="hover"
                            @show="handelGetQRCodeImg(item)"
                        >
                            <template #reference>
                                <div class="icon-wechat" v-if="item.PublishState!=0"></div>
                            </template>
                            <template #default>
                                <img style="width:100%" :src="item.QRCodeImg" alt="">
                            </template>
                        </el-popover>
                        <img 
                            class="btn del-btn" 
                            v-if="item.IsAuthor" 
                            src="@/assets/voice/del.png" 
                            alt=""
                            @click.stop="handleDel(item)"
                        />
                        <img 
                            class="btn  publish-btn" 
                            v-if="item.CouldSendMsg&&item.PublishState!=0"
                            src="@/assets/voice/publish.png" 
                            alt=""
                            @click.stop="handleSendMsg(item)"
                        />
                        <img 
                            class="btn  clock-btn" 
                            v-if="item.PublishState==0"
                            src="@/assets/voice/publish2.png" 
                            alt=""
                            @click.stop="handlePublish(item)"
                        />
                    </div>
                </div>
            </div>
        </SelfList>
    </div>



</template>

<style lang="scss" scoped>
.icon-wechat{
    cursor: pointer;
    width: 24px;
    height: 24px;
    background-image: url('@/assets/icon-wechat.png');
    background-size: cover;
    float: right;
    margin-left: 60px;
    &:hover{
        background-image: url('@/assets/icon-wechat2.png');
    }
}
.my-voice-list-page{
    padding-top: 64px;
    .top-nav-list-box{
        position: fixed;
        top: 60px;
        padding: 30px 0 12px;
        width: 100%;
        max-width: 1240px;
        z-index: 10;
        background: #FFFFFF;
        // box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.04);
        // border: 1px solid #F2F2F2;
        span{
            width: 140px;
            height: 40px;
            background: #F6F6F6;
            border-radius: 20px;
            text-align: center;
            display: inline-block;
            margin-right: 30px;
            line-height: 40px;
            cursor: pointer;
            font-size: 16px;
            box-sizing: border-box;
        }

        .active{
            background: #FFFBF5;
            box-shadow: 0px 6px 7px 0px #FFF7EB;
            border-radius: 20px;
            border: 1px solid #F3A52F;
            color: #F3A52F;
        }
    }

    .list-wrap{
        .item{
            padding: 20px;
            border-left: 1px solid #F2F2F2;
            border-top: 1px solid #F2F2F2;
            border-right: 1px solid #F2F2F2;
            position: relative;
            &:last-child{
                border-bottom: 1px solid #F2F2F2;
            }
            .title{
                font-size: 16px;
                margin: 0 0 10px 0;
                cursor: pointer;
            }
            .time{
                color: #666;
                font-size: 14px;
            }
            .audio-box{
                width: 193px;
                height: 38px;
                background: #F4E1C9;
                border-radius: 28px;
                color: #E3B377;
                font-size: 14px;
                align-items: center;
                margin-top: 20px;
                padding-left: 20px;
                cursor: pointer;
                .icon{
                    width: 16px;
                    height: 19px;
                    background-image: url('@/assets/voice/pause.png');
                    background-size: cover;
                    margin-right: 10px;
                }
                .active{
                    background-image: url('@/assets/voice/playing.png');
                }
            }
            .btns-box{
                position: absolute;
                right: 20px;
                bottom: 30px;
                .btn{
                    float: right;
                    cursor: pointer;
                    margin-left: 60px;
                }
                .publish-btn{
                    width: 23px;
                    height: 23px;
                }
                .del-btn{
                    width: 23px;
                    height: 23px;
                }
                .clock-btn{
                    width: 23px;
                }
            }
        }
    }
}
</style>