<template>
  <div class="container serviceAccess">
    <!-- 面包屑 -->
    <bread-crumb :bread-crumb-list="breadCrumbList"></bread-crumb>
    
    <div class="serviceAccessIn">
      <!-- 信息模块 -->
      <access-information></access-information>
      <!-- 内容 -->
      <div class="row">
        <!-- 内容头部 -->
        <div class="accessTop">
          <ul class="accessTab">
            <li v-for="(item, index) in tabList"
              :key="item"
              @click="tab(index)" 
              @mouseenter="onMouseEnter(index)"
              @mouseout="onMouseOut(index)"
              :class="{'el-button--primary': activeIndex === index}" 
              >{{ item }}</li>
            <li :class="{'tapTriangle p1': mouseOverIndex === 0, 'tapTriangle p2': mouseOverIndex === 1, 'tapTriangle p3': mouseOverIndex === 2}">
              <span></span>
            </li>
          </ul>
      
          <div class="search searchCommon" v-show="activeIndex===0">
            <el-date v-on:choose-date="chooseDate1"></el-date>
            <el-button type="primary" @click="sureSearch">确定</el-button>
          </div>
          <div class="search searchCommon" v-show="activeIndex===1">
            <el-date v-on:choose-date="chooseDate2"></el-date>
            <el-button type="primary" @click="catalogSureSearch">确定</el-button>
          </div>
          <div class="search searchCommon" v-show="activeIndex===2">
            <el-date v-on:choose-date="chooseDate3"></el-date>
            <el-button type="primary" @click="catalogSureSearch3">确定</el-button>
          </div>
        </div>
        
        <!-- 服务总量 -->
        <div class="con" v-show="activeIndex===0" v-loading.body="isLoadingAccessLineData" ref="rowCon1">
          <div class="chart">
          <line-chart domId="accessLineChart" 
          :title="accessLineData.title" 
          :catalog="accessLineData.catalog" 
          :data="accessLineData.data" 
          :line-onoff="tab1Onoff" 
          :y-name="yName1" 
          :a-colori="accessLineData.aColor1" 
          :a-colorii="accessLineData.aColor2" 
          :rendering="rendering"></line-chart>
          </div>
          <div class="chart">
          <bar-chart domId="accessBarChart" 
          :title="accessBarData.title"
          :legend="accessBarData.legend" 
          :catalog="accessBarData.catalog" 
          :data="accessBarData.data"          
          :line-onoff="tab1Onoff" 
          :rendering="rendering"></bar-chart>
        </div>
        </div>
        <!-- 单个服务 -->
        <div class="con" v-show="activeIndex===1" v-loading.body="isLoadingCatalogLineChart" ref="rowCon2">
          <load-tree 
            :tree-data="treeData"
            :default-props="defaultProps"
            v-on:node-click="handleNodeClick"
            :default-expanded-keys="defaultExpandedKeys"
            :default-checked-keys="defaultCheckedKeys"
            v-loading.body="isLoadingTree"
            :tab2-onoff="tab2Onoff"
            >
          </load-tree>
          <div class="chart2">
          <double-line domId="catalogLineChart" 
          :title="catalogLineChart.title" 
          :catalog="catalogLineChart.catalog" 
          :data1="catalogLineChart.data1" 
          :data2="catalogLineChart.data2"       
          :line-onoff="tab2Onoff" 
          :y-name="yName2" 
          :rendering="rendering"></double-line>
          </div>
          <!-- <line-chart domId="catalogLineChart" :title="catalogLineChart.title" :catalog="catalogLineChart.catalog" :data="catalogLineChart.data" :width="catalogLineChart.width" :line-onoff="tab2Onoff" :y-name="yName2"></line-chart> -->
        </div>
        <!-- 应用系统 -->
        <div class="con" v-show="activeIndex===2" v-loading.body="isLoadingNameLineChart" ref="rowCon3">
          <div class="chart1">
          <line-chart domId="nameLineChart" 
          :title="nameLineChart.title" 
          :catalog="nameLineChart.catalog" 
          :data="nameLineChart.data"         
          :line-onoff="tab3Onoff" 
          :y-name="yName3" 
          :rendering="rendering">
          </line-chart>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import BreadCrumb from '@/components/BreadCrumb.vue'
  import AccessInformation from './otherComponent/AccessInformation.vue'
  import LineChart from '@/components/LineChart.vue'
  import BarChart from '@/components/BarChart.vue'
  import LoadTree from '@/components/LoadTree.vue'
  import ElDate from '@/components/Date.vue'
  import DoubleLine from '@/components/DoubleLineChart.vue'

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

  export default {
    components: { 
      BreadCrumb,
      AccessInformation,
      LineChart,
      BarChart,
      LoadTree,
      ElDate,
      DoubleLine
    },
    data () { 
      return { 
        breadCrumbList: [],
        value: '',
        treeData: [],
        accessLineData: {
          title: '服务访问总量',
          catalog: [],
          data: [],
          aColor1: 'rgb(255, 158, 68)',
          aColor2: 'rgb(255, 70, 131)'
        },
        accessBarData: {
          title: '访问量前十的服务',
          legend: [],
          catalog: [],
          data: []
        },
        catalogLineChart: {
          title: '服务访问量、消耗总量',      
          legend: [],
          catalog: [],
          data1: [],
          data2: []
        },
        nameLineChart: { 
          title: '应用系统访问量',        
          legend: [],
          catalog: [],
          data: []
        },
        days: 7, // 默认一个星期的数据
        date1: [], // 时间1
        date2: [], // 时间2
        date3: [], // 时间3
        allSelectedNode: [],
        // tab页
        Date: [], // 时间
        isLoadingAccessLineData: false,
        isLoadingCatalogLineChart: false,
        isLoadingNameLineChart: false,
        isLoadingTree: false,
        
        tabList: [ '服务总量', '单个服务', '应用系统' ],
        activeIndex: 0,
        mouseOverIndex: 0,
        timer: null,
        tab1Onoff: true,
        tab2Onoff: false,
        tab3Onoff: false,
        yName1: '总量',
        yName2: '总量',
        yName3: '总量',        

        defaultProps: { 
          children: 'childDirectoryinfos',
          label: 'nameCn',
          isLeaf: function (data, node) {
            if (data.type === 'S' || data.isLeaf) {
              return true
            } else {
              return false
            }
          }
        },
        defaultExpandedKeys: [],
        defaultCheckedKeys: [],
        nodeData: {}, // 单个服务选择的信息
        rendering: true // 渲染
      }
    },
    mounted () { 
      this.init()
      this.getAccessStTotal()
      this.getAccessStTop10service()
    },
    methods: { 
      init () { 
        this.breadCrumbList = [
          { title: '服务监测' },
          { title: '服务访问统计' }
        ]
        this.getCatalogServiceTree('')
        this.date()
        this.$nextTick(() => {
          this.handleFn()
        })

        window.addEventListener('resize', this.handleFn)
      },

      handleFn () {
        this.rendering = !this.rendering
        let _this = this
        if (_this.activeIndex === 0) {
          if (_this.$refs.rowCon1.clientWidth >= 1010) {
            _this.accessLineData.width = parseInt(_this.$refs.rowCon1.clientWidth / 2 - 110) + 'px'         
            _this.accessBarData.width = parseInt(_this.$refs.rowCon1.clientWidth / 2 - 80) + 'px'
          } else {
            _this.accessLineData.width = '200px'
            _this.accessBarData.width = '200px'  
          }
          if (_this.$refs.rowCon1.clientHeight >= 500) {
            _this.accessLineData.height = '450px'

            _this.accessBarData.height = '450px'

            _this.nameLineChart.height = '450px'
          }
        } else if (_this.activeIndex === 1) {
          if (_this.$refs.rowCon2.clientWidth >= 1120) {
            _this.catalogLineChart.width = parseInt(_this.$refs.rowCon2.clientWidth / 2 + 100) + 'px'
          } else {
            _this.catalogLineChart.width = '700px'
          }
        } else {
          if (_this.$refs.rowCon1.clientHeight >= 500) {
            _this.nameLineChart.height = '450px'
          }
        }
      },
      // 默认前一个星期的时间
      date () {
        let sdata = Util.getDay(-7, '')
        let edate = Util.getDay(0, '')
        let dateArr = [sdata, edate]
        this.date1 = dateArr
        this.date2 = dateArr
        this.date3 = dateArr
      },
      // tab页切换
      tab (index) { 
        this.activeIndex = index
        if (index === 0) { 
          this.tab1Onoff = true
          this.tab2Onoff = false
          this.tab3Onoff = false

          this.$nextTick(() => {
            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 = '550px'
              this.accessBarData.width = '500px'
            }
            if (this.$refs.rowCon1.clientHeight >= 500) {
              this.accessLineData.height = '450px'

              this.accessBarData.height = '450px'

              this.nameLineChart.height = '450px'
            }
          })         
        } else if (index === 1) { 
          this.tab1Onoff = false
          this.tab2Onoff = true
          this.tab3Onoff = false
          this.$nextTick(() => {
            if (this.$refs.rowCon2.clientWidth >= 1120) {
              this.catalogLineChart.width = parseInt(this.$refs.rowCon2.clientWidth / 2 + 100) + 'px'
            } else {
              this.catalogLineChart.width = '700px'
            }
          })
        } else { 
          this.tab1Onoff = false
          this.tab2Onoff = false
          this.tab3Onoff = true 
          this.$nextTick(() => {
            if (this.$refs.rowCon1.clientHeight >= 500) {
              this.nameLineChart.height = '450px'
            }
          })
          this.getAppTotalaccessbyTime()
        }

        // monitor
        this.$evtMonitor()
      },
      onMouseEnter (index) { 
        this.mouseOverIndex = index
        clearTimeout(this.timer)
      },
      onMouseOut () { 
        var that = this
        this.timer = setTimeout(() => { 
          that.mouseOverIndex = that.activeIndex
          clearTimeout(this.timer)
        }, 100)
      },
      // 选择查询字段
      chooseDate1 (msg) {
        this.date1 = msg
      }, 
      // 选择查询字段
      chooseDate2 (msg) { 
        this.date2 = msg
      }, 
      chooseDate3 (msg) {
        this.date3 = msg
      }, 

      /* ——————服务访问总量—————— */
      // 每天服务访问总量
      getAccessStTotal () {
        this.accessLineData.catalog = []
        this.accessLineData.data = []

        this.isLoadingAccessLineData = true

        Api.getAccessStTotal('ALLNUM', '0', this.date1[0], this.date1[1]).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的服务
      getAccessStTop10service () { 
        this.accessBarData.catalog = []
        this.accessBarData.data = []
        Api.getAccessStTop10service('_A', this.date1[0], this.date1[1]).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: '请求数据失败'
          })
        })
      },
      // 服务总量查询
      sureSearch () { 
        this.getAccessStTotal()
        this.getAccessStTop10service()
      },
      /* ——————单个服务—————— */
      // 目录树
      getCatalogServiceTree (serviceId) { 
        this.isLoadingTree = true
        Api.getdirectoryAndServicesTree(serviceId).then(data => { 
          this.isLoadingTree = false
           let datas = data.data
          if (data.status === 0) {
            // console.log(data)
            this.treeData = datas
          } else {
            this.$message({
              type: 'error',
              message: '获取数据失败！'
            })
          }
        }).catch(res => {
          this.isLoadingTree = false

          this.$message({
            type: 'error',
            message: '请求数据失败'
          })
        })
      }, 
      handleNodeClick (data) {
        this.nodeData = data
        if (data.type === 'S') {
          this.getAnalyzeSingleServiceTime()
          this.getAnalyzeSingleServiceNum()
        }
      },     
      // 单个服务访问总量
      getAnalyzeSingleServiceNum () {
        this.catalogLineChart.catalog = []
        this.catalogLineChart.data1 = []

        Api.getAnalyzeSingleServiceNum(this.date2[0], this.date2[1], this.nodeData.id).then(data => {
         let datas = data.data
        if (data.status === 0) {
            if (datas.catalogs.length !== 0) {
              this.catalogLineChart.catalog = datas.catalogs
              this.catalogLineChart.data1 = datas.dataList
            } else {
              this.$message({
                type: 'warning',
                message: '请求数据为空'
              })
            }
          } else {
            this.$message({
              type: 'warning',
              message: '获取数据失败！'
            })
          }  
        }).catch(res => {
          this.$message({
            type: 'error',
            message: '请求数据失败'
          })
        })
      },
      // 单个服务耗时
      getAnalyzeSingleServiceTime () {
        this.catalogLineChart.data2 = []

        Api.getAnalyzeSingleServiceTime(this.date2[0], this.date2[1], this.nodeData.id).then(data => {
          let datas = data.data
         if (data.status === 0) {
            if (datas.length !== 0) {
              this.catalogLineChart.data2 = datas.dataList
            } else {
              this.$message({
                type: 'warning',
                message: '请求数据为空'
              })
            }
          } else {
            this.$message({
              type: 'warning',
              message: '获取数据失败！'
            })
          }  
        }).catch(res => {
          this.$message({
            type: 'error',
            message: '请求数据失败'
          })
        })
      },

      // 确定查询——根据目录和时间
      catalogSureSearch () {
        if (this.nodeData.type === 'S') {
          this.getAnalyzeSingleServiceTime()
          this.getAnalyzeSingleServiceNum()
        } else {
          this.$message({
            type: 'warning',
            message: '请选择服务'
          })
        }
      },
      /* ————应用系统—————— */
      // 应用系统——按时间段查询服务访问总量
      getAppTotalaccessbyTime () {
        this.nameLineChart.catalog = []
        this.isLoadingNameLineChart = true

        Api.getAppTotalaccessbyTime(this.date3[0], this.date3[1])
        .then(data => {
          this.isLoadingNameLineChart = false
      
          if (data.status === 0) {
            // this.nameLineChart.legend = data.legend
            this.nameLineChart.catalog = data.data.catalogs
            this.nameLineChart.data = data.data.dataList
          } else {
            this.$message({
              type: 'error',
              message: '获取数据失败！'
            })
          }  
        }).catch(res => {
          this.isLoadingNameLineChart = false
          this.$message({
            type: 'error',
            message: '请求数据失败'
          })
        })
      },
      // 确定查询——根据目录和时间
      catalogSureSearch3 () { 
        this.getAppTotalaccessbyTime()
      }
    }
  }
</script>

<style lang="scss">
  .row::-webkit-scrollbar { width: 0 !important }
  .serviceAccess { 
    width: 100%;
    display: block;

    .serviceAccessIn { 
      padding: 0 10px;
      text-align: center;
    }
    .accessTop { 
      height: 46px;
      line-height: 30px;
      background: #eaecef;
      border-bottom: solid 1px #d1dfdd;

      .accessTab {
        width: 540px;
        float: left;
        height: 46px;
        position: relative;
         
        li {
          height: 46px;
          line-height: 46px;
          text-align: center;
          left: 0;
          top: 0;
          float: left;
          padding: 0 40px;
          cursor: pointer;
          border-right: solid 1px #d1dfdd;
        }
        
        .tapTriangle { 
          width: 0;
          height: 0;
          padding: 0;
          border-right: 10px solid transparent;
          border-bottom: 10px solid #d1dfdd;
          border-left: 10px solid transparent;

          position: absolute;
          left: 62px;
          top: 36px;

          transition: left 0.3s;

          span { 
            width: 0;
            height: 0;
            padding: 0;
            border-right: 9px solid transparent;
            border-bottom: 9px solid #fff;
            border-left: 9px solid transparent;

            display: block;
            position: absolute;
            left: -9px;
            top: 1px;
          } 
        }
        .p1 { 
          left: 59px;
        }
        .p2 { 
          left: 196px;
        }
        .p3 { 
          left: 333px;
        }
      }

      .search { 
        float: right;
        padding: 8px 10px;
        .demonstration { 
          height: 30px;
          line-height: 30px;
          background: #fff;
          padding: 0 10px;
          float: left;
          border: solid 1px #d1dfdd;
          border-radius: 4px 0 0 4px;
          font-size: 14px;
        }
        .el-input__inner { 
          height: 30px;
          /* border-radius: 0 4px 4px 0;
          border: solid 1px #8dc9c7;
          border-left: none; */

          .el-icon-date, .el-range-separator {
            line-height: 22px;
          }
        }
        .select { 
          width: 100px;
          float: left;
          /* .el-input__inner { 
            border-left: solid 1px #8dc9c7;
            border-radius: 4px;
          } */
        }
        .el-input__icon {
          line-height: 30px;
        }
      }

      .block { 
        float: left;
        margin: 0 16px;
      }
      .el-button { 
        float: right;
        padding: 7px 14px;
      }
    }
    .row { 
      margin-bottom: 20px;
      border: solid 1px #d1dfdd;
      overflow-y: auto;
    }

    .con {
      width: 100%;
      padding: 20px 10px 30px;
      height: 500px;
    }   
    .chart {
    width: 45%;
    height: 300px;
    padding: 30px;
    display: inline-block;
   }
   .chart1 {
    width: 100%;
    height: 400px;
    padding: 30px;
    display: inline-block;
   }
    .chart2 {
    width: 45%;
    height: 400px;
    padding: 30px;
    display: inline-block;
   }
  }
  @media screen and (max-width:1200px) {
    .serviceAccess {
      .con {
        height: 280px;
      }
    }
  }

</style>
