<!--
 * @Description:
 * @Author: Wang Minjie
 * @Date: 2019-12-31 09:55:24
 * @LastEditTime : 2020-01-09 15:10:42
 * @LastEditors  : Wang Minjie
 <template>
  <div class="content-layer">
    <h1>{{$t('welcome')}}</h1>
  </div>
</template>
 -->
<template>
  <div>
    <div class="content-layer home-content">
      <div class="home-content-left">
        <h1>{{welcome}}</h1>
        <p>{{$t('home1')}}：<span>IP:{{lastLoginInfo.login_ip}}</span> <span>{{$t('home2')}}:{{lastLoginInfo.login_time}}</span> </p>
      </div>
      <div class="home-content-right">
        <div class="home-content-right-box" v-for="item in workOrder" :key="item.name">
            <div>
              <!-- <Icon :type="item.type"  /> -->
              <img :src="item.src" alt="" :style="{color:item.color}">
            </div>
            <div class="home-content-right-box-info">
              <p style="font-size: 20px;font-weight: bold;">{{item.num}}</p>
              <p>{{item.name}}</p>
            </div>
        </div>
      </div>
    </div>
    <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="6" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 150px;padding-bottom: 10px;color:#333;">
        <!-- <router-link v-if = "i === 0" :to="{name:'applicationList', query:{key:'0'}}">
          <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36" style="border-radius: 10px;">
            <count-to :end="infor.count" count-class="count-style"/>
            <p style="color:#999999">{{ infor.title }}</p>
          </infor-card>
        </router-link> -->
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36" style="border-radius: 10px;">
          <count-to :end="infor.count" count-class="count-style"/>
          <p style="color:#999999">{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <div ref="myChart" id="my_chart" class="content-layer" :style="{width: '100%', height: '400px', margin: '20px 0'}"></div>
    <!-- <Card class="homeCard">
        <p>SDKs</p>
        <div class="homesdk">
          <div class="homesdk__box" v-for="item in sdkArr" :key="item.label">
            <div class="homesdk__box__name">
              {{item.label}}
            </div>
            <div class="homesdk__box__info">
              <p style="font-size: 20px;font-weight: bold;color: #333;margin-bottom: 20px;">{{item.label}} SDK</p>
              <a :href="item.download_url" target="_blank" style="color:#486DBE;cursor:pointer;">{{item.content}}</a>
            </div>
          </div>
        </div>
    </Card> -->
  </div>
</template>

<script>
import InforCard from '_c/info-card'
// import { GetDataFlowApi } from '@/api/stats'
import CountTo from '_c/count-to'
import { ChartPie, ChartBar } from '_c/charts'
import Example from './example.vue'
import { GetIndexData, GetDataFlow } from '@/api/home'
import { getToken } from '@/libs/util'
import echarts from 'echarts'
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
    Example
  },
  data () {
    return {
      welcome: '',
      // objjj: { name: '状态码:200', type: 'line', stack: '总量' },
      token: getToken(),
      lastLoginInfo: {},
      workOrder: [
        {
          name: this.$t('home7'),
          num: 0,
          src: 'http://pro-test.api.yesapi.cn/uploads/20210201/101551_23d02c4e3e25e0ffed2e9e818ba79df2.png',
          color: 'red'
        },
        {
          name: this.$t('home8'),
          num: 0,
          src: 'http://pro-test.api.yesapi.cn/uploads/20210201/101641_5f49ba8ab7db2d61d79e78d75821a41a.png',
          color: '#486DBE'
        }
      ],
      sdkArr: [],
      statusArr: [], // 状态
      statusData: [], // 不同状态的数据
      dataStatusObj: [{}],
      colorArr: ['#ff00ea', '#9000ff', '#2d8cf0', '#1935be', '#ff9900', '#ffcc00', '#ff4800'],
      dataColorArr: [],
      xAxisTimeData: [], // 时间数据
      // systemInfo: [], // 运行环境
      inforCardData: [
        { title: this.$t('home3'), icon: 'md-apps', count: 0, color: '#ed3f14' },
        { title: this.$t('home4'), icon: 'ios-people', count: 0, color: '#ff9900' },
        { title: this.$t('home5'), icon: 'md-analytics', count: 0, color: '#2d8cf0' },
        { title: this.$t('home6'), icon: 'md-git-network', count: 0, color: '#19be6b' }
      ]
    }
  },
  // 获取首页数据
  created () {
    let _this = this
    const formdata = new FormData()
    formdata.append('access_token', _this.token)
    GetIndexData(formdata).then(res => {
      const resData = res
      if (resData.ret === 200) {
        _this.inforCardData[0].count = resData.data.my_apps // todo
        _this.inforCardData[1].count = resData.data.my_orders
        _this.inforCardData[2].count = resData.data.my_flows
        _this.inforCardData[3].count = resData.data.apiNum
        _this.workOrder[0].num = resData.data.my_wailt_orders
        _this.workOrder[1].num = resData.data.my_work_orders
        _this.welcome = resData.data.welcome_message
        _this.lastLoginInfo = resData.data.last_login
        // _this.lastLoginInfo = resData.data.last_login
        // console.log(resData.data.systemInfo, '============')
        // _this.systemInfo = resData.data.systemInfo
        _this.sdkArr = resData.data.systemInfo
      } else {
        _this.$Message.error(resData.msg)
      }
    })
  },
  mounted () {
    this.getQuery()
  },
  methods: {
    // turnPage () {
    //   this.$router.push({ name: 'paltform_permissions_assign' })
    // },
    // 接口数据统计
    getQuery () {
      const formdata = new FormData()
      formdata.append('access_token', this.token)
      GetDataFlow(formdata).then(res => {
        // this.statusArr = []
        res.data.ret.forEach(item => {
          this.statusData.push({ status: item, data: [] })
          item = this.$t('home9') + item
          this.statusArr.push(item)
          this.dataStatusObj.push({})
        })
        const loginData = res.data.data
        this.xAxisTimeData = []
        this.$nextTick(() => {
          loginData.forEach((item, index) => {
            this.xAxisTimeData.push(item.time) // 获取时间
            for (let i in item) {
              this.statusData.forEach(itemStatus => {
                // console.log(i, itemStatus.status, 'itemmmmmmm')
                if (Number(i) === itemStatus.status) {
                  itemStatus.data.push(item[i])
                }
              })
            }
          })
          this.statusArr.forEach((item, index) => {
            if (item === (this.$t('home9') + '200')) {
              this.dataColorArr.push('#139554')
            } else if (item === (this.$t('home9') + '400')) {
              this.dataColorArr.push('#ff0000')
            } else {
              this.dataColorArr.push(this.colorArr[index])
            }
            this.statusData.forEach(itemData => {
              if (Number(item.replace(/[^0-9]/ig, '')) === itemData.status) {
                this.dataStatusObj[index].data = itemData.data
              }
            })
            this.dataStatusObj[index].name = item
            this.dataStatusObj[index].smooth = true
            this.dataStatusObj[index].areaStyle = {}
            this.dataStatusObj[index].stack = this.$t('total')
            // this.dataStatusObj[index].data = this.statusData[index].data
          })
          this.dataStatusObj.forEach(item => {
            item.type = 'line'
          })
          this.createEchars()
        })
      })
    },
    createEchars () {
      let myChartData = echarts.init(this.$refs.myChart)
      let option = {
        title: {
          text: this.$t('home10')
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          right: '10%',
          data: this.statusArr
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '4%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.xAxisTimeData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        /* series: [
          {
            name: '状态码:200',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: this.allData
          },
          {
            name: '状态码:400',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: this.allData
          }
        ], */
        series: this.dataStatusObj,
        // series: this.objjj,
        color: this.dataColorArr
      }
      myChartData.setOption(option)
      // 建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener('resize', function () { myChartData.resize() })
    }
  }
}
</script>

<style lang="less">
.count-style{
  font-size: 50px;
}
.homeCard{
  background: #fff;
  border-radius: 10px;
}
.home-content {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  // &-left {

  // }
  &-right {
    display: flex;
    align-items: center;
    i {
      font-size: 30px;
    }
    &-box {
      display: flex;
      align-items: center;
      margin-right: 40px;
      img {
        width: 40px;
        height: 40px;
      }
      &-info {
        margin-left: 10px;
      }
    }
  }
}
.homesdk {
  display: flex;
  justify-content: space-around;
  &__box {
    display: flex;
    &__name {
      display: flex;
      width: 80px;
      height: 80px;
      padding: 10px;
      border-radius: 50%;
      background: rgba(72,109,190,.5);
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: #fff;
    }

    &__info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 10px;
    }
  }
}
</style>
