<template>
  <div class="page-container">
    <header-container></header-container>
    <div class="page-wid94 d5cA-ten">

      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <div class="d5cA-ten__pane">
            <h3>每日积分</h3>
          </div>
        </el-col>

        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <div class="d5cA-ten__pane">
            <div class="d5cA-ten__select">
              <span>选择时间</span>
              <el-date-picker class="d5cA-ten__seldate" v-model="seletDay" :type="dateType" placeholder="选择日期"></el-date-picker>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <div class="d5cA-ten__count">
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <div class="d5cA-ten__count1">
              <span class="d5cA-ten__text">总积分</span>
              <count-to class="d5cA-ten__count2" :startVal="0" :endVal="listcount.total" :duration="3000" :decimals="0"></count-to>
            </div>
          </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <div class="d5cA-ten__count1">
                <span class="d5cA-ten__text">前十名总积分</span>
                <count-to class="d5cA-ten__count2" :startVal="0" :endVal="listcount.top_10_total" :duration="3000" :decimals="0"></count-to>
              </div>
          </el-col>
        </div>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <div class="d5cA-ten__pane" style="padding-bottom: 0;">
            <ten-chart :signinChart="dayData"></ten-chart>
          </div>
        </el-col>
        </el-col>

        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <!-- <div class="d5cA-ten__table1">
             <el-table :data="the_list" max-height="690" style="width: 100%">
               <el-table-column prop="product_id" label="排名">
               </el-table-column>
               <el-table-column prop="name" label="昵称">
               </el-table-column>
               <el-table-column prop="count" label="积分总数">
               </el-table-column>
             </el-table>
          </div> -->
          <div class="d5cA-ten__pane d5cA-ten__pad" style="height:330px;overflow-y:scroll;margin-bottom:20px">
            <table class="d5cA-ten__table" border="0">
              <thead>
                <tr>
                  <td>排名</td>
                  <td>微信id</td>
                  <td>用户id</td>
                  <td>昵称</td>
                  <td>总积分</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in totallist.list" :class="curIndex === index? 'active': ''" @click="curKf(index)" v-if="totallist.list">
                  <td>{{item.rank}}</td>
                  <td>{{item.wx_user_id}}</td>
                  <td>{{item.user_id}}</td>
                  <td>{{item.nickname}}</td>
                  <td>{{item.count}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-col>

        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" style="position: relative;" v-if="this.ashow">
          <ten-circle-chart :circleChart="circllist"></ten-circle-chart>
          <div class="r-sum">真实投资订单总额：{{this.paied_price_format}}</div>
          <div class="r-count">真实投资项目总数：{{this.project_count_format}}</div>
        </el-col>
      </el-row>


    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import CountTo from 'vue-count-to'
import HeaderContainer from '@/components/HeaderContainer'
import TenChart from './components/TenChart'
import TenCircleChart from './components/TenCircleChart'
export default {
  name: 'ten',
  components: {
    CountTo,
    HeaderContainer,
    TenChart,
    TenCircleChart
  },
  data() {
    return {
      seletDay: new Date(),
      dayData: {},
      dateType: 'date',
      curIndex: 0,
      listcount: {},
      totallist: {},
      cid: '',
      circllist: {},
      paied_price_format: '',
      project_count_format: '',
      ashow: true
    }
  },
  computed: {
    formatTime() {
      const yy = this.seletDay.getFullYear()
      let mm = this.seletDay.getMonth() + 1
      let dd = this.seletDay.getDate()
      if (mm <= 9) {
        mm = '0' + mm
      }
      if (dd <= 9) {
        dd = '0' + dd
      }
      return yy + '-' + mm + '-' + dd
    }
  },
  methods: {
    gettenData() {
      request({
        url: '/v1/pm_balance/all/source/distribution',
        methods: 'get',
        params: {
          query_date: this.formatTime
        }
      }).then(response => {
        this.dayData = response.data
      }).catch(error => {
        console.log(error)
      })
    },
    curKf(n) {
      this.curIndex = n
      this.cid = this.totallist.list[n].user_id
      this.getcircle()
    },
    gettotal() {
      request({
        url: '/v1/pm_balance/all/stat',
        methods: 'get',
        params: {
          query_date: this.formatTime
        }
      }).then(response => {
        this.listcount = response.data
      }).catch(error => {
        console.log(error)
      })
    },
    gettotallist() {
      request({
        url: '/v1/pm_balance/user/top/list',
        methods: 'get',
        params: {
          query_date: this.formatTime
        }
      }).then(response => {
        this.totallist = response.data
      })
    },
    getcircle() {
      request({
        url: '/v1/pm_balance/user/source/distribution',
        methods: 'get',
        params: {
          query_date: this.formatTime,
          user_id: this.cid
        }
      }).then(response => {
        this.circllist = response.data
      })
    }
  },
  created() {
    this.gettenData()
    this.gettotal()
    this.gettotallist()
  },
  destroyed() {
  },
  watch: {
    'seletDay': function() {
      this.gettenData()
      this.gettotal()
      this.gettotallist()
      // if (this.totallist.list) {
      //   this.getcircle()
      // }
    },
    'totallist': function(val) {
      console.log(val)
      if (val.list) {
        // for (let i = 0; i < val.list.length; i++) {
        //   this.cid = val.list[0].user_id
        // }
        this.cid = val.list[0].user_id
        this.getcircle()
        this.ashow = true
      }
      if (!val.list) {
        this.ashow = false
      }
    },
    'circllist': function(val) {
      if (val) {
        this.paied_price_format = val.invest_info.paied_price_format
        this.project_count_format = val.invest_info.project_count_format
      }
    }
  }
}
</script>

<style lang="scss">
.d5cA {
  &-ten {
    padding: 0 20px 20px;
  }
  &-ten__pane {
    width: 100%;
    background-color: #344355;
    padding: 20px;
    margin-top: 20px;
    box-sizing: border-box;
    h3 {
      font-size: 24px;
      color: #808fa1;
      text-align: center;
      height: 40px;
      line-height: 40px;
    }
  }
  &-ten__select {
    position: relative;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    span {
      position: absolute;
      color: #808fa1;
      line-height: 40px;
    }
  }
  &-ten__seldate {
    width: 220px;
    display: block;
    margin: 0 auto;
    .el-input__inner {
      background-color: #344355;
      border: 1px solid #344355;
      font-size: 24px;
      color: #fff;
    }
  }
  &-ten__count1{
    height: 126px;
    width: 100%;
    background-color: #344456;
    color: #768698;
    box-sizing: border-box;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
  }
  &-ten__count2{
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
  }
  &-ten__text{
    position: absolute;
    top: 20px;
    left: 20px;
  }
  // &-ten__table1{
  //   margin-top: 20px;
  //   width: 100%;
  //   background-color: #344355;
  //   // padding: 2px 20px;
  //   padding-top: 2px;
  //   box-sizing: border-box;
  //   .el-table thead tr {
  //     background-color: #3c4f66;
  //     color: #758899;
  //   }
  //   .el-table tbody tr {
  //     background-color: #344355;
  //     color: #808fa1;
  //     border-bottom: 1px solid #223040;
  //   }
  //   .el-table td, .el-table th.is-leaf {
  //     border-bottom: 1px solid #223040;
  //   }
  //   .el-table--border::after, .el-table--group::after, .el-table::before, .el-table__fixed::before {
  //     border-bottom: 1px solid #223040;
  //   }
  //   .el-table .hover-row {
  //       background-color: #3c4f66;
  //   }
  // }
  &-ten__pad {
    padding: 20px;
  }
  &-ten__pane {
    width: 100%;
    background-color: #344355;
    box-sizing: border-box;
    margin-top: 20px;
    // height: 200px;
  }
  &-ten__table {
    // height: 10%;
    width: 100%;
    border-collapse: collapse;
    thead {
      width: 100%;
      color: #808fa1;
      font-size: 14px;
      background-color: #3c4f66;

      tr {
        line-height: 28px;
        text-align: center;
      }
      td {
        height: 28px;
        border-right: 1px solid #344355;
      }
      td:last-child{
        border-right: none;
      }
    }
    tbody {
      width: 100%;
      height: 40px;
      color: #fff;
      font-size: 14px;
      background-color: #344355;
      .active {
        background: #303e4f;
        border-left: 3px solid #00a8ff;
        box-sizing: border-box;
      }
      tr {
        line-height: 50px;
        text-align: center;
        border-bottom: 1px solid #223040;
      }
      td:last-child {
        color: #16d5ff;
      }
    }
    td {
      width: 12%;
    }
  }
}
.r-sum {
  color: #fff;
  font-size: 16px;
  position: absolute;
  left: 570px;
  top: 20px;
}
.r-count {
  color: #fff;
  font-size: 16px;
  position: absolute;
  left: 570px;
  top: 40px;
}
</style>
