<template>
  <div class="container clickCount">
    <!-- 路径面包屑 -->
    <bread-crumb :bread-crumb-list="breadCrumbList"></bread-crumb>
    <div class="containerIn" ref="tableDataRef">
      <!--  搜索查询 -->
      <div class="tableTop">
        <search-form
        :show-select="false"
        @submit="searchHandler">
        </search-form>
      </div>
      <!-- 三个总数 -->
      <div class="serviceAccessIn">
        <div class="accessInformation">
          <dl class="clearfix" v-for="item in accessData" :key="item.key">
            <dt class="iconfont" :style="{'background-color': item.color}" v-html="item.icon"></dt>
            <dd>
              <span class="name">{{ item.name }}</span>
              <div class="num">
                <span>{{ item.count }}</span>
              </div>
            </dd>
          </dl>
        </div>
        <!-- 横栏线 -->
        <div class="accessTop"> </div>
          <!-- PV总量-->
          <div class="con" ref="rowCon1">
            <div class="chart">
              <line-chart domId="accessLineChart" 
              :title="accessLineData.title" 
              :catalog="accessLineData.catalog" 
              :data="accessLineData.data" 
              y-name="总量"          
              :a-colori="accessLineData.aColor1" 
              :a-colorii="accessLineData.aColor2" 
              :rendering="rendering"></line-chart>
            </div>
            <!-- PV前十排名 -->
            <div class="chart">
              <bar-chart domId="accessBarChart" 
              :title="accessBarData.title" 
              :legend="accessBarData.legend" 
              :catalog="accessBarData.catalog" 
              :data="accessBarData.data"            
              :rendering="rendering"></bar-chart>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
import BreadCrumb from '@/components/BreadCrumb.vue'
import LineChart from '@/components/LineChart.vue'
import BarChart from '@/components/BarChart.vue'
import SearchForm from './otherComponent/SearchForm.vue'

import Api from '@/api/index.js'
import Util from '@/utils/util.js'

export default {
  name: 'ClickCount',
  components: {
    BreadCrumb,
    LineChart,
    BarChart,
    SearchForm
  },
  data() {
    return {
      breadCrumbList: [],
      rowKey: 'domainId',
      height: '330',
      sortable: true,
      submiting: false,
      // 搜索
      searchForm: {
        typeOptions: [],
        selectLabel: '',
        selectPlaceholder: ''
      },
      accessData: [{
        name: '页面访问量(PV)',
        key: 'approvedMap',
        count: 0,
        icon: '&#xe646;',
        color: '#F3BB45'
      }, {
        name: '独立访客数(UV)',
        key: 'successMap',
        count: 0,
        icon: '&#xe629;',
        color: '#41B883'
      }, {
        name: '独立IP数(IP)',
        key: 'failerror',
        count: 0,
        icon: '&#xe627;',
        color: '#68B3C8'
      }],
      stime: '',
      etime: '',
      total: null,
      accessLineData: {
        title: 'PV总量',
        catalog: [],
        data: [],
        aColor1: 'rgb(255, 158, 68)',
        aColor2: 'rgb(255, 70, 131)'
      },
      accessBarData: {
        title: 'PV排名前十的页面',
        legend: [],
        catalog: [],
        data: []
      },
      rendering: true, // 渲染
      timeValue: [
         new Date(new Date(new Date().setDate(new Date().getDate() - 7)).setHours(0, 0, 0, 0)),
         new Date(new Date().setHours(0, 0, 0, 0))
      ],
      isQuery: false
    }
  },
  destroyed () {
    window.removeEventListener('resize', this.handleFn)
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.breadCrumbList = [
        { title: '系统监控' },
        { title: '流量统计' }
      ]
      this.date()
      // 钩子
      this.$nextTick(() => {
        this.handleFn()
      })
      window.addEventListener('resize', this.handleFn)
    },
    // resize的函数
    handleFn() {
      this.height = this.$refs.tableDataRef.clientHeight - 130
      this.rendering = !this.rendering
      let _this = this
      if (_this.$refs.rowCon1.clientWidth >= 1120) {
        _this.accessLineData.width = parseInt(_this.$refs.rowCon1.clientWidth / 2 - 50) + 'px'
        _this.accessBarData.width = parseInt(_this.$refs.rowCon1.clientWidth / 2 - 80) + 'px'
      } else {
        _this.accessLineData.width = '600px'
        _this.accessBarData.width = '600px'
      }
      if (_this.$refs.rowCon1.clientHeight >= 500) {
        _this.accessLineData.height = '450px'
        _this.accessBarData.height = '450px'
      }
    },
    // 默认前一个星期的时间
    date() {
      this.stime = Util.getDay(-7, '') + '000000'
      this.etime = Util.getDay(0, '') + '000000'      
      this.getClickStatisticsSum(this.stime, this.etime)
      this.getClickStatisticNumByDate(this.stime, this.etime)
      this.getClickStatisticTop10(this.stime, this.etime)
    },
    // 点击查询
    searchHandler(startEndDate) { 
      this.stime = startEndDate[0]
      this.etime = startEndDate[1]    
      this.getClickStatisticsSum(this.stime, this.etime)
      this.getClickStatisticNumByDate(this.stime, this.etime)
      this.getClickStatisticTop10(this.stime, this.etime)
    },
    // 页面访问量 独立访客数 独立IP数
    getClickStatisticsSum(stime, etime) {
      this.stime = stime
      this.etime = etime
      Api.getClickStatisticsSum(this.stime, this.etime)
        .then(data => {
          if (data.status === 0) {
            this.accessData[0].count = data.data.pv_num
            this.accessData[1].count = data.data.uv_num
            this.accessData[2].count = data.data.ip_num
          } else {
            this.$message({
              type: 'warning',
              message: '请求数据失败'
            })
          }
        }).catch(res => {
          this.$message({
            type: 'error',
            message: '请求数据失败'
          })
        })
    },
    // 每天服务访问总量
    getClickStatisticNumByDate(stime, etime) {
      this.accessLineData.catalog = []
      this.accessLineData.data = []

      this.isLoadingAccessLineData = true
      this.stime = stime
      this.etime = etime
      Api.getClickStatisticNumByDate(this.stime, this.etime).then(data => {
        this.isLoadingAccessLineData = false
        let datas = data.data
        if (data.status === 0) {
          if (datas.catalogs.length !== 0) {
            this.accessLineData.catalog = datas.catalogs
            this.accessLineData.data = datas.dataList
          } else {
            this.$message({
              type: 'warning',
              message: '请求数据为空'
            })
          }
        } else {
          this.$message({
            type: 'warning',
            message: '获取数据失败！'
          })
        }
      }).catch(res => {
        this.isLoadingCatalogLineChart = false

        this.$message({
          type: 'error',
          message: '请求数据失败'
        })
      })
    },
    // 访问量前10的服务
    getClickStatisticTop10(stime, etime) {
      this.accessBarData.catalog = []
      this.accessBarData.data = []
      this.stime = stime
      this.etime = etime
      Api.getClickStatisticTop10(this.stime, this.etime).then(data => {
        let datas = data.data
        if (data.status === 0) {
          if (datas.dataList.length !== 0) {
            this.accessBarData.catalog = []
            let len = datas.dataList.length >= 10 ? 10 : datas.dataList.length
            for (var i = 0; i < len; i++) {
              this.accessBarData.catalog.push(datas.dataList[i].name)
              this.accessBarData.data.push(datas.dataList[i])
            }
          } else {
            this.$message({
              type: 'warning',
              message: '请求数据为空'
            })
          }
        } else {
          this.$message({
            type: 'warning',
            message: '请求数据失败'
          })
        }
      }).catch(res => {
        this.$message({
          type: 'error',
          message: '请求数据失败'
        })
      })
    }
  }
}

</script>
<style lang="scss">
.row::-webkit-scrollbar {
  width: 0 !important
}

.clickCount {
  width: 100%;
  overflow-y: auto;

  .accessTop {
    background: #eaecef;
    border-bottom: solid 30px #eaecef;
    height: 45px;
    margin-left: 10px;
    margin-right: 10px;
  }
  .con {
    margin-left: 10px;
    margin-right: 10px;
    display: block;
    height: 400px;
    padding: 20px 40px 30px;
    // overflow: auto;
    border: solid 1px #d1dfdd;
  }
  .chart {
    width: 45%;
    height: 300px;
    padding: 30px;
    display: inline-block;
  }
  .accessInformation {
    min-height: 120px;
    padding: 25px 40px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    .serviceAccessIn {
      padding: 0 10px;
      text-align: center;
    }

    dl {
      max-width: 280px; // height: 100px;
      background: #eceff1;
      border: solid 1px #b6bdc5;
      ;
      box-shadow: 0 4px 8px rgba($color: #b6bdc5, $alpha: .25);
      margin: 0 30px;
      border-radius: 4px;
      padding: 20px 15px;
      flex: 1;
      display: flex;
      align-items: center;

      dt {
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 30px;
        font-weight: 400;
        color: #ffffff;
        border-radius: 50%;
      }
      dd {
        margin-left: 20px;
        color: #878d9d;
        font-size: 16px;
        text-align: left;

        .num {
          margin-top: 6px;

          >span {
            color: #353d48;
            font-size: 24px;
            font-weight: 500;
            margin-right: 5px;
          }
        }
      }
    }
  }
}

@media screen and (max-width:1366px) {
  .accessInformation {
    min-height: 110px;
    padding: 15px 20px;

    dl {
      margin: 0 20px;
    }
  }
  .serviceAccess {
    .con {
      height: 1200px;
      overflow: auto;
    }
  }
   .chart { 
    width: 45%;
    height: 200px;
    padding: 30px;
    display: inline-block;
  }
}

</style>
