<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">
              本月订单： 21
            </div>
            <div class="card-panel-text">
              订单总量： 1231
            </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">
              可用卡券： 101
            </div>
            <div class="card-panel-text">
              卡券总量： 332
            </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">
              可用积分： 21
            </div>
            <div class="card-panel-text">
              全部积分： 231
            </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="parkName"
          label="停车场"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="license"
          label="车牌"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="money"
          label="停车费">
        </el-table-column>
        <el-table-column
          prop="inTime"
          label="入场时间"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="outTime"
          label="出场时间"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="duration"
          label="停车时长"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="berthNum"
          label="泊位编号">
        </el-table-column>
        <el-table-column
          prop="status"
          label="订单状态">
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="10"
        :pager-count="11"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      total: 15,
      currentPage: 1,
      pageSize: 10,
      moneyData: [{
        name: '消费金额',
        january: '123411',
        february: '9787162',
        march: '123097',
        april: '82713',
        may: '1239789',
        june: '81273',
        july: '129387',
        august: '1298778',
        september: '1239878',
        october: '76765',
        november: '123124',
        december: '12341'
      }],
      orderData: [
        {
          parkName: '承德老二中停车场',
          license: '冀H7517732',
          money: '31',
          inTime: '2019-06-02 00:00:00',
          outTime: '2019-06-01 08:00:00',
          duration: '2小时28分钟43秒',
          berthNum: 'A1212231',
          status: '完成'
        },
        {
          parkName: '承德老二中停车场',
          license: '冀H7517732',
          money: '31',
          inTime: '2019-06-02 00:00:00',
          outTime: '2019-06-01 08:00:00',
          duration: '2小时28分钟43秒',
          berthNum: 'A1212231',
          status: '完成'
        },
        {
          parkName: '承德老二中停车场',
          license: '冀H7517732',
          money: '31',
          inTime: '2019-06-02 00:00:00',
          outTime: '2019-06-01 08:00:00',
          duration: '2小时28分钟43秒',
          berthNum: 'A1212231',
          status: '完成'
        },
        {
          parkName: '承德老二中停车场',
          license: '冀H7517732',
          money: '31',
          inTime: '2019-06-02 00:00:00',
          outTime: '2019-06-01 08:00:00',
          duration: '2小时28分钟43秒',
          berthNum: 'A1212231',
          status: '完成'
        },
        {
          parkName: '承德老二中停车场',
          license: '冀H7517732',
          money: '31',
          inTime: '2019-06-02 00:00:00',
          outTime: '2019-06-01 08:00:00',
          duration: '2小时28分钟43秒',
          berthNum: 'A1212231',
          status: '完成'
        },
        {
          parkName: '承德老二中停车场',
          license: '冀H7517732',
          money: '31',
          inTime: '2019-06-02 00:00:00',
          outTime: '2019-06-01 08:00:00',
          duration: '2小时28分钟43秒',
          berthNum: 'A1212231',
          status: '完成'
        },
        {
          parkName: '承德老二中停车场',
          license: '冀H7517732',
          money: '31',
          inTime: '2019-06-02 00:00:00',
          outTime: '2019-06-01 08:00:00',
          duration: '2小时28分钟43秒',
          berthNum: 'A1212231',
          status: '完成'
        },
      ]
    }
  }
}
</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>
