<template>
  <div class="message">
    <div class="head">
      <span>消息回复率</span>
    </div>

    <div class="echarts_list">
      <div id="echarts1"></div>
      <div id="echarts2"></div>
      <div id="echarts3"></div>
    </div>

    <div class="head">
      <span>单聊统计</span>
    </div>

    <div class="card">
      <div class="item" :class="privateCurrent == 0? 'active':''" @click="privateCurrent = 0,getPrivateData()">
        <div class="item_name">单聊会话</div>
        <div class="item_num" v-if="privateCard">{{ Number(privateCard.chatCnt).toLocaleString('en-US') }}</div>
        <div class="item_num" v-else>0</div>
      </div>
      <div class="item" :class="privateCurrent == 1? 'active':''" @click="privateCurrent = 1,getPrivateData()">
        <div class="item_name">单聊消息</div>
        <div class="item_num" v-if="privateCard">{{ Number(privateCard.messageCnt).toLocaleString('en-US') }}</div>
        <div class="item_num" v-else>0</div>
      </div>
    </div>

    <div class="privateChat_box">
      <div id="privateChat" v-if="privateData.length"></div>
      <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
    </div>

    <div class="head">
      <span>群聊统计</span>
    </div>

    <div class="card">
      <div class="item" :class="groupCurrent == 0? 'active':''" @click="groupCurrent = 0,getGroupData()">
        <div class="item_name">活跃群聊</div>
        <div class="item_num" v-if="groupCard">{{ Number(groupCard.chatHasMsg).toLocaleString('en-US') }}</div>
        <div class="item_num" v-else>0</div>
      </div>
      <div class="item" :class="groupCurrent == 1? 'active':''" @click="groupCurrent = 1,getGroupData()">
        <div class="item_name">活跃群成员</div>
        <div class="item_num" v-if="groupCard">{{ Number(groupCard.memberHasMsg).toLocaleString('en-US') }}</div>
        <div class="item_num" v-else>0</div>
      </div>
      <div class="item" :class="groupCurrent == 2? 'active':''" @click="groupCurrent = 2,getGroupData()">
        <div class="item_name">群聊消息</div>
        <div class="item_num" v-if="groupCard">{{ Number(groupCard.msgTotal).toLocaleString('en-US') }}</div>
        <div class="item_num" v-else>0</div>
      </div>
    </div>

    <div class="groupChat_box">
      <div id="groupChat" v-if="groupData.length"></div>
      <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
    </div>

  </div>
</template>

<script>
import echarts from "echarts"
export default {
  name: 'message',
  data() {
    return {
      privateCard: {},
      privateData: [],
      privateDate: [],
      privateMsg: [],
      privateCurrent: 0,
      groupCard: {},
      groupData: [],
      groupDate: [],
      groupMsg: [],
      groupCurrent: 0,
      replyData: {},
    }
  },
  created() {
    this.getData()
  },
  onShow() {
    
  },
  mounted() {
    this.getPrivateChat()
    this.getGroupChat()  
  },
  methods: {
    getData() {
      // 回复率
      this.$http.post(`/app/wxgroupstatistic/replyPercentage`).then(res=> {
        if(res?.data) {
          this.replyData = res.data
          this.getEcharts1(this.replyData)
          this.getEcharts2(this.replyData)
          this.getEcharts3(this.replyData)
        }
      })
      this.getPrivateData()
      this.getGroupData()
    },
    getPrivateData() {
      // 单聊统计
      this.$http.post('/app/wxgroupstatistic/getUserChatNumber').then(res=> {
        if(res?.data) {
          this.privateCard = res.data.单聊总和
          this.privateData = res.data.条形统计
          this.privateDate = this.privateData?.map(v=> v.dateDay)
          if(this.privateCurrent == 0) {
            this.privateMsg = this.privateData?.map(v=> v.chatCnt)
          } else if(this.privateCurrent == 1) {
            this.privateMsg = this.privateData?.map(v=> v.messageCnt)
          }
          
        }
      })
    },
    getGroupData() {
      // 群聊统计
      this.$http.post('/app/wxgroupstatistic/getgroupChatNumber').then(res=> {
        if(res?.data) {
          this.groupCard = res.data.群聊总和
          this.groupData = res.data.条形统计
          this.groupDate = this.groupData?.map(v=> v.dateDay)
          if(this.groupCurrent == 0) {
            this.groupMsg = this.groupData?.map(v=>v.chatHasMsg)
          } else if(this.groupCurrent ==1) {
            this.groupMsg = this.groupData?.map(v=>v.memberHasMsg)
          } else if(this.groupCurrent == 2) {
            this.groupMsg = this.groupData?.map(v=>v.msgTotal)
          }
        }
      })
    },
    getEcharts1({replyPercentage}) {
      let echarts1 = document.getElementById('echarts1');
      let myChart1 = echarts.init(echarts1);
      let option = {
        // tooltip: {
        //   trigger: 'item',
        // },
        title: {
          zlevel: 0,
          text: [`{name|昨日}\n{value|${ replyPercentage } %}`],
          top: 'center',
          left: '46%',
          textAlign: 'center',
          textStyle: {
            rich: {
              name: {
                color: '#999999',
                fontSize: 13,
                lineHeight: 15
              },
              value: {
                color: '#333333',
                fontSize: 13,
                lineHeight: 16
              }
            },
          },
        },
        color: ['#3975C6','#C7C7C7'], 
        series: [
          {
            name: '昨天',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            labelLine: {
              show: false,
            },
            data: [
              { value: replyPercentage, name: '' },
              { value: 100 - replyPercentage, name: '' },
            ]
          }
        ]
      };
      option && myChart1.setOption(option);
    },
    getEcharts2({weekSum}) {
      let echarts2 = document.getElementById('echarts2');
      let myChart2 = echarts.init(echarts2);
      let option = {
        // tooltip: {
        //   trigger: "item",
        // },
        title: {
          zlevel: 0,
          text: [`{name|近7天}\n{value|${ weekSum } %}`],
          top: 'center',
          left: '46%',
          textAlign: 'center',
          textStyle: {
            rich: {
              name: {
                color: '#999999',
                fontSize: 13,
                lineHeight: 15
              },
              value: {
                color: '#333333',
                fontSize: 13,
                lineHeight: 16
              }
            },
          },
        },
        color: ['#3975C6','#C7C7C7'], 
        series: [
          {
            name: '近7天',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            labelLine: {
              show: false,
            },
            data: [
              { value: weekSum, name: '' },
              { value: 100 - weekSum, name: '' },
            ]
          }
        ]
      };
      option && myChart2.setOption(option);
    },
    getEcharts3({monthSum}) {
      let echarts3 = document.getElementById('echarts3');
      let myChart3 = echarts.init(echarts3);
      let option = {
        // tooltip: {
        //   trigger: "item",
        // },
        title: {
          zlevel: 0,
          text: [`{name|近30天}\n{value|${ monthSum } %}`],
          top: 'center',
          left: '46%',
          textAlign: 'center',
          textStyle: {
            rich: {
              name: {
                color: '#999999',
                fontSize: 13,
                lineHeight: 15
              },
              value: {
                color: '#333333',
                fontSize: 13,
                lineHeight: 16
              }
            },
          },
        },
        color: ['#3975C6','#C7C7C7'], 
        series: [
          {
            name: '近30天',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            labelLine: {
              show: false,
            },
            data: [
              { value: monthSum, name: '' },
              { value: 100 - monthSum, name: '' },
            ]
          }
        ]
      };
      option && myChart3.setOption(option);
    },
    getPrivateChat() {
      let privateDom = document.getElementById('privateChat');
      let myChartPrivate = echarts.init(privateDom);
      let option = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: 'category',
          data: this.privateDate,
          axisTick: {
            show: false,
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          }
        },
        series: [
          {
            data: this.privateMsg,
            type: 'line',
            lineStyle: {
              color: '#3975C6', // 折线线条颜色
            },
            itemStyle: {
              color: '#3975C6', // 折角颜色
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [  // 渐变颜色
                  {
                    offset: 0,
                    color: '#2891ff33',
                  },
                  {
                    offset: 1,
                    color: '#2891ff00',
                  },
                ],
                global: false,
              },
            },
          }
        ]
      };
      option && myChartPrivate.setOption(option);
    },
    getGroupChat() {
      let groupDom = document.getElementById('groupChat');
      let myChartGroup = echarts.init(groupDom);
      let option = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: 'category',
          data: this.groupDate,
          axisTick: {
            show: false,
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          }
        },
        series: [
          {
            data: this.groupMsg,
            type: 'line',
            lineStyle: {
              color: '#3975C6', // 折线线条颜色
            },
            itemStyle: {
              color: '#3975C6', // 折角颜色
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [  // 渐变颜色
                  {
                    offset: 0,
                    color: '#2891ff33',
                  },
                  {
                    offset: 1,
                    color: '#2891ff00',
                  },
                ],
                global: false,
              },
            },
          }
        ]
      };
      option && myChartGroup.setOption(option);
    }
  },
}
</script>

<style lang="scss" scoped>
.message {
  padding: 0 32px;
  box-sizing: border-box;
  .head {
    margin-top: 32px;
    span {
      font-size: 32px;
      color: #333333;
      font-weight: 600;
    }
  }

  .card {
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    text-align: center;
    align-items: center;
    background: #FFF;
    border-radius: 16px 16px 0 0;
    margin-top: 24px;

    .item {
      flex: 1;
      padding: 16px 0;
      box-sizing: border-box;

      .item_name {
        color: #666666;
      }

      .item_num {
        color: #000000;
        font-size: 36px;
        font-weight: 600;
      }

      .imgs {
        width: 30px;
        height: 30px;
      }
    }
    .active {
      background: #EBF1F9;
      border-radius: 16px;
    }
  }

  .privateChat_box,
  .groupChat_box {
    width: 100%;
    height: 514px;
    background: #FFF;
    
    #privateChat,
    #groupChat {
      width: 100%;
      height: 100%;
    }
  }

  .echarts_list {
    width: 100%;
    height: 256px;
    background: #FFF;
    border-radius: 8px;
    margin-top: 24px;
    display: flex;

    #echarts1,
    #echarts2,
    #echarts3 {
      flex: 1;
      width: 100%;
      height: 100%;
    }
  }
}
</style>