<template>
  <div class="dashboard-editor-container">
    <el-row v-if="userInfo.userApiKey" v-permisaction="['admin:tmMember:apiKey']" :gutter="12">
      <el-col :sm="24" :xs="24" :md="8" :xl="8" :lg="8" :style="{ marginBottom: '12px' }">
        <chart-card title="我的密钥">
          <div slot="total">
            <span style="font-size: 16px;">可用：</span>  {{ userInfo.remainChars ? userInfo.remainChars:'-' }}
          </div>
          <api-key-display :api-key="userInfo.userApiKey" :placeholder-lenth="16" />
        </chart-card>
      </el-col>
      <!-- <el-col :sm="24" :xs="24" :md="6" :xl="6" :lg="6" :style="{ marginBottom: '12px' }">
        <chart-card title="访问量" :total="8846">
          <el-tooltip slot="action" class="item" effect="dark" content="指标说明" placement="top-start">
            <i class="el-icon-warning-outline" />
          </el-tooltip>
          <div>
            <mini-area />
          </div>
          <template slot="footer">日访问量<span> {{ '1234' }}</span></template>
</chart-card>
</el-col>
<el-col :sm="24" :xs="24" :md="6" :xl="6" :lg="6" :style="{ marginBottom: '12px' }">
  <chart-card title="支付笔数" :total="6560">
    <el-tooltip slot="action" class="item" effect="dark" content="指标说明" placement="top-start">
      <i class="el-icon-warning-outline" />
    </el-tooltip>
    <div>
      <mini-bar />
    </div>
    <template slot="footer">转化率 <span>60%</span></template>
  </chart-card>
</el-col>
<el-col :sm="24" :xs="24" :md="6" :xl="6" :lg="6" :style="{ marginBottom: '12px' }">
  <chart-card title="运营活动效果" total="78%">
    <el-tooltip slot="action" class="item" effect="dark" content="指标说明" placement="top-start">
      <i class="el-icon-warning-outline" />
    </el-tooltip>
    <div>
      <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" height="8px" />
    </div>
    <template slot="footer">
            <trend flag="top" style="margin-right: 16px;" rate="12">
              <span slot="term">同周比</span>
            </trend>
            <trend flag="bottom" rate="80">
              <span slot="term">日环比</span>
            </trend>
          </template>
  </chart-card>
</el-col> -->
    </el-row>

    <el-card v-permisaction="['admin:tmMember:apiKey']" :bordered="false" :body-style="{ padding: '0' }">
      <div class="salesCard">

        <bar :list="barData" title="字符使用量" />
      </div>
    </el-card>

  </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import Trend from '@/components/Trend'
import MiniArea from '@/components/MiniArea'
import MiniBar from '@/components/MiniBar'
import MiniProgress from '@/components/MiniProgress'
import RankList from '@/components/RankList/index'
import Bar from '@/components/Bar.vue'
import ApiKeyDisplay from './components/ApiKeyDisplay.vue'
import { getMyKey, getTranslateDataStatistic } from '@/api/admin/tm-member'
import user from '@/store/modules/user'

const rankList = []
for (let i = 0; i < 7; i++) {
  rankList.push({
    name: '白鹭岛 ' + (i + 1) + ' 号店',
    total: 1234.56 - i * 100
  })
}

export default {
  name: 'DashboardAdmin',
  components: {
    ChartCard,
    Trend,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    ApiKeyDisplay
  },
  data() {
    return {
      barData: [],
      userInfo: {
        userApiKey: '',
        remainChars: null
      },
      rankList

    }
  },
  mounted() {
    this.getApiKey()
    this.getStatistic()
  },
  methods: {
    getApiKey() {
      getMyKey().then(res => {
        if (res && res.code === 200) {
          this.userInfo = res.data
        }
      })
    },
    getStatistic() {
      getTranslateDataStatistic().then(res => {
        if (res && res.code === 200) {
          this.barData = res.data
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 12px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

::v-deep .el-tabs__item {
  padding-left: 16px !important;
  height: 50px;
  line-height: 50px;
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
