<template>
  <div>
    <div class="panel-group el-row" style="margin-left: -20px; margin-right: -20px;">
      <div class="card-panel-col el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-lg-8"
           style="padding-left: 20px; padding-right: 20px;">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-order">
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              本月订单： {{cardData.monthOrderNum}}
            </div>
            <div class="card-panel-text">
              订单总量： {{cardData.totalOrderNum}}
            </div>
          </div>
        </div>
      </div>
      <div class="card-panel-col el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-lg-8"
           style="padding-left: 20px; padding-right: 20px;">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-card">
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              可用卡券： {{cardData.validCouponNum}}
            </div>
            <div class="card-panel-text">
              卡券总量： {{cardData.totalCouponNum}}
            </div>
          </div>
        </div>
      </div>
      <div class="card-panel-col el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-lg-8"
           style="padding-left: 20px; padding-right: 20px;">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-integral">
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              可用积分： {{cardData.validScore}}
            </div>
            <div class="card-panel-text">
              全部积分： {{cardData.totalScore}}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="table-wrap">
      <p class="table-title">消费统计</p>
      <el-table
        :data="moneyData"
        style="width: 100%;">
        <el-table-column
          prop="name"
          label="月份">
        </el-table-column>
        <el-table-column
          prop="january"
          label="1月">
        </el-table-column>
        <el-table-column
          prop="february"
          label="2月">
        </el-table-column>
        <el-table-column
          prop="march"
          label="3月">
        </el-table-column>
        <el-table-column
          prop="april"
          label="4月">
        </el-table-column>
        <el-table-column
          prop="april"
          label="5月">
        </el-table-column>
        <el-table-column
          prop="june"
          label="6月">
        </el-table-column>
        <el-table-column
          prop="july"
          label="7月">
        </el-table-column>
        <el-table-column
          prop="august"
          label="8月">
        </el-table-column>
        <el-table-column
          prop="september"
          label="9月">
        </el-table-column>
        <el-table-column
          prop="october"
          label="10月">
        </el-table-column>
        <el-table-column
          prop="november"
          label="11月">
        </el-table-column>
        <el-table-column
          prop="december"
          label="12月">
        </el-table-column>
      </el-table>
    </div>

    <div class="table-wrap">
      <p class="table-title">最新订单</p>
      <el-table
        :data="orderData"
        style="width: 100%;"
        :show-overflow-tooltip="true">
        <el-table-column
          prop="plName"
          label="停车场"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="carNumber"
          label="车牌"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="orderActFee"
          label="停车费">
          <template slot-scope="scope">
            <span>{{(scope.row.orderActFee) |fen2Yuan}} </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="parkInTime"
          label="入场时间"
          :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{(scope.row.parkInTime) |string2Date(7)}} </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="parkOutTime"
          label="出场时间"
          :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{(scope.row.parkOutTime) |string2Date(7)}} </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="parkingDuration"
          label="停车时长"
          :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{(scope.row) |parkingDurationFormatter(scope.row.parkingDuration)}} </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="berthNo"
          label="泊位编号">
        </el-table-column>
        <el-table-column
          prop="orderState"
          label="订单状态">
          <template slot-scope="scope">
            <span>{{(scope.row) |inOutStateFormatter}} </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="10"
        :pager-count="11"
        layout="prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleSizeChange"
        @prev-click="handleSizeChange"
        @next-click="handleSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import {getCustIndexBaseInfo,queryOwnerPayOutByMonth,queryOwnerParkRecord} from '@/api/index';
  import {fen2Yuan,string2Date,inOutStateFormatter,parkingDurationFormatter} from '@/filters/index';
  export default {
    name: 'Dashboard',
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data() {
      return {
        cardData: {
          totalOrderNum: 0,
          monthOrderNum: 0,
          totalCouponNum: 0,
          validCouponNum: 0,
          totalScore: 0,
          validScore: 0,
        },
        total: 15,
        currentPage: 1,
        pageSize: 10,
        moneyData: [{
          name: '消费金额',
          january: '0',
          february: '0',
          march: '0',
          april: '0',
          may: '0',
          june: '0',
          july: '0',
          august: '0',
          september: '0',
          october: '0',
          november: '0',
          december: '0'
        }],
        orderData: [],
      }
    },

    mounted: function() {
      this.getCustIndexBaseInfo();
      this.queryOwnerPayOutByMonth();
      this.queryOwnerParkRecord();
    },

    methods: {
      /**
       * 获取查询参数
       */
      getQueryParams: function() {
        let userInfo = this.$store.state.user.userInfo;
        let beginTime = new Date();
        let endTime = new Date();
        beginTime.setMonth(0);
        beginTime.setDate(1);
        endTime.setMonth(11);
        endTime.setDate(31);

        let req = {
          custId:userInfo.custId,
          //custId:'501519113641649119232',
          beginTime:beginTime,
          endTime:endTime,
        }
        return req;
      },
      /**
       * 查询首页卡片信息
       */
      getCustIndexBaseInfo: function() {
        let req = this.getQueryParams();
        getCustIndexBaseInfo(req).then(response =>{
          if(response.code=='8888'){
            let data = response.data;
            this.cardData.totalOrderNum = data.totalOrderNum == null ? 0: data.totalOrderNum;
            this.cardData.monthOrderNum = data.monthOrderNum == null ? 0: data.monthOrderNum;
            this.cardData.totalCouponNum = data.totalCouponNum == null ? 0: data.totalCouponNum;
            this.cardData.validCouponNum = data.validCouponNum == null ? 0: data.validCouponNum;
            this.cardData.totalScore = data.totalScore == null ? 0: data.totalScore;
            this.cardData.validScore = data.validScore == null ? 0: data.validScore;
          }else{
            console.log(response);
          }

        });
      },
      /**
       * 查询首页月支出信息
       */
      queryOwnerPayOutByMonth: function() {
        let req = this.getQueryParams();

        queryOwnerPayOutByMonth(req).then(response =>{
          if(response.code=='8888'){
            let data = response.data;
            this.moneyData[0].january = fen2Yuan(data[0].fee);
            this.moneyData[0]. february = fen2Yuan(data[1].fee);
            this.moneyData[0]. march = fen2Yuan(data[2].fee);
            this.moneyData[0]. april = fen2Yuan(data[3].fee);
            this.moneyData[0]. may = fen2Yuan(data[4].fee);
            this.moneyData[0]. june = fen2Yuan(data[5].fee);
            this.moneyData[0]. july = fen2Yuan(data[6].fee);
            this.moneyData[0]. august = fen2Yuan(data[7].fee);
            this.moneyData[0]. september = fen2Yuan(data[8].fee);
            this.moneyData[0]. october = fen2Yuan(data[9].fee);
            this.moneyData[0]. november =fen2Yuan( data[10].fee);
            this.moneyData[0]. december = fen2Yuan(data[11].fee);

          }else{
            console.log(response);
          }

        });
      },

      /**
       * 查询首页订单信息
       */
      queryOwnerParkRecord: function() {
        let req = this.getQueryParams();
        //查询最近三个月的
        let beginTime = new Date();
        let endTime = new Date();
        beginTime.setMonth(beginTime.getMonth() - 3);
        req.beginTime = beginTime;
        req.endTime = endTime;
        req.baseRequest={
            pageNum:this.currentPage,
            pageSize:this.pageSize,
        },
        queryOwnerParkRecord (req).then(response =>{
          if(response.code=='8888'){
              this.orderData = response.data.dataList;
              this.total = response.data.pageTotals;
          }else{
            console.log(response);
          }

        });
      },
      // 获取子组件页码方法
      handleSizeChange: function(page) {
        console.log(page)
        this.currentPage = page;
        /** 调用表格数据.*/
        this.queryOwnerParkRecord();

      },


    },

  }
</script>

<style lang="scss" scoped>
  .panel-group .card-panel {
    height: 108px;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    -webkit-box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);
  }

  .card-panel-icon-wrapper {
    float: left;
    margin: 26px 0 0 15px;
    padding: 16px;
    -webkit-transition: all .38s ease-out;
    transition: all .38s ease-out;
    border-radius: 6px;
    background: #f0f;
    width: 60px;
    height: 60px;

  }

  .card-panel-description {
    float: right;
    font-weight: 700;
    margin: 26px;
    margin-left: 0;
  }

  .card-panel-text {
    line-height: 18px;
    color: rgba(0, 0, 0, .45);
    font-size: 16px;
    margin-bottom: 20px;
  }

  .card-panel-num {
    font-size: 20px;
  }

  .icon-order{
    background: url("../../assets/dashboard_images/order.png") no-repeat;
  }
  .icon-card{
    background: url("../../assets/dashboard_images/card.png") no-repeat;
  }
  .icon-integral{
    background: url("../../assets/dashboard_images/integral.png") no-repeat;
  }

</style>
