<template>
    <div class="wrap">
        <div class="page-header">
            <el-row :gutter="20">
                <el-col :span="6" style="padding: 30px 0px 30px 30px;">
                    <div class="header-text1">已完成数量</div>
                    <div class="header-text2">{{boardObj.Complete}}</div>
                    <div class="header-text3">
                        <span>总数量</span>
                        <span>{{boardObj.Total}}</span>
                    </div>
                </el-col>
                <el-col :span="6" style="padding: 30px 0px 30px 30px;">
                    <div class="header-text1">接通数量</div>
                    <div class="header-text2">{{boardObj.Connected}}</div>
                    <div class="header-text3">
                        <span>接通率</span>
                        <span>{{boardObj.ConnectedRate}}</span>
                    </div>
                </el-col>
                <el-col :span="6" style="padding: 30px 0px 30px 30px;">
                    <div class="header-text1">平均通话时长</div>
                    <div class="header-text2">{{boardObj.longtimeAvg}}秒</div>
                    <div class="header-text3">
                        <span>总通话时长</span>
                        <span>{{boardObj.longtime}}</span>
                    </div>
                </el-col>
                <el-col :span="6" style="padding: 30px 0px 30px 30px;">
                    <div class="header-text1">二次完成量</div>
                    <div class="header-text2">{{boardObj.secondary}}</div>
                    <div class="header-text3">
                        <span>二次完成率</span>
                        <span>{{boardObj.secondaryRate}}</span>
                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="page-content">
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-card class="page-card">
                        
                        <el-row>
                            <el-col :span="16">
                                <div class="cardInfoTitle">完成量统计</div>
                                <div v-show="completeData.length" id="mainEcharts1" style="width: 100%; height: 300px;"></div>
                                <el-empty :image-size="50" v-show="!completeData.length"/>
                            </el-col>
                            <el-col :span="8" >
                                <div class="cardListBox">
                                    <div class="cardInfoTitle">坐席完成量排名</div>
                                    <div style="margin-top: 30px;">
                                        <el-row class="card-list">
                                            <el-col :span="2"></el-col>
                                            <el-col :span="6">工号</el-col>
                                            <el-col :span="6">姓名</el-col>
                                            <el-col :span="6">完成量</el-col>
                                        </el-row>
                                        <el-row v-for="(item,index) in sfCompleteData" :key="index" class="card-list">
                                            <el-col :span="2">
                                                <div :class="index<4?'titleRank-active':'titleRank'">{{ index+1 }}</div>
                                            </el-col>
                                            <el-col :span="6">{{item.name}}</el-col>
                                            <el-col :span="6">{{item.nickName}}</el-col>
                                            <el-col :span="6">{{item.number}}</el-col>
                                        </el-row>
                                        <el-empty :image-size="50" v-if="!sfCompleteData.length"/>
                                    </div>
                                </div>
                                
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
                <!-- <el-col :span="12">
                    <el-card class="page-card">
                        <template #header>
                            <div class="card-header">
                                <span>通话时长</span>
                            </div>
                        </template>
                        <div id="mainEcharts2" style="width: 100%; height: 300px;"></div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card class="page-card">
                        <template #header>
                            <div class="card-header">
                                <span>对话轮次</span>
                            </div>
                        </template>
                        <div id="mainEcharts3" style="width: 100%; height: 300px;"></div>
                    </el-card>
                </el-col> -->
                <el-col :span="24">
                    <el-card class="page-card">
                        <template #header>
                            <div class="card-header">
                                <span>接听状态</span>
                            </div>
                        </template>
                        <div v-show="listeningStatusData.length" ref="mainEcharts4" style="width: 100%;height: 300px;"></div>
                        <el-empty :image-size="50" v-show="!listeningStatusData.length"/>
                        
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { getPageListData } from '@/api/main/system/system';

import * as echarts from 'echarts';
let chartDom1
let chartDom2
let chartDom3
let chartDom4

const boardObj = ref({})
const completeData = ref([])
const sfCompleteData = ref([])
const callDurationData = ref({})
const dialogueRoundData = ref({})
const listeningStatusData = ref([])
const planId = ref()
const props = defineProps({
  planId: {
    type: Number,
    default: 0
  }
});
watch(props, (nweProps) => {
  initMethod(nweProps);
});
onMounted(() => {
    
    initMethod(props)
})
const mainEcharts4 = ref(null)
function initMethod(data) {
  planId.value = data.planId
  if (planId.value) {
    chartDom1 = document.getElementById('mainEcharts1');
    // chartDom2 = document.getElementById('mainEcharts2');
    // chartDom3 = document.getElementById('mainEcharts3');
    // chartDom4 = document.getElementById('mainEcharts4');
    chartDom4 = echarts.init(mainEcharts4.value);
    chartDom4.resize();
    selectPlDataBoard()
    selectPlComplete()
    getSfComplete()
    // getCallDuration()
    // getDialogueRound()
    getListeningStatus()
  }
}
// 接听状态
function getListeningStatus() {
    const params = {
        plId:planId.value
    }
    getPageListData("/SfPlanReport/selectListeningStatus",params).then((res)=>{
        if (res.data) {
            listeningStatusData.value = res.data
            const xData = [],yData = [],yData1 = [],yData2 = [],yData3 = [],yData4 = [], yData5 = [], yData6 = []
            let eleData,number = 0
            listeningStatusData.value.forEach((ele,index) => {
                if (eleData !== ele.date) {
                    xData.push(ele.date)
                    yData.push(ele.callRate)
                    number++
                    ele.callState==='正常接听'?yData1.push(ele.total):yData1.push(0)
                    ele.callState==='无人接听'?yData2.push(ele.total):yData2.push(0)
                    ele.callState==='稍后拨打'?yData3.push(ele.total):yData3.push(0)
                    ele.callState==='号码错误'?yData4.push(ele.total):yData4.push(0)
                    ele.callState==='本院职工'?yData5.push(ele.total):yData4.push(0)
                    ele.callState==='死亡'?yData6.push(ele.total):yData4.push(0)
                } else{
                    if (ele.callState === '正常接听') {
                        yData1[number-1] = ele.total
                    }else if (ele.callState === '无人接听'){
                        yData2[number-1] = ele.total
                    }else if (ele.callState === '稍后拨打'){
                        yData3[number-1] = ele.total
                    }else if (ele.callState === '号码错误'){
                        yData4[number-1] = ele.total
                    }else if (ele.callState === '本院职工'){
                        yData5[number-1] = ele.total
                    }else if (ele.callState === '死亡'){
                        yData6[number-1] = ele.total
                    }
                }
                eleData = ele.date
            });
            // let myChart4 = echarts.init(chartDom4);
            chartDom4.setOption(optionData4(xData,yData,yData1,yData2,yData3,yData4,yData5,yData6));
            nextTick(() => {
                chartDom4.resize();
            })
            // chartDom4.resize();

        }
    })
}

// 对话次数
function getDialogueRound() {
    const numbers = "10,15,30,45,60"
    const params = {
        plId:planId.value
    }
    getPageListData("/SfPlanReport/selectDialogueRound/"+numbers,params).then((res)=>{
        if (res.data) {
            dialogueRoundData.value = res.data
            let xData =  []
            let yData = []
            xData= Object.keys(dialogueRoundData.value) 
            yData= Object.values(dialogueRoundData.value) 
            let myChart3 = echarts.init(chartDom3);
            myChart3.setOption(optionData3(xData,yData)); 
        }
    })
}
// 坐席完成量
function getCallDuration() {
    const numbers = "10,15,30,45,60"
    const params = {
        plId:planId.value
    }
    getPageListData("/SfPlanReport/selectCallDuration/"+numbers,params).then((res)=>{
        if (res.data) {
            callDurationData.value = res.data
            let xData =  []
            let yData = []
            xData= Object.keys(callDurationData.value) 
            yData= Object.values(callDurationData.value) 
            let myChart2 = echarts.init(chartDom2);
            myChart2.setOption(optionData2(xData,yData));
        }
    })
}
// 坐席完成量
function getSfComplete() {
    const params = {
        plId:planId.value
    }
    getPageListData("/SfPlanReport/selectSfComplete",params).then((res)=>{
        if (res.data) {
            sfCompleteData.value = res.data
        }
    })
}

// 完成量统计
function selectPlComplete() {
    const params = {
        plId:planId.value
    }
    getPageListData("/SfPlanReport/selectPlComplete",params).then((res)=>{
        if (res.data) {
            completeData.value = res.data
            const xData = []
            const yData = []
            completeData.value.forEach(ele => {
                xData.push(ele.date)
                yData.push(ele.number)
            });
            let myChart1 = echarts.init(chartDom1);
            myChart1.setOption(optionData1(xData,yData));
        }
    })
}
// 数据看板
function selectPlDataBoard() {
    const params = {
        plId:planId.value
    }
    getPageListData("/SfPlanReport/selectPlDataBoard",params).then((res)=>{
        if (res.data) {
            boardObj.value = res.data
        }
    })
}


function optionData1(xData,yData) {
    let resultData = {
        xAxis: {
            type: 'category',
            data: xData
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: yData,
                barWidth : 30,
                type: 'bar'
            }
        ]
    }
    return resultData
}
function optionData2(xData,yData) {
    let resultData = {
        xAxis: {
            type: 'category',
            data: xData
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: yData,
            type: 'bar',
            barWidth : 30,
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            }
            }
        ]
    }
    return resultData
}
function optionData3(xData,yData) {
    let resultData = {
        xAxis: {
            type: 'category',
            data: xData
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: yData,
                barWidth : 30,
                type: 'bar'
            }
        ]
    }
    return resultData
}
function optionData4(xData,yData,yData1,yData2,yData3,yData4,yData5,yData6) {
    let resultData = {
        // grid: {
        //     width: '100%'
        // },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        
        legend: {
            data: ['接通率','正常接通', '无人接听', '稍后拨打', '号码错误', '本院职工', '死亡']
        },
        xAxis: [
            {
            type: 'category',
            data: xData,
            axisPointer: {
                type: 'shadow'
            }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '接通率',
                min: 0,
                max: 100,
                axisLabel: {
                    formatter: '{value}'
                }
            },
            {
                type: 'value',
                name: '次数',
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name: '接通率',
                type: 'line',
                tooltip: {
                    valueFormatter: function (value) {
                    return value;
                    }
                },
                data: yData
            },
            {
                name: '正常接通',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                    return value;
                    }
                },
                data: yData1
            },
            {
                name: '无人接听',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                    return value;
                    }
                },
                data: yData2
            },
            {
                name: '稍后拨打',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                    return value;
                    }
                },
                data: yData3
            },
            {
                name: '号码错误',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                    return value;
                    }
                },
                data: yData4
            },
            {
                name: '本院职工',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                    return value;
                    }
                },
                data: yData5
            },{
                name: '死亡',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                    return value;
                    }
                },
                data: yData6
            }
        ]
    };
    return resultData
}
</script>

<style scoped lang="scss">
.wrap {
    .page-header {
        .header-text1 {
            font-size: 14px;
            color: #919191;
            line-height: 36px;
        }

        .header-text2 {
            font-size: 32px;
            line-height: 50px;
        }

        .header-text3 {
            margin-top: 5px;

            span {
                margin-right: 30px;
            }
        }
    }

    .page-content {
        width: 100%;
        .page-card {
            width: 100%;
            margin-bottom: 15px;
            .cardInfoTitle{
                width: 100%;
                text-align: left;

            }
            .card-title {
                
                margin: 30px 0px;
            }
            .cardListBox{
                height: 90%;
                padding-left: 10px;
                border-left: #c7c5c5 1px solid;
                .card-list {
                    margin-bottom: 10px;
                    line-height: 20px;
                    text-align: center;
                    .titleRank-active{
                        float: right;
                        border-radius: 50%;
                        width: 20px;
                        height: 20px;
                        font-size: 16px;
                        text-align: center;
                        color: #ffffff;
                        background: #1981F4;
                        
                    
                    }
                    .titleRank{
                        float: right;
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        width: 20px;
                        height: 20px;
                        font-size: 16px;
                        text-align: center;
                        color: #ffffff;
                        background: #919191;
                    }
                }
            }
            
        }

    }
}</style>