<template>

  <el-card class="box-card" style="margin-top: 16px;">
    <div>

      <div class="part_header layout_h_v_c">
        <div class="v_line"></div>
        <div class="header_title">统计数据</div>
        <el-date-picker type="daterange" value-format="yyyy-MM-dd HH:mm:ss" v-model="range" style="margin-left: 16px;"
          start-placeholder="开始日期" end-placeholder="结束日期" @change="onDateChange"></el-date-picker>
        <el-button type="primary" @click="indexData" style="margin-left: 16px;">搜索</el-button>
        <div class="layout_h_r weight_0_full">
          <el-radio-group v-model="statRange" @change="onRangeChange">
            <el-radio-button label="今日"></el-radio-button>
            <el-radio-button label="本月"></el-radio-button>
            <el-radio-button label="本季度"></el-radio-button>
            <el-radio-button label="本年"></el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="layout_h">
        <div class="layout_v weight_0_full">
          <div class="layout_h_b" style="padding-top: 20px;">
            <div class="number_container">
              <div class="number_name">商品数</div>
              <div class="number">{{stat.userNum}}件</div>
            </div>
            <div class="number_container">
              <div class="number_name">订单数</div>
              <div class="number">{{stat.vipNum}}件</div>
            </div>
            <div class="number_container">
              <div class="number_name">流水</div>
              <div class="number">{{stat.taskNum}}元</div>
            </div>
            <div class="number_container">
              <div class="number_name">历史体现</div>
              <div class="number">{{stat.taskNum}}元</div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </el-card>
</template>

<script>
  import {
    getIndexData
  } from '@/api/home.js'

  export default {
    data: function() {
      return {
        range: [],
        statRange: '近7天',
        stat: {

        }
      }
    },
    methods: {
      indexData() { //这个方法输给users填充数据的，但是没法直接初始化时就调用
        getIndexData({
          startTime: this.range[0],
          endTime: this.range[1]
        }).then(r => {
          this.stat = r.data.data
        }).catch(e => {

        })
      },
      onDateChange(range) {
        this.statRange = ''
        this.indexData(this.statRange)
      },
      onRangeChange(state) {
        let start = new Date()
        let end = new Date()
        if(state == '今日') {
          let mStart = new Date().format("yyyy-mm-dd").toDate()
          let mEnd = new Date()
          start = mStart
          end = mEnd
        } else if(state == '本月') {
          end.setDate(start.getMonth() - 1)
        } else if(state == '本季度') {
          end.setMonth(end.getMonth() - 3)
        } else if(state == '本年') {
          end.setFullYear(end.getFullYear() - 1)
        }
        if(state) {
          this.range = [end.format('yyyy-mm-dd'), start.format('yyyy-mm-dd')]
          this.indexData(this.statRange)
        }
      }
    },
    mounted() { //这个属性就可以，在里面声明初始化时要调用的方法即可
      this.indexData(this.statRange)
    }
  }
</script>

<style scoped>
  .header_title {
    font-weight: 700;
    font-size: 16px;
    color: #333333;
    margin-left: 16px;
  }

  .number_container {
    border: 1px #DEDEDE solid;
    border-radius: 8px;
    padding: 20px;
    margin-right: 16px;
    flex-grow: 1;
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  .number_name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
  }

  .number {
    font-weight: 700;
    font-size: 20px;
  }

  .total_number {
    margin-left: 30px;
    font-weight: 700;
    font-size: 20px;
  }

  .v_line {
    width: 5px;
    height: 20px;
    background-color: #333333;
  }

  .v_gray_line {
    width: 1px;
    background-color: #dedede;
    align-self: center;
    margin-right: 16px;
  }

  .inner_card_header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .inner_card_content {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .inner_card {
    margin-right: 16px;
    width: 0px;
    flex-grow: 1;
  }

  .inner_card_last {
    margin-right: 16px;
    width: 0px;
    flex-grow: 1;
  }

  .inner_card_number {
    font-weight: 700;
    font-size: 20px;
  }

  .inner_red {
    color: red;
  }

  .inner_green {
    color: #00FF00;
  }

  .inner_card_footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid #e6ebf5;
  }

  .inner_number {
    font-size: 16px;
    font-weight: 600;
  }
</style>
