<template>
  <div class="saga-fill">
    <div class="mess-view">
      <el-tooltip class="item" effect="dark" :content="renderData.tips" placement="bottom-start">
        <i class="el-icon-info"><span>{{renderData.title}}</span></i>
      </el-tooltip>
    </div>
    <div class="doughnut-view">
      <fan-chart v-if="renderData.needCountO" type="type" width="200" height="200" :name="renderData.title" :renderData="echartsData" :id="id">
      </fan-chart>
    </div>
    <slot></slot>
  </div>
</template>

<script>
import fanChart from "@/components/echarts/fanChart"
export default {
  data() {
    return {
      echartsData: [],
      color: ["#AB7948", "#CAA679", "#DEC9A8", "#B3CFC4", "#7DAAA7", "#7484A6", "#9DABCB"]
    }
  },
  created() {
    this.echartsData = this.renderData.needCountO;
    // this.echartsData.forEach((item, index) => {
    //   item.itemStyle = {
    //     color: this.color[index]
    //   }
    // })
  },
  components: {
    fanChart
  },
  methods: {
  },
  props: {
    id: {
      type: String,
      default: function createRandomId() {
        return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5);
      }
    },
    renderData: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
}
</script>

<style lang="less" scoped>
.mess-view {
  box-sizing: border-box;
  border-bottom: 1px solid #ddd;
  padding: 10px 20px 10px 15px;
  .saga-title {
    font-size: 14px;
    color: #333;
    font-weight: 600;
    line-height: 14px;
  }
  i {
    span {
      padding-left: 6px;
    }
  }
}
.saga-fill {
  width: 345px;
  // height: 220px;
  .doughnut-view {
    height: 165px;
    width: 100%;
    padding: 0 5px;
    box-sizing: border-box;
  }
}
</style>