<!--
 * @Description:
 * @Author: 王晓颖
 * @Date:
 -->
<template>
  <div class="container">
    <gauge1
      :id="chartId"
      :width="width"
      :height="height"
      :color="color"
      :series-data="data"
    />
    <div class="land">
      <p class="landTil">{{title}}</p>
      <div class="landDetails">
        <div class="landSize">
          <span>{{totalTitle}}</span>
          <div class="size">{{data.total}}<span>{{unit}}</span></div>
        </div>
        <div class="landSize">
          <span>{{alreadyTitle}}</span>
          <div class="size" :style="{color:color}">{{data.already}}<span>{{unit}}</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Gauge1 from '@/components/gauge/gauge1'
export default {
  name: 'gaugeItem',
  components: {Gauge1},
  props: {
    chartId: {
      type: String,
      required: true
    },
    width: {
      type: Number | String,
      default: 0
    },
    height: {
      type: Number | String,
      default: 0
    },
    color: {
      type: String,
      default: 'blue'
    },
    title: {
      type: String,
      default: ''
    },
    alreadyTitle: {
      type: String,
      default: '已建面积'
    },
    totalTitle: {
      type: String,
      default: '规划面积'
    },
    data: {
      type: Object,
      default: () => {
        return {already: '34', total: '100', rate: 34}
      }
    },
    unit: {
      type: String,
      default: '亩'
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container{
  width: 0.8rem;
  .land {
    width: 100%;
    margin-top: -.04rem;
    overflow: auto;
  }
  .landTil {
    color: #00caff;
    font-size: 0.07rem;
    text-align: center;
    margin-bottom: 0.04rem;
  }
  .landSize {
    width: 50%;
    float: left;
    text-align: center;
    span {
      font-size: 0.07rem;
      color: #00a3d7;
    }
  }
  .size {
    margin-top: .02rem;
    color: #00faa8;
    font-weight:bold;
    font-size: 0.09rem;
    span {
      font-size: 0.07rem;
    }
  }
}
</style>