<template>
  <div>
    <titlesection title="泊位"></titlesection>
    <totalsection :totalNum="totalVal"></totalsection>
    <ul class="flexfm berth-wrap">
      <li></li>
      <li>
        <div>
          <p><span class="free">{{ free|formatNum }}</span> <span>空余</span></p>
        </div>
        <div>
          <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 { formatNum } from '../filters/filters'
import {fetchList} from '../api/api'

export default {
  name: 'berthsection',
  components: {
    titlesection,
    totalsection
  },
  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;
      div{
        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>
