<!--  -->
<template>
  <div class="echart-box">
    <div class="echart-con">
      <!-- 盒子外部的左上角的标题 -->
      <div class="title-out" v-if="outTitle !== ''">
        <span>{{ outTitle }}</span>
      </div>
      <div class="echart-main" :style="{ border: border ? `1px solid #8dc21f` : 'none' }">
        <!-- legend -->
        <div class="legend">
          <div class="left">
            <span>{{ legend.title }}</span>
          </div>
          <div class="right">
            <div class="list">
              <div class="item" v-for="(item, index) in legend.list" :key="index">
                <div
                  class="shape"
                  :style="{
                    backgroundColor: item.color,
                    borderRadius: '50%'
                  }"
                ></div>
                <div class="text">
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- echart盒子内容 -->
        <div class="echart">
          <div :id="echartId" :style="{ height: height + 'px', minHeight: '200px' }"></div>
          <!--echart自定义底部  -->
          <slot name="custom-bot"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EchartBox',
  props: {
    height: {
      type: String,
      default: '300'
    },
    width: {
      type: String,
      default: ''
    },
    outTitle: {
      type: String,
      default: ''
    },
    legend: {
      type: Object,
      default: () => ({
        title: '',
        list: []
      })
    },
    echartId: {
      type: String,
      required: true,
      default: ''
    },
    options: {
      type: Object,
      default: () => {}
    },
    border: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      echart: null
    };
  },
  watch: {
    options() {
      this.$nextTick(() => {
        this.initEchart();
      });
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.initEchart();
  },
  beforeDestroy() {
    this.disposeChart();
  },
  methods: {
    // 初始化echart
    initEchart() {
      if (this.echart != null && this.echart != '' && this.echart != undefined) {
        this.echart.dispose();
      }
      if (this.echartId) {
        this.echart = this.$echarts.init(document.getElementById(this.echartId));
        this.echart.setOption(this.options);
      }
    },
    // 销毁echart
    disposeChart() {
      if (this.echart) {
        this.echart.dispose();
        this.echart = null;
      }
    }
  }
};
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.echart-box {
  position: relative;
  height: 100%;
  width: 100%;
  margin: 20px 0;
  .echart-con {
    position: relative;
    padding: 20px 0;
    .title-out {
      font-size: 36px;
      font-weight: bold;
      padding: 20px;
    }

    .echart-main {
      position: relative;
      /* border: 1px solid $com_light_green; */
      border-radius: 30px;
      padding: 20px;
      overflow: hidden;
      .legend {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 16px 0;
        .left {
          font-weight: bold;
        }
        .right {
          .list {
            display: grid;
            grid-template-columns: repeat(2, auto);
            grid-auto-flow: dense; /* 允许元素在网格中填充空隙 */
            grid-gap: 5px;
            white-space: wrap;
            .item {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              .shape {
                height: 14px;
                width: 14px;
                margin-right: 10px;
              }
              .text {
                font-size: 20px;
              }
            }
          }
        }
      }
      .echart {
        height: 100%;
        width: 100%;
      }
    }
  }
}
</style>
