<template>
  <div :class="filterClass ? 'saga-fill reset-fill':'saga-fill'">
    <div class="mess-view">
      <el-tooltip class="item" effect="dark" :content="renderData.tips" placement="bottom-start">
        <i :class="renderData.title ? '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>
    <p style="text-align: center">{{renderData.val}}</p>
    <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 {}
        }
      },
      filterClass: String
    },
    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;
    }
  }
  .reset-fill{
    background: #fff;
    width: 353px;

  }
</style>