<template>
  <div class="inerank-container">
    <div :style="{height:'100%',width:'100%'}" style="text-align:center" ref="myLineRank"></div>
    <div class="title" v-if="rank==-1">{{$t('salesModule.ShouKe')}}{{this.count}}{{$t('hotel.hotel_people')}}</div>
    <div class="h-title" :style="{color:color}" v-else>
      <span class="blod">{{$t('objFill.v101.tuanduipmin')}} {{rank==0?$t('objFill.v101.Rest.weishangban'):"NO."+rank}}</span>
      收客{{this.count}}{{$t('hotel.hotel_people')}}
    </div>
  </div>
</template>
<script>
export default {
  props: {
    percent: {
      type: Number,
      default: 0
    },
    item: {
      type: String,
      default: ""
    },
    count: {
      type: Number,
      default: 0
    },
    color: {
      type: String,
      default: "#46C3F1"
    },
    rank: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      center: ["50%", "35%"],
      pos:"16%",
      radius:["75%", "85%"]
    };
  },
  mounted() {
    if (this.rank != -1) {
        this.center = ["50%", "35%"];
        this.pos ='40%';
    }else{
      this.radius=["85%", "95%"];
    }
    this.init();
  },
  methods: {
    init() {
      let myChart = this.$echarts.init(this.$refs.myLineRank);

      let option = {
        grid: {
          top: 5,
          bottom: 5
        },
        graphic: [
          {
            type: "text",
            left:'center',
            top: "25%",
            style: {
              text: this.percent + "%",
              textAlign: "center",
              fill: "#FFF", //文字的颜色
              fontSize: 20,
              width: 120,
              fontFamily: "pingfangR"
            }
          },
          {
            type: "text",
            left:'center',
            top: "43%",
            style: {
              text: this.item,
              textAlign: "center",
              fill: this.color, //文字的颜色
              fontSize: 14,
              fontFamily: "pingfangR"
            }
          }
        ],
        // color: colors,
        series: [
          {
            name: "valueOfMarket",
            type: "pie",
            center: this.center,
            radius: this.radius,
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: "#019CFF1a"
              }
            },
            data: [
              {
                value: this.percent,
                name: this.item,
                label: {
                  normal: {
                    show: false
                  }
                },
                itemStyle: {
                  normal: {
                    color: this.color
                  }
                }
              },
              {
                value: 100 - this.percent,
                name: "",
                label: {
                  normal: {
                    show: false
                  }
                },
                color: "#019CFF1a"
              }
            ]
          }
        ]
      };

      myChart.setOption(option);
    }
  }
};
</script>
<style>
.inerank-container {
  height: 100%;
  width: 100px;
  position: relative;
}
.inerank-container .title {
  position: absolute;
  left: 0%;
  bottom: 15px;
  font-size: 12px;
  color: #46c3f1;
  text-align: left;
  width: 100%;
  padding-left: 26px;
}
.inerank-container .h-title {
  position: absolute;
  left: 0%;
  bottom: 10px;
  font-size: 12px;
  color: #46c3f1;
  text-align: center;
  width: 100%;
}
.inerank-container .h-title .blod {
  color: #facc37;
  font-size: 14px;
  font-family: pingfangR;
  display: block;
  margin-bottom: 3px;
}
</style>