<template>
    <div class="bg-content right3">
        <div class='b-row1'>
            <div b-sjtj>
                <screen-title :titleName="'数据统计'" style="width:310px" :type="'short'" :ifShowDropdown="true"></screen-title>
                <div class="dataStatistics" v-if="dataTotal">
                    <div>
                        <div style="display: flex;">
                            <el-image style="width: 120px; height: 100px;margin-right: 8px;"
                                :src="require('../../assets/images/dataicon.png')"></el-image>
                            <div style="color:#fff;font-weight: 600;">
                                <div style="font-size: 24px;margin-bottom: 6px;">
                                    {{ format(dataTotal) }}
                                </div>
                                <div style="font-size: 16px;">总数</div>
                            </div>
                        </div>
                        <div>
                            <div
                                style="display: flex;flex-direction: row;width: 100%;flex-wrap: wrap;justify-content: space-between;">
                                <div v-for="item in type" :key="item.id"
                                    style="width: 33%;display: flex;margin-bottom: 18px;">

                                    <div
                                        :style="{ width: '8px', height: '8px', backgroundColor: item.color, margin: '8px 8px 0 0' }">
                                    </div>
                                    <div>
                                        <div>
                                            <span style="color:#188ab3;font-size: 18px;">{{ item.title }}</span>
                                        </div>
                                        <div style="color: #fff;font-size: 20px;">
                                            {{ format(item.num) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-else>
                    <screen-loading style="width: 290px;height: 290px;">加载中...</screen-loading>
                </div>
            </div>
            <div b-myd>
                <screen-title :titleName="'满意度'" style="width:310px" :type="'short'"></screen-title>
                <div class="Satisfaction" v-if="charData.length">
                    <div style="width: 290px;height: 290px;" ref="chart"></div>
                </div>
                <div v-else>
                    <screen-loading style="width: 290px;height: 290px;">加载中...</screen-loading>
                </div>
            </div>
        </div>
        <div class='b-row2'>
            <div>
                <screen-title :titleName="'事件类型分析'" style="width:310px" :type="'short'"></screen-title>
                <div class="Satisfaction" v-if="charsData.length">
                    <div style="width: 290px;height: 290px;" ref="charts"></div>
                </div>
                <div v-else>
                    <screen-loading style="width: 290px;height: 290px;">加载中...</screen-loading>
                </div>
            </div>
            <div b-dxal>
                <screen-title :titleName="'典型案例'" style="width:310px" :type="'short'"></screen-title>
                <div @mouseenter="tableMouseEnter" @mouseleave="tableMouseLeave" class="ytal-list">
                    <div class="ytal-list-tran" :style="{ top: top, transition: transition }">
                        <div class="ytal-item" v-for="(item, index) in ytalList" :key="index" @click="handleClickEvent(item)">
                            <div class="ytal-item-detail">{{ item.itemContent }}</div>
                            <div class="ytal-item-line"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class='b-hztj'>
            <screen-title :titleName="'汇总统计'">
                <slot>
                    <div class="flex">
                        <div class="item"> <span>民生：</span>{{ totalLivelihoodCount || 0 }} </div>
                        <div class="item"> <span>发展：</span>{{ developCountTotal || 0 }} </div>
                        <div class="item"> <span>执法：</span> {{ lawCountCountTotal || 0 }}</div>
                    </div>
                </slot>
            </screen-title>
            <div class="table">
                <screen-custom-table :headerColor="'#BDE8FF'" :headerHeight="'36px'" :bodyTdColor="'#FFFFFF'"
                    :bodyTdFontSize="'18px'" :tableHeight="104" :showTableLine="true" :dataList="eventStatList"
                    :isChangeColor=false :rowColor="'rgba(11,68,135,0.16)'" :noData="noData" :pageSize="pageSize"
                    :headerList="headerList">
                </screen-custom-table>

            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import { loadXjphList,  } from './../../data/index';
import { getItemdailystatis, getCategoryAnalysis, getEventStat, getEvaluationTotal,getResponseSixHoursTotal } from '../../../src/api/bssbApi'
import { mapGetters } from 'vuex'
export default {
    name: "screen-right3",
    data() {
        return {
            DropdownData: [
                { id: 1, name: "测试测试测试测试测试测试" },
                { id: 2, name: "测试测试测试" },
                { id: 3, name: "测试测试" },
            ],
            dataTotal: 0,
            type: [{
                id: 0,
                title: "待响应",
                num: 0,
                color: "#f54f05"
            }, {
                id: 1,
                title: "处理中",
                num: 0,
                color: "#00f097"
            }, {
                id: 2,
                title: "已结案",
                num: 0,
                color: "#00c3ff"
            }, {
                id: 3,
                title: "红灯事件",
                num: 0,
                color: "#ff1466"
            }, {
                id: 4,
                title: "黄灯事件",
                num: 0,
                color: "#f1be01"
            }, {
                id: 5,
                title: "绿灯事件",
                num: 0,
                color: "#08c42c"
            }],
            charData: [],
            charsData: [],//事件类型分析
            chart: null,
            charts: null,
            ytalList: [],

            top: 0,
            scrollTime: 0,
            transition: 'top 1s linear',
            timer: '',
            pageSize: 7,
            tableHeight: 104,
            dataList: [],
            dataListResult: [],

            headerList: [{ title: '街道', width: '1000px' }, { title: '诉求总数', width: '800px' }, { title: '民生诉求', width: '800px' }, { title: '发展诉求', width: '800px' }, '执法'],
            noData: false,

            eventStatList: [],//汇总统计列表

            lawCountCountTotal: 0,
            developCountTotal: 0,
            totalLivelihoodCount: 0
        }
    },
    async mounted() {
        const _this = this
        window.addEventListener("resize", () => {
            _this.chart.resize();
            _this.charts.resize();
        });
        await this.getItemdailystatis()//获取数据统计
        await this.getEventStat()//获取汇总统计列表
        await this.getEvaluationTotal()//获取满意度
        await this.getCategoryAnalysis()//获取事件分类
        this.getResponseSixHoursTotal() //典型案例
  
        _this.$nextTick(function () {
            this.renderChart()
            this.renderCharts()
        });
    },
    watch: {
        ytalList: {
            immediate: true,
            handler: function (newvalue) {
                if (newvalue.length > 0) {
                    this.scrollView()
                } else {
                    clearInterval(this.timer)
                }
            }
        },
        shibeiAId: {
            handler() {
                // if (this.shibeiAId != '') {
                this.getItemdailystatis()
                this.getCategoryAnalysis()
                this.getEventStat()
                this.getEvaluationTotal()
                this.renderChart()
                this.renderCharts()
                this.getResponseSixHoursTotal()
                // }
            }
        }
    },
    computed: {
        ...mapGetters(['shibeiAId'])
    },

    methods: {
        async getEvaluationTotal() {
            try {
                let parm = {
                    endTime: "",
                    peopleFlag: "",// 统计类型 1默认 ，2本月 ，3本年 ，4自定义区间
                    startTime: "",
                    deptId: this.shibeiAId || '1175270520603930625'
                }
                let { data, code, msg } = await getEvaluationTotal(parm)
                if (code == 0) {
                    this.charData = []
                    this.charData = data
                    this.renderChart()
                } else {
                    console.log(msg);
                }
            } catch (err) {
                console.log(err);
            }
        },
        getResponseSixHoursTotal() {
            this.buttonDisabled = true
            this.showParas = []
            this.noData = false
            const params = {}
            params.page = 1
            params.limit = 50
            params.startTime = ''
            params.endTime = ''
            params.deptId = this.shibeiAId || '1175270520603930625'
            params.listType =  '1'
            // params.peopleFlag = this.appealValue
            getResponseSixHoursTotal(params).then(res => {
                this.ytalList = res.data.list
            }).catch(err => {
                this.buttonDisabled = false
                console.log(err)
            })
        },
        handleClickEvent(item){
            this.$EventBus.$emit('handleClickEvent', item)
        },
        // 获取汇总统计
        async getEventStat() {
            try {
                let parm = {
                    endTime: "",
                    statType: "1",// 统计类型 1默认 ，2本月 ，3本年 ，4自定义区间
                    startTime: "",
                    deptId: this.shibeiAId || '1175270520603930625'
                }
                let { data, code, msg } = await getEventStat(parm)
                if (code == 0) {
                    this.eventStatList = data
                    this.initList(data)
                    if (this.eventStatList.length === 0) {
                        this.noData = true
                    }
                } else {
                    console.log(msg);
                }
            } catch (err) {
                console.log(err);
            }
        },
        // 事件类型分析
        async getCategoryAnalysis() {
            try {
                let parm = {
                    endTime: "",
                    peopleFlag: "",
                    startTime: "",
                    deptId: this.shibeiAId || '1175270520603930625'
                }
                let { data, code, msg } = await getCategoryAnalysis(parm)
                if (code == 0) {
                    this.charsData = data
                } else {
                    console.log(msg);
                }
            } catch (err) {
                console.log(err);
            }
        },
        format(num) {
            var reg = /\d{1,3}(?=(\d{3})+$)/g;
            return (num + '').replace(reg, '$&,') || '--';
        },
        async getItemdailystatis() {
            try {
                let parm = {
                    endTime: "",
                    peopleFlag: "",
                    startTime: "",
                    deptId: this.shibeiAId || '1175270520603930625'
                }
                let { data, code, msg } = await getItemdailystatis(parm)
                if (code == 0) {
                    this.dataTotal = null
                    const idMap = {
                        0: 'pendingTotal',
                        1: 'processingTotal',
                        2: 'closedTotal',
                        3: 'redTotal',
                        4: 'yellowTotal',
                        5: 'greenTotal',
                    };

                    this.type.forEach(item => {
                        const propertyName = idMap[item.id];
                        if (propertyName !== undefined && data.hasOwnProperty(propertyName)) {
                            item.num = data[propertyName];
                        }
                    });
                    this.dataTotal = data.total
                } else {
                    console.log(msg);
                }
            } catch (err) {
                console.log(err);
            }

        },
        renderChart() {
            const chart = echarts.init(this.$refs.chart);
            let option;
            if (this.charData.length > 0) {
                option = {
                    title: {
                        textStyle: {
                            fontWeight: "normal",
                            fontSize: 16
                        },
                        left: "center"
                    },
                    color: ["#f14f0c", "#15aae4", "#16e49c"],
                    tooltip: {
                        trigger: "item",
                        formatter: "{b}：{c}"
                    },
                    series: [
                        {
                            type: "pie",
                            center: ["50%", "30%"],//饼状图位置
                            radius: ["20%", "40%"],
                            label: {
                                show: true,
                            },
                            labelLine: {
                                normal: {
                                    lineStyle: {
                                        color: 'rgba(255, 255, 255, 0.3)'
                                    },
                                    smooth: 0.2,
                                    length: "10"
                                }
                            },
                            data: this.charData
                        }
                    ]
                };
            } else {
                option = {
                    title: {
                        // text: this.charTitle,
                        textStyle: {
                            fontWeight: "normal",
                            fontSize: 16
                        },
                        left: "center"
                    },
                    tooltip: {
                        trigger: "none"
                    },
                    color: ["#d3d3d3"],
                    series: [
                        {
                            type: "pie",
                            radius: ["30%", "60%"],
                            left: "center",
                            label: {
                                show: true,
                                formatter: "{b}"
                            },
                            data: [{ value: 1, name: "暂无数据" }]
                        }
                    ]
                };
            }
            chart.setOption(option);
            this.chart = chart;
        },
        renderCharts() {
            const chart = echarts.init(this.$refs.charts);
            let option;
            if (this.charData.length > 0) {
                option = {
                    title: {
                        textStyle: {
                            fontWeight: "normal",
                            fontSize: 16
                        },
                        left: "center"
                    },
                    color: ["#1bd140", "#2aaee9", "#f0200a", "#fb8010", "#9232f0", "#d1124d"],
                    tooltip: {
                        trigger: "item",
                        formatter: "{b}：{d}%"
                    },
                    legend: {
                        orient: 'horizontal',
                        itemWidth: 8,//图例宽度
                        itemHeight: 8,//图例高度
                        itemGap: 20,//图例之间的间隙
                        top: 180,
                        left: 20,
                        textStyle: {//图例字体样式
                            color: "#fff",
                            fontSize: 14,
                            fontFamily: "微软雅黑"
                        }
                    },
                    series: [
                        {
                            type: "pie",
                            radius: ["30%", "50%"],
                            center: ["50%", "30%"],//饼状图位置
                            label: {
                                show: false,
                                position: 'center'
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 14,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: this.charsData
                        }
                    ]
                };
            } else {
                option = {
                    title: {
                        // text: this.charTitle,
                        textStyle: {
                            fontWeight: "normal",
                            fontSize: 16
                        },
                        left: "center"
                    },
                    tooltip: {
                        trigger: "none"
                    },
                    color: ["#d3d3d3"],
                    series: [
                        {
                            type: "pie",
                            radius: ["30%", "60%"],
                            label: {
                                show: true,
                                formatter: "{b}"
                            },
                            data: [{ value: 1, name: "暂无数据" }]
                        }
                    ]
                };
            }
            chart.setOption(option);
            this.charts = chart;
        },
        tableMouseEnter() {
            clearInterval(this.timer)
        },
        tableMouseLeave() {
            this.scrollView()
        },
        scrollView() {
            clearInterval(this.timer)
            this.timer = setInterval(() => {

                if (this.ytalList.length % this.pageSize === 0) {

                    if (this.scrollTime < this.ytalList.length / this.pageSize - 1) {
                        this.transition = 'top 1s linear'
                        this.scrollTime += 1
                        this.top = `-${this.tableHeight * this.scrollTime}%`
                    } else {
                        this.transition = 'top 1s ease-in-out'
                        this.top = '0px'
                        this.scrollTime = 0
                    }
                } else {
                    if (
                        this.scrollTime < Math.floor(this.ytalList.length / this.pageSize)
                    ) {
                        this.transition = 'top 1s linear'
                        this.scrollTime += 1
                        this.top = `-${this.tableHeight * this.scrollTime}%`
                    } else {
                        this.transition = 'top 1s ease-in-out'
                        this.top = '0px'
                        this.scrollTime = 0
                    }
                }
            }, 5000)
        },
        initList(data) {
            // 民生诉求总数
            if (data.length === 0) return
            this.totalLivelihoodCount = data.reduce((sum, element) => {
                return sum + element.livelihoodCount;
            }, 0);
            // 发展诉求总数
            this.developCountTotal = data.reduce((sum, element) => {
                return sum + element.developCount;
            }, 0);
            //执法诉求总数
            this.lawCountCountTotal = data.reduce((sum, element) => {
                return sum + element.lawCount;
            }, 0);
            this.eventStatList = data.map(element => [
                element.deptName,
                element.eventCount,
                element.livelihoodCount,
                element.developCount,
                element.lawCount,
            ]);
        },
    }
}
</script>
<style lang="scss" src="style/right1.scss" scoped></style>
<style src="style/right2.scss" lang="scss" scoped></style>
<style lang="scss" scoped>
.right3 {
    margin-left: 12px;
}

.b-row1 {
    height: 328px;
    display: flex;

    .dataStatistics {
        padding: 24px 0 0 24px;
    }

    .Satisfaction {
        padding: 24px 0 0 24px;
    }
}
.ytal-item{
    cursor: pointer;
}
.flex {
    display: flex;
    font-size: 14px;
    font-style: normal;
    position: absolute;
    right: -458px;
    top: 7px;
    font-family: Alibaba PuHuiTi;
    font-weight: 300;

    .item {
        margin-right: 10px;
    }
}

.b-row2 {
    height: 327px;
    display: flex;
}
</style>