<template>
    <div class="theme-wrap">
        <card-title> <span>泊位消息</span></card-title>
        <div class="theme-body">
            <account-num :totalnum="total">
                <span>总计</span>
            </account-num>
            <ul class="income-echart">
               <li>
                   <pie-echart :chart-data="pieChartData"></pie-echart>
               </li>
               <li class="berth-inf">
                   <p><span class="free-berth">{{pieChartData.yData[0]|filterTotal}}</span><span>空余</span></p>
                   <p><span class="buss-berth">{{pieChartData.yData[1]|filterTotal}}</span><span>占有</span></p>
               </li>
            </ul>
        </div>
    </div>
</template>

<script>
import CardTitle from './base/CardTitle'
import AccountNum from './base/AccountNum'
import PieEchart from './base/PieEchart'
export default {
  name: 'VBerth',
  components: {
    CardTitle,
    AccountNum,
    PieEchart
  },
  props:['total','pieChartData'],
  data() {
    return {
      // pieChartData: {
      //   yData: [1,1],
      //   legendData: ['空余','占有']
      // },
    }
  },
  mounted(){
    //this.drawBar();
  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
    .theme-wrap {
        height: 100%;
    }
    .theme-body {
        height: calc(100% - 30px);
        margin-left: 20px;
    }
    .income-echart{
        height: 70%;
        display: flex;
        >li{
            flex: 1;
        }
        .berth-inf{
            p{
                height: 50%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-right: 20px;
            }
            .free-berth{
                @include fontStyle(24px);
                background-image: $fontBlue;
            }
            .buss-berth{
                @include fontStyle(24px);
                background-image: $fontOrange;
            }
        }
    }

</style>
