<template>
  <div style="width: 1316px; margin: 0 auto; padding: 16px 0 10px 10px">
    <p class="situation">
      共享情况
      <span class="line"></span>
    </p>
    <div class="SharingSituation">
      <div class="SharingSituation-left">
        <div>
          <div class="left-title">
            <div>日平均浏览量 {{ browseAvg }}次</div>
            <div></div>
            <div>日最大浏览量{{ browseMax }}次</div>
          </div>
          <div class="left-content-title">
            <div
              class="left-content-title-son"
              v-for="item in quarter"
              :key="item"
              @click="quarterSwitch(item)"
            >
              <div class="name" :class="item == switchquarter ? 'bianlan' : ''">
                {{ item }}
              </div>
              <div :class="item == switchquarter ? 'hengxian' : ''"></div>
            </div>
          </div>
        </div>
        <div class="Chart" id="Chart"></div>
      </div>
      <div class="volume">
        <div>
          <span
            style="
              font-size: 14px;
              float: left;
              margin-left: 420px;
              text-align: center;
              padding-top: 6px;
            "
          >
            单位: 次
          </span>
          <p class="p">申请量</p>
        </div>

        <div class="volume_box">
          <div class="fugai"></div>
          <div
            v-for="(item, index) in dataLists"
            :key="item"
            class="volume_box-son"
            :style="{
              backgroundImage: `url(${item.photoBg}) `,
            }"
          >
            <div class="volume_box-son-top" v-if="index % 2 == 0">
              <div
                class="photo"
                :style="{
                  backgroundImage: `url(${item.photo}) `,
                }"
              ></div>
              <div class="name">{{ item.type }}</div>
              <div class-="type">{{ item.amount }}</div>
            </div>
            <div class="volume_box-son-bottom" v-else>
              <div class="type">{{ item.amount }}</div>
              <div class="name">{{ item.type }}</div>
              <div
                class="photo"
                :style="{
                  backgroundImage: `url(${item.photo}) `,
                }"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref, onMounted, watch } from 'vue'
  import * as moment from 'moment'
  import * as echarts from 'echarts'
  import { applyAmount, trafficStatistics } from '@/api/abilityStatistics'
  const quarter = ref(['近七天', '近14天', '月度'])
  let startDate = ref('')
  let endDate = ref('')

  //数据图
  const dataGraph = (datas) => {
    console.log('datas=========>', datas)
    echarts.init(document.getElementById('Chart')).dispose()
    let chartDom = document.getElementById('Chart')
    let myChart = echarts.init(chartDom)
    let option
    option = {
      xAxis: {
        type: 'category',
        data: datas.time,
      },
      yAxis: {
        type: 'value',
      },
      tooltip: {
        show: true,
        trigger: 'item',
        formatter: '{b}的浏览量：</br> {c} 次',
      },
      series: [
        {
          data: datas.value,
          type: 'line',
          smooth: true,
        },
      ],
    }
    option && myChart.setOption(option)
  }
  //季度切换方法
  let swtichname = ref('日')
  let switchquarter = ref('')
  const quarterSwitch = (name) => {
    switch (name) {
      case '近七天':
        hebdomad()
        swtichname.value = '日'
        break
      case '近14天':
        fortnight()
        swtichname.value = '14日'
        break
      case '月度':
        yueji()
        swtichname.value = '月'
        break
    }
    switchquarter.value = name
  }
  //获取近七天日期方法
  function hebdomad() {
    startDate.value = moment().subtract(7, 'days').format('YYYY-MM-DD')
    endDate.value = moment().format('YYYY-MM-DD')
    console.log('startDate.value', startDate.value, endDate.value)
  }
  //获取近14天日期方法
  function fortnight() {
    startDate.value = moment().subtract(14, 'days').format('YYYY-MM-DD')
    endDate.value = moment().format('YYYY-MM-DD')
    console.log('startDate.value', startDate.value, endDate.value)
  }
  //获取近月度日期方法
  function yueji() {
    startDate.value = moment().subtract(30, 'days').format('YYYY-MM-DD')
    endDate.value = moment().format('YYYY-MM-DD')
    console.log('startDate.value', startDate.value, endDate.value)
  }
  //数据图接口
  let dataList = ref({ time: [], value: [] }) //初始化数据
  let browseAvg = ref('')
  let browseMax = ref('')
  const myTrafficStatistics = () => {
    dataList.value.time = []
    dataList.value.value = []
    const data = {
      startDate: startDate.value,
      endDate: endDate.value,
    }
    trafficStatistics(data).then((res) => {
      browseMax.value = res.data.data.browseMax
      browseAvg.value = res.data.data.browseAvg
      res.data.data.browseDayList.map((item) => {
        for (const key in item) {
          dataList.value.time.push(moment(key).format('MM.DD'))
          dataList.value.value.push(item[key])
        }
      })
      console.log('rrrrrr123rrrres', dataList.value)
      dataGraph(dataList.value)
    })
  }
  let photoBg = ref([
    require('../../../assets/abilityStatistics/zhishiku-bg.png'),
    require('../../../assets/abilityStatistics/yingyongziyuan-bg.png'),
    require('../../../assets/abilityStatistics/zujianfuwu-bg.png'),
    require('../../../assets/abilityStatistics/shujuziyuan-bg.png'),
    require('../../../assets/abilityStatistics/jichujianshe-bg.png'),
  ])
  let photo = ref([
    require('../../../assets/abilityStatistics/zhishiku.png'),
    require('../../../assets/abilityStatistics/yingyongziyuan.png'),
    require('../../../assets/abilityStatistics/zujianfuwu.png'),
    require('../../../assets/abilityStatistics/shujuziyuan.png'),
    require('../../../assets/abilityStatistics/jichujianshe.png'),
  ])
  //申请量接口
  let dataLists = ref([])
  const myApplyAmount = () => {
    applyAmount().then((res) => {
      // dataLists.value = res.data.data
      res.data.data.map((item) => {
        switch (item.type) {
          case '知识库':
            dataLists.value[0] = item
            break
          case '应用资源':
            dataLists.value[1] = item
            break
          case '组件服务':
            dataLists.value[2] = item
            break
          case '数据资源':
            dataLists.value[3] = item
            break
          case '基础设施':
            dataLists.value[4] = item
            break
          default:
            dataLists.value.push(item)
            break
        }
      })
      photo.value.map((item, index) => {
        dataLists.value[index].photo = item
        dataLists.value[index].photoBg = photoBg.value[index]
      })
      console.log('qqqqqq11122qqqqq', dataLists.value)
    })
  }
  onMounted(() => {
    quarterSwitch('近七天')
    watch(
      switchquarter,
      (value) => {
        myTrafficStatistics(value)
      },
      { deep: true }
    )
    myApplyAmount()
    myTrafficStatistics()
  })
</script>
<style lang="less" scoped>
  p {
    margin: 0;
    padding: 0;
  }

  .situation {
    font-weight: 600;
    font-style: normal;
    font-size: 24px;
    text-align: center;
  }
  .line {
    width: 34px;
    height: 3px;
    background-color: #0058e1;
    margin-top: 8px;
  }

  .SharingSituation {
    font-size: 18px;
    font-family: text-typeface;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;

    .SharingSituation-left {
      width: 666px;
      height: 420px;
      background: #eef4fd;
      z-index: 2;
      .left-title {
        height: 50px;
        width: 100%;
        background: #0058e1;
        color: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 2px;
        padding: 0 80px;
      }
      .left-content-title {
        display: flex;
        justify-content: center;
        .left-content-title-son {
          margin: 18px 50px 10px 0;

          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          .name {
            font-size: 16px;
          }
          .bianlan {
            color: #0058e1;
          }
          .hengxian {
            color: #0058e1;
            height: 3px;
            width: 34px;
            background: #0058e1;
            border-radius: 1px;
            margin-top: 5px;
          }
        }
      }
    }

    .Chart {
      flex: 1;
      width: 598px;
      height: 286px;
      background: #f7f7f7;
      text-align: center;
      margin: auto;
    }

    .volume {
      margin-top: 64px;
      border-radius: 2px;
      margin-left: -40px;
      .p {
        width: 96px;
        height: 36px;
        color: #0058e1;
        font-size: 18px;
        background: url('../../../assets/abilityStatistics/gongxiangqingkuangliulanl.png')
          no-repeat;
        text-align: center;
        line-height: 36px;
        margin-left: 500px;
      }
      .volume_box {
        width: 666px;
        display: flex;
        margin-bottom: 20px;
        color: #fff;
        .fugai {
          width: 40px;
          height: 390px;
          background: #0058e1;
          margin-top: 1px;
        }
        .volume_box-son {
          width: 120px;
          height: 390px;
          display: flex;
          flex-direction: column;
          align-items: center;
          background: #0058e1;
          padding: 44px 0;
          position: relative;
          .volume_box-son-top,
          .volume_box-son-bottom {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-direction: column;
            .photo {
              height: 46px;
              width: 46px;
            }
          }
          .volume_box-son-bottom {
            position: absolute;
            bottom: 44px;
          }
        }
      }
    }
  }
</style>
