<template>
  <div>
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" :title="$t('dashboard.analysis.total-sales')" :total="taskQuantity.total">
          <a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <span slot="term">完成</span>
            {{ taskQuantity.finish }}
            <a-divider type="vertical" />
            <span slot="term">运行中</span>
            {{ taskQuantity.running }}
            <a-divider type="vertical" />
            <span slot="term">最大次数</span>
            {{ taskQuantity.maxRetryCount }}
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="总调度量" :total="dispatchQuantity.total">
          <a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <a-tooltip title="成功率">
              <a-progress stroke-linecap="square" :percent="dispatchQuantity.successPercent" />
            </a-tooltip>
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="总在线机器" :total="countActivePodQuantity.total">
          <a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <span slot="term">客户端</span>
            {{ countActivePodQuantity.clientTotal }}
            <a-divider type="vertical" />
            <span slot="term">服务端</span>
            {{ countActivePodQuantity.serverTotal }}
          </div>
        </chart-card>
      </a-col>
    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a>{{ $t('dashboard.analysis.all-day') }}</a>
              <a>{{ $t('dashboard.analysis.all-week') }}</a>
              <a>{{ $t('dashboard.analysis.all-month') }}</a>
              <a>{{ $t('dashboard.analysis.all-year') }}</a>
            </div>
            <div class="extra-item">
              <a-range-picker :style="{width: '256px'}" />
            </div>
            <a-select placeholder="请输入组名称" @change="value => handleChange(value)" :style="{width: '256px'}">
              <a-select-option v-for="item in groupNameList" :value="item" :key="item">{{ item }}</a-select-option>
            </a-select>
          </div>
          <a-tab-pane loading="true" :tab="$t('dashboard.analysis.sales')" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <g2-line/>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list :title="$t('dashboard.analysis.sales-ranking')" :list="rankList"/>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
  </div>
</template>

<script>
// import moment from 'moment'
import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  RankList,
  Bar,
  NumberInfo,
  MiniSmoothArea,
  G2Line
} from '@/components'
import { baseMixin } from '@/store/app-mixin'
import { getAllGroupNameList, countTask, countDispatch, countActivePod, rankSceneQuantity } from '@/api/manage'

export default {
  name: 'Analysis',
  mixins: [baseMixin],
  components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    NumberInfo,
    MiniSmoothArea,
    G2Line
  },
  data () {
    return {
      loading: true,
      rankList: [],
      groupNameList: [],
      taskQuantity: {
        total: 0,
        running: 0,
        finish: 0,
        maxRetryCount: 0
      },
      dispatchQuantity: {
        successPercent: '0',
        total: 0
      },
      countActivePodQuantity: {
        clientTotal: 0,
        serverTotal: 0,
        total: 0
      },
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1
      }
    }
  },
  computed: {
  },
  methods: {
  },
  created () {
    getAllGroupNameList().then(res => {
      this.groupNameList = res.data
    })

    countTask().then(res => {
      this.taskQuantity = res.data
    })

    countDispatch().then(res => {
      this.dispatchQuantity = res.data
    })

    countActivePod().then(res => {
      this.countActivePodQuantity = res.data
    })

    rankSceneQuantity().then(res => {
      res.data.forEach(res => {
        this.rankList.push({
          name: res.groupName + '/' + res.sceneName,
          total: res.total
        })
      })
    })

    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
  }
}
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .antd-pro-pages-dashboard-analysis-twoColLayout {
    position: relative;
    display: flex;
    display: block;
    flex-flow: row wrap;
  }

  .antd-pro-pages-dashboard-analysis-salesCard {
    height: calc(100% - 24px);
    /deep/ .ant-card-head {
      position: relative;
    }
  }

  .dashboard-analysis-iconGroup {
    i {
      margin-left: 16px;
      color: rgba(0,0,0,.45);
      cursor: pointer;
      transition: color .32s;
      color: black;
    }
  }
  .analysis-salesTypeRadio {
    position: absolute;
    right: 54px;
    bottom: 12px;
  }
</style>
