<template>
  <div class="ele-body">
    <el-row :gutter="15">
      <el-col :sm="6" :xs="12">
        <el-card shadow="never" class="monitor-count-card">
          <el-tag size="large" class="ele-tag-round"><i class="el-icon-s-custom"></i></el-tag>
          <div class="monitor-count-card-num">21.2 k</div>
          <div class="monitor-count-card-text ele-text-secondary">总访问人数</div>
          <ele-avatar-list :data="visitUsers" size="22px"/>
        </el-card>
      </el-col>
      <el-col :sm="6" :xs="12">
        <el-card shadow="never" class="monitor-count-card">
          <el-tag size="large" type="warning" class="ele-tag-round"><i class="el-icon-_sent"></i></el-tag>
          <div class="monitor-count-card-num">1.6 k</div>
          <div class="monitor-count-card-text ele-text-secondary">点击量（近30天）</div>
          <div class="monitor-count-card-trend ele-text-success"><i class="el-icon-arrow-up"></i>110.5%</div>
          <el-tooltip content="指标说明" placement="top">
            <i class="el-icon-_question ele-text-placeholder monitor-count-card-tips"></i>
          </el-tooltip>
        </el-card>
      </el-col>
      <el-col :sm="6" :xs="12">
        <el-card shadow="never" class="monitor-count-card">
          <el-tag size="large" type="danger" class="ele-tag-round"><i class="el-icon-s-flag"></i></el-tag>
          <div class="monitor-count-card-num">826.0</div>
          <div class="monitor-count-card-text ele-text-secondary">到达量（近30天）</div>
          <div class="monitor-count-card-trend ele-text-danger"><i class="el-icon-arrow-down"></i>15.5%</div>
        </el-card>
      </el-col>
      <el-col :sm="6" :xs="12">
        <el-card shadow="never" class="monitor-count-card">
          <el-tag size="large" type="success" class="ele-tag-round"><i class="el-icon-_flash-solid"></i></el-tag>
          <div class="monitor-count-card-num">28.8 %</div>
          <div class="monitor-count-card-text">转化率（近30天）</div>
          <div class="monitor-count-card-trend ele-text-success"><i class="el-icon-arrow-up"></i>65.8%</div>
          <el-tooltip content="指标说明" placement="top">
            <i class="el-icon-_question ele-text-placeholder monitor-count-card-tips"></i>
          </el-tooltip>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :md="18">
        <el-card shadow="never" header="用户分布">
          <el-row>
            <el-col :sm="18">
              <ele-chart :option="userCountMapOption" style="height:438px;"/>
            </el-col>
            <el-col :sm="6">
              <ele-chart :option="userCountChartOption" style="height:438px;"/>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :md="6">
        <el-row :gutter="15">
          <el-col :md="24" :sm="12">
            <el-card shadow="never" header="在线人数">
              <div class="monitor-online-num-card">
                <div class="monitor-online-num-text">{{ currentTime }}</div>
                <div class="monitor-online-num-title">
                  <vue-count-up :endVal="228" @ready="(ins)=>{onlineNumAnimIns=ins}"/>
                </div>
                <div class="monitor-online-num-text">在线总人数</div>
                <ele-dot :text="updateTimeText"/>
              </div>
            </el-card>
          </el-col>
          <el-col :md="24" :sm="12">
            <el-card shadow="never" header="浏览器分布" body-style="padding:0 10px;">
              <ele-chart :option="browserChartOption" style="height:240px;"/>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :md="12">
        <el-card shadow="never" header="用户评价">
          <div class="ele-cell ele-cell-align-bottom">
            <div style="font-size: 48px;">4.5</div>
            <div class="ele-cell-content" style="padding-bottom: 8px;">
              <el-rate v-model="userRate" disabled show-score text-color="#F7BA2A" score-template="很棒"/>
            </div>
          </div>
          <div class="ele-cell" style="margin: 15px 0;">
            <div style="font-size: 28px;" class="ele-text-placeholder">-0%</div>
            <div class="ele-cell-content ele-text-small ele-text-secondary">当前没有评价波动</div>
          </div>
          <div class="ele-cell">
            <div class="ele-cell-content">
              <el-progress :percentage="60" :show-text="false" status="success"/>
            </div>
            <div style="width: 80px;white-space: nowrap;" class="ele-text-secondary">
              <s/><i class="el-icon-star-on"></i> 5 : 368人
            </div>
          </div>
          <div class="ele-cell">
            <div class="ele-cell-content">
              <el-progress :percentage="40" :show-text="false"/>
            </div>
            <div style="width: 80px;white-space: nowrap;" class="ele-text-secondary">
              <s/><i class="el-icon-star-on"></i> 4 : 256人
            </div>
          </div>
          <div class="ele-cell">
            <div class="ele-cell-content">
              <el-progress :percentage="20" :show-text="false" status="warning"/>
            </div>
            <div style="width: 80px;white-space: nowrap;" class="ele-text-secondary">
              <s/><i class="el-icon-star-on"></i> 3 : 49人
            </div>
          </div>
          <div class="ele-cell">
            <div class="ele-cell-content">
              <el-progress :percentage="10" :show-text="false" status="exception"/>
            </div>
            <div style="width: 80px;white-space: nowrap;" class="ele-text-secondary">
              <s/><i class="el-icon-star-on"></i> 2 : 14人
            </div>
          </div>
          <div class="ele-cell">
            <div class="ele-cell-content">
              <el-progress :percentage="0" :show-text="false"/>
            </div>
            <div style="width: 80px;white-space: nowrap;" class="ele-text-secondary">
              <s/><i class="el-icon-star-on"></i> 1 : 0人
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="12">
        <el-card shadow="never" header="用户满意度">
          <div class="ele-cell" style="margin: 15px 0;">
            <div class="ele-cell-content ele-text-center" style="font-size: 24px;">856</div>
            <div class="ele-cell-content ele-text-center">
              <div class="monitor-face-smile"><span></span></div>
              <div class="ele-text-secondary" style="margin-top:5px;">正面评论</div>
            </div>
            <h2 class="ele-cell-content ele-text-success ele-text-center">82%</h2>
          </div>
          <el-divider/>
          <div class="ele-cell" style="margin: 15px 0 12px 0;">
            <div class="ele-cell-content ele-text-center" style="font-size: 24px;">60</div>
            <div class="ele-cell-content ele-text-center">
              <div class="monitor-face-cry"><span></span></div>
              <div class="ele-text-secondary" style="margin-top:5px;">负面评论</div>
            </div>
            <h2 class="ele-cell-content ele-text-danger ele-text-center">9%</h2>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="12">
        <el-card shadow="never" header="用户活跃度">
          <div class="ele-cell" style="padding: 34px 0;">
            <div class="ele-cell-content ele-text-center">
              <div class="monitor-progress-group">
                <el-progress type="circle" :percentage="70" status="success" :show-text="false" :width="140"/>
                <el-progress type="circle" :percentage="60" :show-text="false" :width="115" :stroke-width="5"/>
                <el-progress type="circle" :percentage="35" status="exception" :show-text="false" :width="90"
                             :stroke-width="4"/>
              </div>
            </div>
            <div class="monitor-progress-legends">
              <div class="ele-text-small">
                <ele-dot :ripple="false" text="活跃率: 70%"/>
              </div>
              <div class="ele-text-small">
                <ele-dot type="success" :ripple="false" text="留存率: 60%"/>
              </div>
              <div class="ele-text-small">
                <ele-dot type="danger" :ripple="false" text="跳出率: 35%"/>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import VueCountUp from 'vue-countup-v2'
import EleChart from '@/components/EleChart'
import echarts from 'echarts'

export default {
  name: "Monitor",
  components: {VueCountUp, EleChart},
  data() {
    return {
      visitUsers: [  // 访问人数
        {name: 'SunSmile', avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'},
        {name: '你的名字很好听', avatar: 'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg'},
        {name: '全村人的希望', avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'},
        {name: 'Jasmine', avatar: 'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg'},
        {name: '酷酷的大叔', avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'}
      ],
      updateTime: 5,  // 在线总人数倒计时
      chinaMapData: null,  // 中国地图轮廓数据
      userCountData: [],  // 用户分布数据
      currentTime: '20:58:22',  // 当前时间
      onlineNumAnimIns: null,  // 在线人数动画数字组件实例
      onlineNumTimer: null,  // 在线人数更新定时器
      browserCountData: [],  // 浏览器分布环形图数据
      userRate: 4.5  // 用户评分
    }
  },
  computed: {
    /* 在线人数倒计时文字 */
    updateTimeText() {
      return this.updateTime + ' 秒后更新';
    },
    /* 用户分布地图配置 */
    userCountMapOption() {
      if (!this.chinaMapData) return {};
      let data = this.userCountData.map(d => d.value).sort((a, b) => (a - b));
      return {
        tooltip: {trigger: 'item'},
        visualMap: {
          min: data[data.length - 1] || 0, max: data[0] || 0, text: ['高', '低'],
          calculable: true, color: ['rgba(24,144,255,1)', 'rgba(24,144,255,.1)']
        },
        series: [{
          name: '用户数', type: 'map', mapType: 'china',
          label: {show: true}, data: this.userCountData
        }]
      };
    },
    /* 用户分布柱状图配置 */
    userCountChartOption() {
      let data = this.userCountData.filter(d => d.value > 0).sort((a, b) => {
        return a.value - b.value;
      });
      return {
        tooltip: {
          trigger: 'axis', formatter: '<i class="ele-chart-dot" style="background-color:#3aa1ff;"></i>{b0}: {c0}'
        },
        grid: {top: 0, bottom: 0, left: 50, right: 0},
        yAxis: [{
          type: 'category', axisLine: {show: false},
          axisTick: {show: false}, data: data.map(d => d.name)
        }],
        xAxis: [{
          show: false, type: 'value', splitLine: {show: false}
        }],
        series: [{
          type: 'bar',
          data: data.map(d => d.value)
        }]
      };
    },
    /* 浏览器分布饼图配置 */
    browserChartOption() {
      return {
        tooltip: {trigger: 'item'},
        legend: {
          data: this.browserCountData.map(d => d.name),
          bottom: 5, itemWidth: 10, itemHeight: 10, icon: 'circle'
        },
        series: [{
          type: 'pie',
          radius: ['45%', '70%'],
          center: ['50%', '43%'],
          label: {show: false},
          data: this.browserCountData
        }]
      };
    }
  },
  mounted() {
    this.doUpdateOnlineNum();
    this.getChinaMapData();
    this.getUserCountData();
    this.getBrowserCountData();
  },
  methods: {
    /** 在线人数更新倒计时 */
    doUpdateOnlineNum() {
      this.currentTime = this.$util.toDateString(new Date(), 'HH:mm:ss');
      this.onlineNumTimer = setInterval(() => {
        this.currentTime = this.$util.toDateString(new Date(), 'HH:mm:ss');
        if (this.updateTime === 1) {
          this.updateTime = 5;
          if (this.onlineNumAnimIns) this.onlineNumAnimIns.update(100 + Math.round(Math.random() * 900));
        } else {
          this.updateTime--;
        }
      }, 1000);
    },
    /** 获取中国地图数据并注册地图 */
    getChinaMapData() {
      this.$http.get('https://cdn.eleadmin.com/20200610/china-provinces.geo.json').then(res => {
        echarts.registerMap('china', res.data);
        this.chinaMapData = res.data;
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /** 获取用户分布数据 */
    getUserCountData() {
      this.userCountData = [
        {name: "贵州", value: 570},
        {name: "云南", value: 8890},
        {name: "重庆", value: 10010},
        {name: "吉林", value: 5056},
        {name: "山西", value: 2123},
        {name: "天津", value: 9130},
        {name: "江西", value: 10170},
        {name: "广西", value: 6172},
        {name: "陕西", value: 9251},
        {name: "黑龙江", value: 5125},
        {name: "安徽", value: 9530},
        {name: "北京", value: 51919},
        {name: "福建", value: 3756},
        {name: "上海", value: 59190},
        {name: "湖北", value: 37109},
        {name: "湖南", value: 8966},
        {name: "四川", value: 31020},
        {name: "辽宁", value: 7222},
        {name: "河北", value: 3451},
        {name: "河南", value: 9693},
        {name: "浙江", value: 62310},
        {name: "山东", value: 39231},
        {name: "江苏", value: 35911},
        {name: "广东", value: 55891}
      ];
    },
    /** 获取用户浏览器分布数据 */
    getBrowserCountData() {
      this.browserCountData = [
        {name: 'Chrome', value: 9052},
        {name: 'Safari', value: 535},
        {name: 'Firefox', value: 1610},
        {name: 'Edge', value: 2800},
        {name: 'IE', value: 3200},
        {name: 'Other', value: 1700}
      ];
    }
  },
  beforeDestroy() {
    // 销毁定时器
    if (this.onlineNumTimer) clearInterval(this.onlineNumTimer);
  }
}
</script>

<style scoped>
.ele-body {
  padding-bottom: 0;
}

.el-card {
  margin-bottom: 15px;
}

/** 统计卡片 */
.monitor-count-card >>> .el-card__body {
  padding-top: 18px;
  text-align: center;
  position: relative;
}

.monitor-count-card >>> .el-tag {
  border-color: transparent;
  font-size: 15px;
}

.monitor-count-card .monitor-count-card-num {
  font-weight: 500;
  font-size: 32px;
  margin-top: 12px;
}

.monitor-count-card .monitor-count-card-text {
  font-size: 12px;
  margin: 10px 0;
}

.monitor-count-card .monitor-count-card-trend {
  font-weight: 600;
  padding: 4px 0;
}

.monitor-count-card .monitor-count-card-trend > i {
  font-size: 12px;
  font-weight: 600;
  margin-right: 5px;
}

.monitor-count-card .monitor-count-card-tips {
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
}

/** 当前在线人数卡片 */
.monitor-online-num-card {
  text-align: center;
  padding: 5px 0;
}

.monitor-online-num-text {
  margin-bottom: 5px;
}

.monitor-online-num-title {
  font-size: 48px;
  margin-bottom: 10px;
}

@media screen and (max-width: 992px) {
  .monitor-online-num-card {
    padding: 38px 0;
  }
}

/* 笑脸、哭脸 */
.monitor-face-smile, .monitor-face-cry {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: #FBD971;
  border-radius: 50%;
  position: relative;
}

.monitor-face-smile > span, .monitor-face-smile:before, .monitor-face-smile:after,
.monitor-face-cry > span, .monitor-face-cry:before, .monitor-face-cry:after {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transform: rotate(225deg);
  border: 3px solid #F0C419;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  position: absolute;
  bottom: 8px;
  left: 11px;
}

.monitor-face-smile:before, .monitor-face-smile:after,
.monitor-face-cry:before, .monitor-face-cry:after {
  content: "";
  width: 6px;
  height: 6px;
  left: 8px;
  top: 14px;
  border-color: #F29C1F;
  transform: rotate(45deg);
}

.monitor-face-smile:after, .monitor-face-cry:after {
  left: auto;
  right: 8px;
}

.monitor-face-cry > span {
  transform: rotate(45deg);
  bottom: -6px;
}

/** 圆形进度条组合 */
.monitor-progress-group {
  position: relative;
  display: inline-block;
}

.monitor-progress-group .el-progress:not(:first-child) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: -1px;
}

.monitor-progress-legends > div + div {
  margin-top: 8px;
}
</style>