<template>
  <div v-loading="listLoading" class="dashboard-editor-container">
    <el-row :gutter="22" style="min-height: calc(100vh - 84px);">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div class="chart-title">
            <span>收款金额(元)</span>
            <div style="float: right;">
              <el-date-picker
                v-model="Receivable.startTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                style="width: 150px;"
              />
              至
              <el-date-picker
                v-model="Receivable.endTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                style="width: 150px;"
                @blur="handleGetReceivable"
              />
            </div>
          </div>
          <div class="chartText">
            <p>应收金额</p>
            <p class="money">¥{{ payTotalFee | toThousandFloatFilter }}</p>
          </div>
          <raddar-chart v-if="isRequest" :receivab="ReceivableData" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div class="chart-title">
            <span>订单数量(个)</span>
            <div style="float: right;">
              <el-date-picker
                v-model="Order.startTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                style="width: 150px;"
              />
              至
              <el-date-picker
                v-model="Order.endTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                style="width: 150px;"
                @blur="handleGetHomepageOrder"
              />
            </div>
          </div>
          <div class="chartText">
            <p>全部订单</p>
            <p class="money">{{ count }}个</p>
          </div>
          <pie-chart v-if="isOrderRequest" :order-data="OrderData" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div class="chart-title">
            <span>销售额趋势</span>
          </div>
          <bar-chart v-if="isSaleRequest" :paytotalfee-data="payTotalFeeData" :month-data="monthData" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div class="chart-title">
            <span>热销商品</span>
            <div style="float: right;">
              <el-date-picker
                v-model="Commodity.startTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                style="width: 150px;"
              />
              至
              <el-date-picker
                v-model="Commodity.endTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                style="width: 150px;"
                @blur="handleGetHomepageCommodity"
              />
            </div>
          </div>
          <hot-goods v-if="isGoodRequest" :goodslist-data="goodsList" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import RaddarChart from './components/RaddarChart'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'
import HotGoods from './components/HotGoods'
import { getReceivable, getHomepageOrder, getHomepageSale, getHomepageCommodity } from '@/api/home'
export default {
  name: 'Admin',
  components: {
    RaddarChart,
    PieChart,
    BarChart,
    HotGoods
  },
  data() {
    return {
      listLoading: true,
      isRequest: false,
      isOrderRequest: false,
      isSaleRequest: false,
      isGoodRequest: false,
      ReceivableData: [],
      OrderData: [],
      payTotalFeeData: [],
      monthData: [],
      goodsList: [],
      Receivable: {
        startTime: this.getCurrentMonthFirst(),
        endTime: this.getCurrentMonthLast(),
        organizeId: this.$store.getters.organizeId
      },
      Order: {
        startTime: this.getCurrentMonthFirst(),
        endTime: this.getCurrentMonthLast(),
        organizeId: this.$store.getters.organizeId
      },
      Commodity: {
        startTime: this.getCurrentMonthFirst(),
        endTime: this.getCurrentMonthLast(),
        organizeId: this.$store.getters.organizeId
      },
      count: 0,
      payTotalFee: ''
    }
  },
  computed: {
    organizeId() {
      return this.$store.getters.organizeId
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      this.handleGetReceivable()
      this.handleGetHomepageOrder()
      this.handleGetHomepageSale()
      this.handleGetHomepageCommodity()
      setTimeout(function() {
        this.listLoading = false
      }, 5000)
    },
    handleGetReceivable() {
      getReceivable(this.Receivable).then(response => {
        this.isRequest = true
        this.payTotalFee = response.data.payTotalFee
        const receob = { name: '已收金额', value: response.data.amountReceived }
        const receob1 = { name: '未收金额', value: response.data.uncollected }
        this.ReceivableData = [receob, receob1]
        this.listLoading = false
      })
    },
    handleGetHomepageOrder() {
      getHomepageOrder(this.Order).then(response => {
        this.isOrderRequest = true
        this.count = response.data.count
        const order = { name: '已收款订单', value: response.data.received }
        const order1 = { name: '未收款订单', value: response.data.uncollected }
        const order2 = { name: '部分收款订单', value: response.data.portion }
        this.OrderData = [order, order1, order2]
        this.listLoading = false
      })
    },
    handleGetHomepageSale() {
      getHomepageSale({ organizeId: this.$store.getters.organizeId }).then(response => {
        this.isSaleRequest = true
        this.monthData = response.data.month
        this.payTotalFeeData = response.data.payTotalFee
        this.listLoading = false
      })
    },
    handleGetHomepageCommodity() {
      getHomepageCommodity(this.Commodity).then(response => {
        this.isGoodRequest = true
        this.goodsList = response.data
        this.listLoading = false
      })
    },
    numFormat(num) {
      var c = (num.toString().indexOf('.') !== -1) ? num.toLocaleString() : num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
      return c
    },
    getCurrentMonthFirst() {
      var date = new Date()
      date.setDate(1)
      var month = parseInt(date.getMonth() + 1)
      var day = date.getDate()
      if (month < 10) {
        month = '0' + month
      }
      if (day < 10) {
        day = '0' + day
      }
      const startTime = date.getFullYear() + '-' + month + '-' + day
      return startTime
    },
    getCurrentMonthLast() {
      var date = new Date()
      var currentMonth = date.getMonth()
      var nextMonth = ++currentMonth
      var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1)
      var oneDay = 1000 * 60 * 60 * 24
      var lastTime = new Date(nextMonthFirstDay - oneDay)
      var month = parseInt(lastTime.getMonth() + 1)
      var day = lastTime.getDate()
      if (month < 10) {
        month = '0' + month
      }
      if (day < 10) {
        day = '0' + day
      }
      return date.getFullYear() + '-' + month + '-' + day
    }
  }
}
</script>

<style lang="scss" scoped >
.dashboard-editor-container {
  padding: 22px;
  min-height: calc(100vh - 84px);
  position: relative;
  .chart-wrapper {
    background: #fff;
    padding: 3px 16px 0;
    margin-bottom: 22px;
    height: 475px;
    border-radius: 10px;
    position: relative;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.12), 0 0 3px 0 rgba(0,0,0,0.04);
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.12), 0 0 3px 0 rgba(0,0,0,0.04);
    .chartText{
      width: 130px;
      height: 140px;
      padding-top:30px;
      font-weight: bold;
      font-size: 18px;
      color:#98A0A7;
      text-align: center;
      position: absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      margin:auto;
      .money{
        color:#000000;
      }
    }
    .chart-title{
      height: 48px;
      line-height: 48px;
      border-bottom: 1px solid #dfe6ec;
      span{
        text-align: left;
        font-size: 14px;
        font-weight: bold;
        color: #000000;
      }
    }
  }
}

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