<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">
      <report-doughnut v-if="renderData.needCountO || renderData.needCountT" type="type" width="200" height="200" :sum="renderData.sum"
        :name="renderData.title" :renderData="echartsData" :id="id" :text="renderData.text">
      </report-doughnut>
    </div>
    <slot></slot>
  </div>
</template>

<script>
import reportDoughnut from "@/components/echarts/reportDoughnut"
export default {
  name: "dataOrgin",
  components: {
    reportDoughnut
  },
  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 {

        }
      }
    }
  },
  data() {
    return {
      echartsData: []
    }
  },
  created() {
    this.changeData()
  },
  mounted() { },
  methods: {
    changeData() {
      this.echartsData = [
        {
          name: this.renderData.contentValueO + this.renderData.needCountO,
          value: this.renderData.needCountO
        },
        {
          name: this.renderData.contentValueT + this.renderData.needCountT,
          value: this.renderData.needCountT
        },
      ]
    }
  },
  watch: {
    renderData: {
      deep: true,
      handler: function () {
        this.changeData()
      }
    }
  }
}
</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>