<template>
    <div class="home-page-content">
       <div class="top-number">
           <div class="top-number-item">
               <div class="top-number-content">
                   <div style="display: flex; justify-content: space-between">
                       <div class="top-number-content-title">
                           <img src="@/assets/ic_renwu_slices/ic_renwu.png" alt="" />
                           <span style="margin-left: 12px;width: 120px;line-height: 34px">总任务数</span>
                        </div>
                       <!-- <div class="top-number-content-tag">
                           <span class="average" style="padding: 10px">日均</span>
                           <span class="average-number" style="padding: 10px">15000</span>
                       </div> -->
                   </div>
                   <div class="top-number-total">{{totalData.taskNum}}</div>
               </div>
           </div>
           <div class="grey-line"></div>
           <div class="top-number-item">
               <div class="top-number-content">
                   <div style="display: flex; justify-content: space-between">
                       <div class="top-number-content-title">
                           <img src="@/assets/ic_sucai_slices/ic_sucai.png" alt="" />
                           <span style="margin-left: 12px;width: 120px;line-height: 34px">总素材数</span>
                        </div>
                       <!-- <div class="top-number-content-tag">
                           <span class="average" style="padding: 10px">日均</span>
                           <span class="average-number" style="padding: 10px">15000</span>
                       </div> -->
                   </div>
                   <div class="top-number-total">{{totalData.referenceNum}}</div>
               </div>
           </div>
           <div class="grey-line"></div>
           <div class="top-number-item">
               <div class="top-number-content">
                   <div style="display: flex; justify-content: space-between">
                       <div class="top-number-content-title">
                           <img src="@/assets/ic_xiansuo_slices/ic_xiansuo.png" alt="" />
                           <span style="margin-left: 12px;width: 120px;line-height: 34px">总线索数</span>
                        </div>
                       <!-- <div class="top-number-content-tag">
                           <span class="average" style="padding: 10px">日均</span>
                           <span class="average-number" style="padding: 10px">15000</span>
                       </div> -->
                   </div>
                   <div class="top-number-total">{{totalData.customerActionNoteNum}}</div>
               </div>
           </div>
       </div>
       <div class="grey-line-cross"></div>
       <div class="top-number">
           <div class="top-number-item-small">
               <div class="top-number-content">
                   <div style="display: flex; justify-content: space-between">
                       <div class="top-number-content-title">
                           <img src="@/assets/ic_bofang_slices/ic_bofang.png" alt="" />
                           <span style="margin-left: 12px;width: 120px;line-height: 32px">总播放数</span>
                        </div>
                   </div>
                   <div class="top-number-total">{{totalData.playNumSum}}</div>
               </div>
           </div>
           <div class="grey-line"></div>
           <div class="top-number-item-small">
               <div class="top-number-content">
                   <div style="display: flex; justify-content: space-between">
                       <div class="top-number-content-title">
                           <img src="@/assets/ic_dianzan_slices/ic_dianzan.png" alt="" />
                           <span style="margin-left: 12px;width: 120px;line-height: 32px">总点赞数</span>
                        </div>
                   </div>
                   <div class="top-number-total">{{totalData.commendNumSum}}</div>
               </div>
           </div>
           <div class="grey-line"></div>
           <div class="top-number-item-small">
               <div class="top-number-content">
                   <div style="display: flex; justify-content: space-between">
                       <div class="top-number-content-title">
                           <img src="@/assets/ic_shoucang_slices/ic_shoucang.png" alt="" />
                           <span style="margin-left: 12px;width: 120px;line-height: 32px">总收藏数</span>
                        </div>
                   </div>
                   <div class="top-number-total">{{totalData.collectionNumSum}}</div>
               </div>
           </div>
           <div class="grey-line"></div>
           <div class="top-number-item-small">
               <div class="top-number-content">
                   <div style="display: flex; justify-content: space-between">
                       <div class="top-number-content-title">
                           <img src="@/assets/ic_pinglun_slices/ic_pinglun.png" alt="" />
                           <span style="margin-left: 12px;width: 120px;line-height: 32px">总评论数</span>
                        </div>
                   </div>
                   <div class="top-number-total">{{totalData.commentNumSum}}</div>
               </div>
           </div>
           <div class="grey-line"></div>
           <div class="top-number-item-small">
               <div class="top-number-content">
                   <div style="display: flex; justify-content: space-between">
                       <div class="top-number-content-title">
                           <img src="@/assets/ic_zhuanfa_slices/ic_zhuanfa.png" alt="" />
                           <span style="margin-left: 12px;width: 120px;line-height: 32px">总转发数</span>
                        </div>
                   </div>
                   <div class="top-number-total">{{totalData.reSendNumSum}}</div>
               </div>
           </div>
           <div class="grey-line"></div>
           <div class="top-number-item-small">
               <div class="top-number-content">
                   <div style="display: flex; justify-content: space-between">
                       <div class="top-number-content-title">
                           <img src="@/assets/ic_tuijian_slices/ic_tuijian.png" alt="" />
                           <span style="margin-left: 12px;width: 120px;line-height: 32px">总推荐数</span>
                        </div>
                   </div>
                   <div class="top-number-total">{{totalData.commendNumSum}}</div>
               </div>
           </div>
       </div>
       <div class="middle-charts" style="margin-top: 24px">
           <el-tabs v-model="playNumFormType" @tab-change="statusChange">
                <el-tab-pane label="播放" :name="1"></el-tab-pane>
                <el-tab-pane label="点赞" :name="2"></el-tab-pane>
                <el-tab-pane label="收藏" :name="3"></el-tab-pane>
                <el-tab-pane label="评论" :name="4"></el-tab-pane>
                <el-tab-pane label="转发" :name="5"></el-tab-pane>
                <el-tab-pane label="推荐" :name="6"></el-tab-pane>
            </el-tabs>
            <div style="padding: 6px">
                <!-- <el-button @click="changeDateType(1)" size="default" text>今日</el-button> -->
                <el-button @click="changeDateType(2)" size="default" text>本周</el-button>
                <el-button @click="changeDateType(3)" size="default" text>本月</el-button>
                <el-button @click="changeDateType(4)" size="default" text>全年</el-button>
                <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" type="daterange" v-model="selTime" @change="dateRangeChange"></el-date-picker>
            </div>
        </div>
        <div class="chart-content">
            <div class="chart-title">
                {{playNumFormType==1?'播放量趋势':playNumFormType==2?'点赞数趋势':playNumFormType==3?'收藏数趋势':playNumFormType==4?'评论数趋势':playNumFormType==5?'转发数趋势':'推荐数趋势'}}
                <!-- ({{playNumForm.dateCondition==1?'今日':playNumForm.dateCondition==2?'本周':playNumForm.dateCondition==3?'本月':'全年'}}) -->
            </div>
            <div class="chart-item" id="chartItem"></div>
        </div>
        <div class="bottom-table" style="margin-top: 24px">
            <el-tabs v-model="form.type" @tab-change="rankStatusChange">
                <el-tab-pane label="经销商统计" :name="1"></el-tab-pane>
                <el-tab-pane label="员工统计" :name="2"></el-tab-pane>
            </el-tabs>
            <div style="padding: 6px">
                <el-button size="default" @click="changeRankDateType(2)" text>本周</el-button>
                <el-button size="default" @click="changeRankDateType(3)" text>本月</el-button>
                <el-button size="default" @click="changeRankDateType(4)" text>全年</el-button>
            </div>
        </div>
        <div class="table-content">
            <el-table :data="tableData" size="large" stripe
               :header-cell-style="{background: '#FAFAFA'}">
               <el-table-column prop="sort" label="排序" width="180">
                   <template #default="scope">
                       <img v-if="scope.$index == 0" src="@/assets/ic_diyi_slices/ic_diyi.png" alt="" />
                       <img v-else-if="scope.$index == 1" src="@/assets/ic_dier_slices/ic_dier.png" alt="" />
                       <img v-else-if="scope.$index == 2" src="@/assets/ic_disan_slices/ic_disan.png" alt="" />
                       <span v-else>{{scope.$index+1}}</span>
                   </template>
               </el-table-column>
               <el-table-column prop="title" :label="form.type==1?'经销商名称':'员工名称'" width="480"></el-table-column>
               <el-table-column prop="subtitle" :label="form.type==1?'地址':'部门'" width="480"></el-table-column>
               <el-table-column prop="effectValue" label="传播值">
                   <template #default="scope">
                       <span class="transValue-number">{{scope.row.effectValue}}</span>
                   </template>
               </el-table-column>
           </el-table>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import {defineComponent, reactive, ref, getCurrentInstance} from 'vue'
export default defineComponent({
    name: 'v-home',
    setup() {
        const form = reactive({
            type: 1,
            dateCondition: 2
        });
        const playNumForm = reactive({
            dateCondition: 2,
            beginTime: undefined,
            endTime: undefined,
        })
        const playNumFormType = ref(1);
        const totalData = ref({});
        const tableData = ref([]);
        const selTime = ref([]);
        const myChart = ref();
        const { proxy } = getCurrentInstance();
        return {
            form,playNumForm,proxy,playNumFormType,myChart,selTime,
            tableData,totalData
        }
    },
    mounted() {
        this.getTotal();
        this.drawChart();
        this.getRank();
    },
    methods: {
        statusChange() {
            this.drawChart();
        },
        getTotal() {
            this.proxy.$post("/statistics/data1", {}).then(res => {
                if(res.code == 200) {
                    this.totalData = res.data
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(() => {});
        },
        changeDateType(value) {
            this.selTime = [];
            this.playNumForm.beginTime = undefined;
            this.playNumForm.endTime = undefined;
            this.playNumForm.dateCondition = value;
            this.drawChart();
        },
        changeRankDateType(value) {
            this.form.dateCondition = value;
            this.getRank();
        },
        dateRangeChange(value) {
            this.playNumForm.beginTime = value[0];
            this.playNumForm.endTime = value[1];
            this.drawChart();
        },
        drawChart() {
            if(this.myChart != null && this.myChart != '' && this.myChart != undefined) {
                this.myChart.dispose();
            }
            this.myChart = echarts.init(document.getElementById('chartItem'));
            this.proxy.$post("/statistics/data2", this.playNumForm).then(res => {
                let dx = []; let dy = [];
                res.data.forEach(ele => {
                    dx.push(ele.dat);
                    if(this.playNumFormType == 1) {
                        dy.push(ele.playNumSum)
                    } else if(this.playNumFormType == 2) {
                        dy.push(ele.commendNumSum)
                    } else if(this.playNumFormType == 3) {
                        dy.push(ele.collectionNumSum)
                    } else if(this.playNumFormType == 4) {
                        dy.push(ele.commentNumSum)
                    } else if(this.playNumFormType == 5) {
                        dy.push(ele.reSendNumSum)
                    } else if(this.playNumFormType == 6) {
                        dy.push(ele.recommendNumSum)
                    };
                });
                this.setOption(dx,dy);
            }).catch(() => {});
        },
        setOption(dx, dy) {
            //type数据类型 1播放2点赞3收藏4评论5转发6推荐，date日期类型 1今日2本周3本月4全年
            let option = {
                xAxis: [{ data: dx }],
                yAxis: [{ 
                    type: 'value'
                }],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' }
                },
                grid: { containLabel: true },
                series: [
                    {
                        type: 'bar',
                        data: dy,
                        barWidth: 20,
                        itemStyle: {
                            color: 'rgb(61,147,253)',
                        },
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: { fontSize: 12 }
                        }
                    }
                ]
            };
            this.myChart.setOption(option);
        },
        getRank() {
            let obj = Object.assign({pageNum: 1,pageSize: 10},this.form)
            this.proxy.$post("/statistics/data3", obj).then(res => {
                let data = res.data.records;
                this.tableData = data;
            }).catch(() => {});
        },
        rankStatusChange() {
            this.getRank()
        }
    }
})
</script>

<style lang="less" scoped>
@import './title.less';
</style>