<template>
  <div>
    <titlesection title="泊位"></titlesection>
    <totalsection :totalNum="totalVal"></totalsection>
    <ul class="flexfm berth-wrap">
      <li class="pos-rel">
        <halfPieChart></halfPieChart>
        <div class="pos-abs halfPieText">
          <p>78%</p>
          <p>占有</p>
        </div>
      </li>
      <li>
        <div class="berth-main">
          <p><span class="free">{{ free|formatNum }}</span> <span>空余</span></p>
        </div>
        <div class="berth-main">
          <p><span class="nofree">{{ nofree|formatNum }}</span> <span>占有</span></p>
        </div>

      </li>
    </ul>
  </div>
</template>

<script>
import titlesection from '../components/titlesection'
import totalsection from '../components/total'
import halfPieChart from '../components/halfPieChart'
import {fetchList} from '../api/api'

export default {
  name: 'berthsection',
  components: {
    titlesection,
    totalsection,
    halfPieChart
  },
  data() {
    return {
      totalVal: '21973',
      free: '454123',
      nofree: '5125'
    }
  },
  created() {
  },
  methods: {
    getList() {
      fetchList()
      .then(res => {
        console.log(res);

      });
    },
  }
}
</script>

<style lang="scss"  scoped>
  .berth-wrap {
    display: flex;
    li{
      flex: 1;
      .halfPieText{
        width: 100%;
        text-align: center;
        top:50%;
        transform:translateY(-50%) ;
        p{
          &:nth-of-type(1){
            @include fonttextStyle(24px);
            background-image: $fontOrange;
          }
          &:nth-of-type(2){
            padding-top: 5px;
           font-size: 12px;
            color: #fff;
          }
        }
      }
      .berth-main{
        height: 50%;
        display: flex;
        align-items:center;
        p{
          height: 24px;
          color: #fff;
          font-size: 12px;
          .free{
            @include fonttextStyle(24px);
            background-image: $fontBlue;
          }
          .nofree{
            @include fonttextStyle(24px);
            background-image: $fontOrange;
          }
          span:nth-of-type(1){
            width: 100px;
            display: inline-block;
          }
        }
      }
    }
  }
</style>
