<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' ]">{{ item.model.trendNum }}%</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="chart-content">
      <line-chart/>
      <div class="select-time">
        <el-date-picker
          v-model="chartTime"
          :picker-options="pickerOptions"
          align="right"
          value-format="yyyy-MM-dd"
          end-placeholder="结束日期"
          @change="handleDatePickerChange"
          range-separator="至"
          start-placeholder="开始日期"
          type="daterange"
          unlink-panels
        >
        </el-date-picker>
        <!--        <el-select v-model="chartTime" @change="handleChartTimeChange">
                  <el-option v-for="item in chartSelect" :label="item.label" :key="item.key" :value="item.key"></el-option>
                </el-select>-->
      </div>
    </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="充值排行榜">
            <template :scope="scope">
              <count-to :duration="2600" :end-val="900" :start-val="0" class="card-panel-num" prefix="￥"/>
            </template>
          </RankList>
        </el-col>

        <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
          <RankList title="提现排行榜">
            <template :scope="scope">
              <count-to :duration="2600" :end-val="900" :start-val="0" class="card-panel-num" prefix="￥"/>
            </template>
          </RankList>
        </el-col>

        <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
          <RankList :operation="operation" title="女神收入榜" @switch-change=""/>
        </el-col>

        <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
          <RankList :operation="operation" 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">{{ refreshTimeModel }}<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-count-to'
import RankList from '@/views/components/rankList'
import LineChart from '../dashboard/LineChart'
import { staticIndex } from '@/api/cai/static'

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: '' },
  { label: '月', prop: '' },
  { label: '周', prop: '' },
  { label: '日', prop: '' }
]

const pickerOptions = {
  shortcuts: [{
    text: '最近一周',
    onClick(picker) {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      picker.$emit('pick', [start, end])
    }
  }, {
    text: '最近一个月',
    onClick(picker) {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      picker.$emit('pick', [start, end])
    }
  }, {
    text: '最近三个月',
    onClick(picker) {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      picker.$emit('pick', [start, end])
    }
  }]
}

export default {
  components: {
    CountTo,
    RankList,
    LineChart
  },
  data() {
    return {
      operation,
      layoutRow: [],
      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,
      chartTime: '1',
      refreshTimeSelect,
      refreshTimeModel: '30s',
      autoRefreshSwitch: true,
      pickerOptions,
    }
  },
  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()
  },
  methods: {
    handleDatePickerChange(value) {
      console.log('----value:', value);
    },
    handleChartTimeChange(val) {
      // todo
    },
    handleDropdownClick({ label, key }) {
      this.refreshTimeModel = label
    },
    getTodayStatistics() {
      // todo fetch
      /* staticIndex().then(response => {
        const {
          todayLoginNum,
          todayLoginDiffLast,
          anchorNum,
          todayRechargeAmountNum,
          todayRechargeNum,
          todayRechargeAmountDiffLast,
          todayWithdrawAmount,
          todayWithdrawNum,
          todayWithdrawAmountDiffLast
        } = response.data
        }) */
        const {
          todayLoginNum,
          todayLoginDiffLast,
          anchorNum,
          todayRechargeAmountNum,
          todayRechargeNum,
          todayRechargeAmountDiffLast,
          todayWithdrawAmount,
          todayWithdrawNum,
          todayWithdrawAmountDiffLast
        } = {
          todayLoginNum: 100,
          todayLoginDiffLast: 8.6,
          anchorNum: 58,
          todayRechargeAmountNum: 200,
          todayRechargeNum: 10,
          todayRechargeAmountDiffLast: 5.6,
          todayWithdrawAmount: 500,
          todayWithdrawNum: 1,
          todayWithdrawAmountDiffLast: 5.9
        };
        this.loginModel.count = todayLoginNum
        this.loginModel.trendDirection = 1 // 增加还是减少
        this.loginModel.trendNum = todayLoginDiffLast

        this.topUpModel.count = anchorNum // 主播人数

        this.withdrawDepositModel.count = todayRechargeAmountNum // 充值金额
        this.withdrawDepositModel.money = todayRechargeNum
        this.withdrawDepositModel.trendNum = todayRechargeAmountDiffLast // 与昨日相比

        this.anchorModel.count = todayWithdrawAmount
        this.anchorModel.money = todayWithdrawNum
        this.anchorModel.trendNum = todayWithdrawAmountDiffLast
    }
  }
}

</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;

    .select-time {
      width: 250px;
      position: absolute;
      right: 16px;
      top: 16px;
      .el-date-editor {
        width: 100%;
      }
    }
  }

  .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>
