<template>
  <div class="echarts-content">
    <div class="title">
      <slot name="title"></slot>
    </div>
    <div class="content">
      <div class="pei-echarts">
        <pie-echart
          :title="title"
          :option-data="opData1"
          :show-legend="false"
          :center="['50%', '50%']"
          :show-tips="true"
          :show-graphic="true"
          :color="['black', 'orange']"
          :echart-type="1"
        />
        <slot name="echarts1"></slot>
      </div>
      <div class="pei-echarts">
        <pie-echart
          :title="title"
          :option-data="opData2"
          :show-legend="false"
          :center="['50%', '50%']"
          :show-tips="true"
          :show-graphic="true"
          :color="['orange', '#cccccc']"
          :echart-type="2"
        />
        <slot name="echarts2"></slot>
      </div>
    </div>
  </div>
</template>

<script>
import PieEchart from './pie-echart.vue'

export default {
  name: 'PieDubEcharts',
  components: {
    PieEchart
  },
  props: {
    title: {
      type: String,
      default: () => '机构活跃统计'
    },
    optionData1: {
      type: Object,
      default: () => ({})
    },
    optionData2: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      opData1: {},
      opData2: {}
    }
  },
  watch: {
    optionData1: {
      handler(val) {
        this.opData1 = val
      },
      deep: true,
      immediate: true
    },
    optionData2: {
      handler(val) {
        this.opData2 = val
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.echarts-content {
  width: 100%;
  height: 300px;
  border-radius: 12px;
  border: 1px solid #ccc;
  box-shadow: 0 0 4px #ccc;
  overflow: hidden;
  padding: 10px;
  .title {
    display: flex;
    align-items: center;
  }
  .content {
    display: grid;
    width: 100%;
    height: calc(300px - 24px);
    grid-template-columns: repeat(2, 1fr);
    .pei-echarts {
      width: 100%;
      height: 200px;
    }
  }
}
</style>
