<template>
  <div class="wrapper">
    <div class="header">
      <el-row :gutter="16" class="panel-group">
        <el-col v-for="(item, index) in layoutRow" :key="index" :lg="6" :sm="12" :xs="12" class="card-panel-col">
          <div class="content">
            <div class="data-box flow-hidden">
              <div class="data-info fl_l">
                <div class="title">{{ item.label() }}</div>
                <div class="count">
                  <count-to :duration="2600" :end-val="item.model.count" :start-val="0" class="card-panel-num"/>
                </div>
              </div>
              <div class="icon fl_r">
                <img :src="item.icon" alt="">
              </div>
            </div>
            <div v-if="item.model.trendDirection >= 0" class="compare">
              和昨日相比
              <img :src="`${item.model.trendDirection === 0 ? require('../../assets/icons/trend_up.png') : require('../../assets/icons/trend_down.png') }`"
                   alt=""
                   class="trend"
              >
              <span :class="['num', item.model.trendDirection === 0 ? 'up' : 'down' ]">{{ Math.abs(item.model.trendNum) }}%</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="chart-content">
      <line-chart/>
    </div>

    <div class="rank-info">
      <el-row :gutter="16" class="panel-group">
        <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
          <RankList title="充值排行榜" :type="3">
            <template v-slot:default="{ data }">
              <count-to :duration="2600" :end-val="data.value" :options="options" :start-val="0" class="card-panel-num"/>
            </template>
          </RankList>
        </el-col>

        <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
          <RankList title="提现排行榜" :type="4">
            <template v-slot:default="{ data }">
              <count-to :duration="2600" :end-val="data.value" :options="options" :start-val="0" class="card-panel-num"/>
            </template>
          </RankList>
        </el-col>

        <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
          <RankList :type="1" :operation="operation" title="用户邀请榜" @switch-change=""/>
        </el-col>

        <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
          <RankList :operation="operation" :type="2" title="女神收入榜"/>
        </el-col>
      </el-row>
    </div>

    <div class="auto-refresh">
      <span>自动刷新</span>
      <el-switch v-model="autoRefreshSwitch"></el-switch>
      <el-dropdown @command="handleDropdownClick">
        <div class="dropdown">{{ refreshTimeLabel }}<i class="el-icon-arrow-down el-icon--right"></i></div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="({ label, key }) in refreshTimeSelect"
            :key="key"
            :command="{ label, key }"
          >{{ label }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

  </div>
</template>

<script>
import CountTo from 'vue-countup-v2'
import RankList from '@/views/components/rankList'
import LineChart from '../dashboard/LineChart'
import { staticAmountLine, staticIndex, staticRank } from '@/api/cai/static'
import { formatDate1 } from '@/utils'
import publisherInstance from '@/utils/pubsub'

const chartSelect = [
  { label: '最近一周', key: '1' },
  { label: '最近一个月', key: '2' },
  { label: '最近三个月', key: '3' }
]

const refreshTimeSelect = [
  { label: '10s', key: '10' },
  { label: '30s', key: '30' },
  { label: '60s', key: '60' }
]

const operation = [
  { label: '总', prop: 'Total' },
  { label: '月', prop: 'Month' },
  { label: '周', prop: 'Week' },
  { label: '日', prop: 'Day' }
]


export default {
  components: {
    CountTo,
    RankList,
    LineChart
  },
  data() {
    return {
      operation,
      layoutRow: [],
      options: {
        decimalPlaces: 2,
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
        prefix: '￥',
        suffix: ''
      },
      loginModel: {
        count: 40689,
        trendDirection: 0,
        trendNum: 8.5
      },
      topUpModel: {
        count: 40689,
        trendDirection: 0, // 'up',
        trendNum: 8.5
      },
      withdrawDepositModel: {
        count: 40689,
        money: 24,
        trendDirection: 1, // down
        trendNum: 8.5
      },
      anchorModel: {
        count: 40689,
        money: 8,
        trendDirection: 1,
        trendNum: 8.5
      },
      chartSelect,
      refreshTimeSelect,
      refreshTimeLabel: '60s',
      refreshTimeValue: 60,
      autoRefreshSwitch: true,
      autoRefreshTimer: null
    }
  },
  created() {
    this.layoutRow = [
      { label: () => '今日登录', icon: require('../../assets/icons/img.png'), model: this.loginModel },
      { label: () => '主播数', icon: require('../../assets/icons/img_1.png'), model: this.topUpModel },
      {
        label: () => `今日充值(${this.withdrawDepositModel.money})`,
        icon: require('../../assets/icons/img_2.png'),
        model: this.withdrawDepositModel
      },
      {
        label: () => `今日提现(${this.anchorModel.money})`,
        icon: require('../../assets/icons/img_3.png'),
        model: this.anchorModel
      }
    ]
    this.getTodayStatistics();
    this.refreshFunc();
    publisherInstance.subscribe('refresh', this.getTodayStatistics);
  },
  methods: {
    getScope(scope) {
      console.log('getScope:', scope)
    },
    refreshFunc() {
      if (this.autoRefreshSwitch) {
        clearInterval(this.autoRefreshTimer);
        this.autoRefreshTimer = setInterval(()=> publisherInstance.publish('refresh'), this.refreshTimeValue * 1000)
      }
    },
    handleDropdownClick({ label, key }) {
      this.refreshTimeLabel = label;
      this.refreshTimeValue = key;
      this.refreshFunc();
    },
    getTodayStatistics() {
      staticIndex().then(response => {
        const {
          todayLoginNum,
          todayLoginDiffLast,
          anchorNum,
          anchorNumDiffLast,
          todayRechargeAmountNum,
          todayRechargeNum,
          todayRechargeAmountDiffLast,
          todayWithdrawAmount,
          todayWithdrawNum,
          todayWithdrawAmountDiffLast
        } = response.data
        this.loginModel.count = todayLoginNum
        this.loginModel.trendDirection = todayLoginDiffLast >= 0 ? 0 : 1; // 增加还是减少
        this.loginModel.trendNum = todayLoginDiffLast

        this.topUpModel.count = anchorNum // 主播人数
        this.topUpModel.trendDirection = anchorNumDiffLast >= 0 ? 0 : 1; // 增加还是减少
        this.topUpModel.trendNum = anchorNumDiffLast

        this.withdrawDepositModel.count = todayRechargeAmountNum // 充值金额
        this.withdrawDepositModel.money = todayRechargeNum
        this.withdrawDepositModel.trendDirection = todayRechargeAmountDiffLast >= 0 ? 0 : 1;
        this.withdrawDepositModel.trendNum = todayRechargeAmountDiffLast // 与昨日相比

        this.anchorModel.count = todayWithdrawAmount
        this.anchorModel.money = todayWithdrawNum
        this.anchorModel.trendNum = todayWithdrawAmountDiffLast
        this.anchorModel.trendDirection = todayWithdrawAmountDiffLast >= 0 ? 0 : 1
      })
    }
  }
}

</script>

<style lang="scss" scoped>
.fl_l {
  float: left;
}

.fl_r {
  float: right;
}

.flow-hidden {
  overflow: hidden;
}

.wrapper {
  .header {
    //margin-bottom: 16px;
    .card-panel-num {
      font-size: 28px;
      font-weight: bold;
      color: #202224;
    }

    .content {
      background: #fff;
      //height: 127px;
      padding: 16px;
      border-radius: 14px;
      box-sizing: border-box;
      margin-bottom: 16px;

      .data-info {
        .title {
          font-size: 16px;
          color: #202224;
          margin-bottom: 8px;
        }

        .count {
          line-height: 38px;
        }
      }

      .icon {
        width: 60px;
        height: 60px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .compare {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        color: #858585;

        .trend {
          height: 18px;
          width: 18px;
          margin-left: 8px;
          margin-right: 2px;
          vertical-align: middle;
        }

        .num {
          &.down {
            color: #F93C65;
          }

          &.up {
            color: #00B69B;
          }
        }
      }
    }
  }

  .chart-content {
    position: relative;
    border-radius: 14px;
    background: #fff;
    padding: 16px;
    margin-bottom: 16px;
  }

  .rank-info {
    margin-bottom: 16px;

    .card-panel-col {
      border-radius: 14px;
      margin-bottom: 16px;
    }
  }

  .auto-refresh {
    position: fixed;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    bottom: 8px;
    right: 8px;
    width: 130px;
    padding: 4px;
    box-sizing: border-box;
    display: flex;
    height: 24px;
    border-radius: 12px;
    background: #fff;
    color: #767D85;
    text-align: center;
    font-size: 12px;
  }
}

::v-deep .el-switch {
  height: 14px !important;
  margin-top: 1px;
  margin-left: 4px;
}

::v-deep .el-switch__core {
  width: 28px !important;
  height: 14px !important;

  &::after {
    width: 10px;
    height: 10px;
  }
}

::v-deep .el-switch.is-checked .el-switch__core {
  border-color: #3073C1 !important;
  background-color: #3073C1 !important;

  &::after {
    margin-left: -12px;
  }
}

::v-deep .el-dropdown {
  width: 37px !important;

  .dropdown {
    margin-left: 1px;
    font-size: 12px;
    color: #767D85;
    cursor: pointer;

    i {
      font-size: 10px;
      margin-left: 2px;
    }
  }
}
</style>
