<!-- 只适用于指标完成情况对标 -->
<template>
  <div>
    <!-- 图例 -->
    <div
      class="legend"
      v-show="
        this.chartMsg1.series[0].data.length > 0 ||
        this.chartMsg2.series[0].data.length > 0
      "
    >
      <span class="item" v-for="item in legendList" :key="item.id">
        <span
          v-if="item.type === 1"
          class="block"
          :style="{ backgroundColor: item.color }"
        ></span>
        <span
          v-if="item.type === 2"
          class="line"
          :style="{ backgroundColor: item.color }"
        >
          <span
            class="line-block"
            :style="{ backgroundColor: item.color }"
          ></span>
        </span>
        {{ item.name }}</span
      >
    </div>
    <!-- 图 -->
    <div>
      <div
        style="
          display: inline-block;
          width: 79%;
          vertical-align: top;
          padding-right: 20px;
        "
      >
        <base-chart
          v-show="this.chartMsg1.series[0].data.length > 0"
          :chartHeight="chartHeight"
          :chartWidth="chartWidth1"
          :chartMsg="chartMsg1"
          chartId="targetChartLeft"
          :chartNum="chartNum"
        />
        <!-- 暂无数据 -->
        <div
          :style="{ height: chartHeight + 'px' }"
          v-show="this.chartMsg1.series[0].data.length === 0"
        >
          <div
            class="no-data-bg"
            style="position: relative; left: 50%; transform: translateX(-50%)"
          ></div>
        </div>
      </div>
      <div style="display: inline-block; width: 20%; vertical-align: top">
        <base-chart
          v-show="this.chartMsg2.series[0].data.length > 0"
          :chartHeight="chartHeight"
          :chartWidth="chartWidth2"
          :chartMsg="chartMsg2"
          chartId="targetChartRight"
          :chartNum="chartNum"
        />
        <!-- 暂无数据 -->
        <div
          :style="{ height: chartHeight + 'px' }"
          v-show="this.chartMsg2.series[0].data.length === 0"
        >
          <div
            class="no-data-bg"
            style="
              position: relative;
              left: 50%;
              transform: translateX(-50%);
              width: 80%;
            "
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import baseChart from "./baseChart.vue";
export default {
  name: "bmBarComplete",
  data() {
    return {
      chartWidth1: "60%",
      chartWidth2: "20%",
    };
  },
  props: {
    chartHeight: {
      type: Number,
      default: 300,
    },
    legendList: {
      type: Array,
      default: () => [],
    },
    chartMsg1: {
      type: Object,
      default: () => {},
    },
    chartMsg2: {
      type: Object,
      default: () => {},
    },
    chartNum: {
      type: Number,
      default: 1,
    },
  },
  components: { baseChart },
};
</script>
<style lang="scss" scoped>
.legend {
  position: absolute;
  right: 10px;
  top: 15px;
  .item {
    display: inline-block;
    margin-right: 10px;
    font-size: 14px;
    color: #8c8c8c;
    .block {
      width: 10px;
      height: 10px;
      display: inline-block;
      margin-right: 4px;
    }
    .line {
      width: 10px;
      height: 10px;
      border-radius: 5px;
      display: inline-block;
      margin-right: 4px;
      position: relative;
      .line-block {
        position: absolute;
        width: 20px;
        height: 2px;
        left: -5px;
        top: 4px;
      }
    }
  }
}
</style>
