<template>
    <van-row class="recordList" >
      <van-row class="titleWrap">
        <span class="line"></span>
        <span class="title">停车位</span>
      </van-row>
      <van-row class="type2">
        <!-- <pie /> -->
        <van-row class="parking">
          <van-col class="num">{{list.churu}}<span> 辆/次</span></van-col>
          <van-col class="name">今日出入车辆</van-col>
        </van-row>
        <van-row class="data">
          <van-row>
            <van-col span="16">车位总数：</van-col>
            <van-col span="8" class="color2">{{list.zongshu}}个</van-col>
          </van-row>
          <van-row>
            <van-col span="16">已停车位：</van-col>
            <van-col span="8" class="color3">{{list.zongshu - list.shengyu}}个</van-col>
          </van-row>
          <van-row>
            <van-col span="16">剩余车位：</van-col>
            <van-col span="8" class="color4">{{list.shengyu}}个</van-col>
          </van-row>
        </van-row>
      </van-row>
    </van-row>
</template>
<script>
import axios from 'axios'
import pie from "@/components/record/parking/pie";
import * as echarts from "echarts";
export default {
  components: {
  	pie,
  },
  props:["resInfo"],
  data() {
    return {
      data:{
        roomInUse: undefined,
        attendeeIsSign: undefined,
        attendeeTotal: undefined,
        roomTotal: undefined,
        data:{}
      },
      list:{}
    };
  },
  watch:{
    resInfo(val,old){
      this.list = val
    }
  },
  mounted() {
    // this.getData()
  },
  methods: {
    init(){
      // axios({
      //   method: 'get',
      //   url: 'https://smartpark.caih.com/hyxt/api/thirdparty/meetingRoom/summary',
      //   timeout: 3000,
      // }).then(res =>{
      //   if(res.data){
      //     this.data = res.data
      //   }
      // }).catch(err =>{
      // })
    },
    
  },
};
</script>
<style lang="scss" scopet>
.type2{
  margin-top:15x !important;
  font-size: 14px;
  .data{
    width:40%;
    margin-left:20px;
    margin-top:0px !important;
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    color:#000;
    float:right;
    .van-row{
      margin-top:10px;
      border:1px solid #F0F0F0;
      .van-col{
        padding:10px  5px !important;
        box-sizing: border-box;
      }
      .van-col:nth-child(1){
        text-align: right !important;
      }
      .van-col:nth-child(2){
        text-align: left !important;
      }
      
    }
  }
}
.parking {
  width: 30%;
  text-align: center;
  float:left;
  .num {
    font-size: 30px;
    font-weight: 700;
    width: 100%;
    text-align: center;
    margin-top: 30px;
    margin-left: 14px;
    background: linear-gradient(180deg, #f4f8ff 0%, #a3b3cc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    span{
      font-size: 14px;
    }
  }
  .name {
    font-size: 14px;
    margin: 15px 12px 0;
    width: 100%;
    color:#000;
  }
}

</style>
