<template>
    <div class="detail_page">
        <div class="blackup_btn" @click="returnbtn">
            <Icon type="ios-arrow-back" size="24" color="#222222" />
            <div class="label">任务详情</div>
        </div>
        <div class="task_info">
            <div class="task_info_title">
                <div class="task_name_box">
                    <div class="task_name">{{taskInfo.name}}</div>
                    <div class="task_verbal">执行话术：{{taskInfo.typeName}}</div>
                </div>
                <div class="task_time">{{timeFormat(taskInfo.planTime)}}</div>
            </div>
            <div class="task_info_num">
                <div class="info_num_item">
                    <div class="num">{{addCommas(taskInfo.lingCount)}}</div>
                    <div class="label">拨打数量</div>
                </div>
                <div class="info_num_item">
                    <div class="num">{{((taskInfo.answerRate||0)*100).toFixed(2)*100/100}}%</div>
                    <div class="label">接通率</div>
                </div>
                <div class="info_num_item">
                    <div class="num">{{addCommas(taskInfo.highIntentionCount)}}</div>
                    <div class="label">高意向数量</div>
                </div>
                <div class="info_num_item">
                    <div class="num">{{((taskInfo.notAnswerRate||0)*100).toFixed(2)*100/100}}%</div>
                    <div class="label">未接通率</div>
                </div>
                <div class="info_num_item">
                    <div class="num">{{((taskInfo.invalidRate||0)*100).toFixed(2)*100/100}}%</div>
                    <div class="label">号码无效率</div>
                </div>
            </div>
        </div>
        <div class="page_content">
            <div class="content_header">
                <div class="content_header_left">
                    <div class="filter_item">
                        <label>意向：</label>
                        <Select v-model="intentionNames" multiple clearable @on-change="handleSearch">
                            <Option v-for="(item,index) in intentionList" :key="index" :value="item" :label="item">{{item}}</Option>
                        </Select>
                    </div>
                </div>
                <div class="content_header_right">
                    <Button v-if="phoneList&&phoneList.length&&taskInfo.status === 10" class="export_btn" type="primary" :loading="loading" @click="handleExport">导出</Button>
                </div>
            </div>
            <div class="phone_list">
                <div class="phone_item" v-for="(item, index) in phoneList" :key="index">
                    <div class="row_item">
                        <div class="phone item">{{item.phone}}</div>
                        <div class="intention item">{{item.intentionName}}</div>
                        <div class="call_time item">{{timeFormat(item.callTime)}}</div>
                        <div class="audio item">
                            <div v-if="item.recordName" class="sound_play">
                                <div class="play_pause">
                                    <img v-if="item.isPlaying" class="play_icon" src="/img/play_icon.png" @click="pauseAudio"></img>
                                    <img v-else class="pause_icon" src="/img/pause_icon.png" @click="playAudio(item,index)"></img>
                                </div>
                                <div class="play_time">{{Math.floor(item.currentTime/60)}}:{{Math.floor(item.currentTime%60)>=10?Math.floor(item.currentTime%60):'0'+Math.floor(item.currentTime%60)}}</div>
                                <Slider class="play_slider" v-model="item.currentTime" :tip-format="tipFormat" :step="1" :min="0" :max="item.duration" @on-change="sliderChang($event,item,index)" />
                                <div class="total_time">{{Math.floor(item.duration/60)}}:{{item.duration%60>=10?item.duration%60:'0'+item.duration%60}}</div>
                            </div>
                        </div>
                    </div>
                    <div v-if="!!item.concern" class="row_item ">
                        <div class="concern">
                            <div class="label">客户关注点：</div>
                            <div class="concern_list">
                                <div class="concern_item" v-for="(name,index) in item.concern.split(',')" :key="index">{{name}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 分页 -->
            <Page :total="total" :current="currentPage" show-total show-sizer @on-change="handleCurrentChange" @on-page-size-change="handlePageSize" :page-size-opts="pageSizeOpts" />
        </div>
    </div>
</template>
<script>
import userBox from '@/pages/call/components/userBox'
import tablePageMixin from '_m/tablePage.mixin'
import { timeFormat, addCommas } from '@/utils'
export default {
    name: 'taskDetail',
    mixins: [tablePageMixin],
    components: {
        userBox,
    },
    data () {
        return {
            sliderValue: 10,
            sliderMaxValue: 210,
            taskInfo: {},
            innerAudioContext: null,
            isPlaying: false,
            currentIndex: 0,
            timeFormat: timeFormat,
            addCommas: addCommas,
            loading: false,
            intentionList: [],
            intentionNames: [],
            phoneList: []
        }
    },
    created () {
        this.getTaskInfo()
        this.initData()
        this.getIntentionList()
    },
    methods: {
        handleExport () {
            this.loading = true
            this.$http.post(`/call/api/task/phone/export`, {
                intentionNames: this.intentionNames,
                taskId: this.$route.query.id,
                page: this.currentPage,
                pageCount: this.pageSize,
            }).then(response => {
                const { code, data, msg } = response
                if (code === 1) {
                    let dataUrl = 'https://' + process.env.VUE_APP_FILELOAD + '.cos.ap-guangzhou.myqcloud.com/' + data.filePyth
                    let alink = document.createElement('a')
                    fetch(dataUrl, { responseType: 'blob' }).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
                        alink.href = URL.createObjectURL(blob)
                        alink.download = data.filePyth.substr(data.filePyth.lastIndexOf('/') + 1)
                        document.body.appendChild(alink)
                        alink.click()
                    })
                } else {
                    this.$Notice.warning({
                        desc: msg
                    })
                }
            }).finally(() => {
                this.loading = false
            })
        },
        getIntentionList () {
            this.$http.post(`/call/api/task/intention-options?taskId=${this.$route.query.id}`).then((response) => {
                let { data, code, msg } = response
                if (code === 1) {
                    this.intentionList = data
                } else {
                    this.$Notice.warning({
                        desc: msg
                    })
                }
            })
        },
        getTaskInfo () {
            this.$http.get(`/call/api/task/findById`, {
                params: {
                    id: this.$route.query.id
                }
            }).then((response) => {
                let { data, code, msg } = response
                if (code === 1) {
                    this.taskInfo = data
                } else {
                    this.$Notice.warning({
                        desc: msg
                    })
                }
            })
        },
        handleSearch () {
            this.currentPage = 1
            if (this.innerAudioContext) {
                this.innerAudioContext.pause()
                this.innerAudioContext.destroy()
                this.innerAudioContext = null
            }
            this.currentIndex = 0
            this.initData()
        },
        initData () {
            this.$http.post(`/call/api/task/phone/findListByPage`, {
                intentionNames: this.intentionNames,
                taskId: this.$route.query.id,
                page: this.currentPage,
                pageCount: this.pageSize,
            }).then((response) => {
                let { data, code, msg } = response
                if (code === 1) {
                    this.phoneList = data.records
                    this.phoneList.forEach(item => {
                        item.currentTime = item.currentTime || 0
                    })
                    this.total = data.total
                } else {
                    this.$Notice.warning({
                        desc: msg
                    })
                }
            })
        },
        returnbtn () {
            this.$router.go(-1)
        },
        initAudio() {
            this.innerAudioContext = new Audio()
            // 监听事件
            this.innerAudioContext.addEventListener('play', () => {
                this.phoneList[this.currentIndex].isPlaying = true
                this.$forceUpdate()
            })

            this.innerAudioContext.addEventListener('pause', () => {
                this.phoneList[this.currentIndex].isPlaying = false
                this.$forceUpdate()
            })

            this.innerAudioContext.addEventListener('timeupdate', () => {
                this.phoneList[this.currentIndex].currentTime = this.innerAudioContext.currentTime
                this.$forceUpdate()
            })
        },
        playAudio (item, index) {
            if (!this.innerAudioContext) {
                this.initAudio()
            }
            this.innerAudioContext.pause()
            this.phoneList[this.currentIndex].isPlaying = false
            this.$forceUpdate()
            this.innerAudioContext.src = item.recordName
            if (item.currentTime) {
                this.innerAudioContext.currentTime = item.currentTime >= item.duration ? 0 : item.currentTime
            }
            this.currentIndex = index
            this.innerAudioContext.play()
        },
        pauseAudio() {
            this.innerAudioContext.pause()
        },
        seekAudio(currentTime) {
            this.innerAudioContext.currentTime = currentTime
            this.innerAudioContext.play()
        },
        sliderChang (value, item, index) {
            item.currentTime = value
            if (item.isPlaying && index === this.currentIndex) {
                this.seekAudio(item.currentTime)
            }
        },
        tipFormat (currentTime) {
            return Math.floor(currentTime / 60) + ':' + (Math.floor(currentTime % 60) >= 10 ? Math.floor(currentTime % 60) : '0' + Math.floor(currentTime % 60))
        }
    },
    deactivated () {
        if (this.innerAudioContext) {
            try {
                this.innerAudioContext.pause()
                this.innerAudioContext.destroy()
                this.innerAudioContext = null
                this.currentIndex = 0
            } catch (e) {
                //TODO handle the exception
            }
        }
    },
    destroyed () {
        if (this.innerAudioContext) {
            try {
                this.innerAudioContext.pause()
                this.innerAudioContext.destroy()
                this.innerAudioContext = null
                this.currentIndex = 0
            } catch (e) {
            //TODO handle the exception
            }
        }
    }
}
</script>
<style lang="less" scoped>
.detail_page{
    min-width: 680px;
    .blackup_btn{
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        cursor: pointer;
        .label{
            font-weight: 400;
            font-size: 16px;
            color: #222222;
            margin-left: 8px;
        }
    }
    .task_info{
        margin-bottom: 16px;
        background: #FFFFFF;
        border-radius: 20px;
        .task_info_title{
            display: flex;
            justify-content: space-between;
            padding: 24px;
            border-bottom: 1px solid #F2F2F2;
            .task_name{
                font-weight: bold;
                font-size: 20px;
                color: #222222;
                line-height: 29px;
                margin-bottom: 8px;
            }
            .task_verbal{
                font-weight: 400;
                font-size: 14px;
                color: #666666;
                line-height: 20px;
            }
            .task_time{
                font-weight: 400;
                font-size: 14px;
                color: #999999;
            }
        }
        .task_info_num{
            height: 158px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            .info_num_item{
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                height: 140px;
                flex: 1;
                .num{
                    font-weight: 800;
                    font-size: 40px;
                    line-height: 58px;
                }
                .label{
                    font-weight: 400;
                    font-size: 14px;
                    color: rgba(34, 34, 34, 0.5);
                    line-height: 20px;
                }
            }
            .info_num_item:nth-child(1){
                .num{
                    color: #24D688;
                }
            }
            .info_num_item:nth-child(2){
                border-left: 1px solid #F2F2F2;
                .num{
                    color: #1677FF;
                }
            }
            .info_num_item:nth-child(3){
                border-left: 1px solid #F2F2F2;
                .num{
                    color: #FFA64E;
                }
            }
            .info_num_item:nth-child(4){
                border-left: 1px solid #F2F2F2;
                .num{
                    color: #FF4E4E;
                }
            }
            .info_num_item:nth-child(5){
                border-left: 1px solid #F2F2F2;
                .num{
                    color: #CCCCCC;
                }
            }
        }
    }
    .page_content{
        padding: 24px;
        margin: -24px;
        .content_header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;

            .export_btn{
                width: 104px;
                height: 44px;
                background: #24D688 !important;
                border-radius: 10px;
                box-shadow: none !important;
            }
            .filter_item{
                display: flex;
                align-items: center;
                label{
                    white-space: nowrap;
                    font-weight: bold;
                    font-size: 14px;
                    color: #222222;
                }
                .ivu-select,
                .ivu-input-wrapper{
                    min-width: 160px;
                    max-width: 360px;
                    display: inline-block;
                }
                .ivu-select-selection {
                    min-height: 40px;
                }
            }
        }
        .phone_list{
            border-radius: 20px;
            .phone_item{
                min-height: 68px;
                margin-bottom: 12px;
                background: #FFFFFF;
                border-radius: 20px;
                .row_item{
                    display: flex;
                    align-items: center;
                    .item{
                        padding: 0 24px;
                        box-sizing: content-box;
                        font-weight: 400;
                        font-size: 14px;
                        color: #222222;
                    }
                    .phone{
                        //max-width: 166px;
                        flex: 2;
                        min-width: 92px;
                    }
                    .intention{
                        //max-width: 114px;
                        flex: 2;
                        min-width: 42px;
                    }
                    .call_time{
                        //max-width: 206px;
                        flex: 3;
                        min-width: 131px;
                    }
                    .audio{
                        //max-width: 426px;
                        flex: 4;
                        min-width: 276px;
                    }
                    .sound_play{
                        display: flex;
                        align-items: center;
                        background: #FAFAFA;
                        border-radius: 21px;
                        padding: 0 16px 0 10px;
                        .play_time,
                        .total_time{
                            font-weight: 400;
                            font-size: 10px;
                            color: #999999;
                            line-height: 20px;
                        }
                        .play_pause{
                            margin-right: 12px;
                            .pause_icon,
                            .play_icon{
                                width: 20px;
                                height: 20px;
                            }
                        }
                        .play_slider{
                            flex: 1;
                            margin: 0 8px;
                            /deep/.ivu-slider-wrap{
                                height: 8px;
                                margin: 17px 0 15px 0;
                                background-color: #F2F2F2;
                                border-radius: 4px;
                                .ivu-slider-bar{
                                    height: 8px;
                                    background: #35E89A;
                                    border-radius: 4px;
                                }
                                .ivu-slider-button-wrap{
                                    top: -3px;
                                }
                            }
                            /deep/.ivu-tooltip{
                                .ivu-tooltip-rel{
                                    .ivu-slider-button{
                                        width: 12px;
                                        height: 12px;
                                        border: 2px solid #fff;
                                        border-radius: 50%;
                                        background-color: #fff;
                                        box-shadow: 0px 1px 6px 1px rgba(0,0,0,0.1);
                                        box-sizing: border-box;
                                        transform: scale(1) !important;
                                    }
                                }
                                .ivu-tooltip-popper{
                                    .ivu-tooltip-content{
                                        .ivu-tooltip-arrow{
                                            bottom: 4px;
                                            border-width: 4px 4px 0;
                                            margin-left: -4px;
                                        }
                                        .ivu-tooltip-inner{
                                            min-height: 15px;
                                            font-weight: 400;
                                            font-size: 10px;
                                            line-height: 15px;
                                            padding: 0 5px;
                                            border-radius: 3px;
                                        }
                                    }
                                }
                            }

                        }
                    }
                    .concern{
                        display: flex;
                        align-items: flex-start;
                        padding: 0 24px 16px;
                        .label{
                            font-weight: 400;
                            font-size: 14px;
                            color: #222222;
                            height: 25px;
                            line-height: 25px;
                            margin-right: 8px;
                        }
                        .concern_list{
                            display: flex;
                            flex-wrap: wrap;
                            gap: 8px;
                            .concern_item{
                                height: 25px;
                                line-height: 25px;
                                padding: 0 12px;
                                background: #FFFFFF;
                                border-radius: 5px;
                                border: 1px solid #24D688;
                                box-sizing: border-box;
                                font-weight: 400;
                                font-size: 12px;
                                color: #24D688;
                            }
                        }
                    }
                }
                .row_item:first-child{
                    min-height: 68px;
                }
            }
        }
    }
}
</style>
