<template>
  <div class="wrap"
    :class="origin">
    <div class="group"
      v-for="item in legendData"
      :class="item.orient">
      <div v-for="o in item.data"
        :class="[o.type, o.effective ? '' : 'dis', o.show? '' : 'none']"
        :style="{'--color': o.color}"
        @click="handleClick(o)">{{ o.name }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    /**
    * 数据格式: [
    *   { // 每一列组
    *     data: [
    *       {
    *         name: '系列1名字',
    *         type: 'bar', // 类型: bar 柱状图（默认），line 横线+圆圈, circle 圆圈
    *         effective: true, // 有效性
    *         show: true // 是否显示
    *       },
    *       {
    *         name: '系列2名字',
    *         type: 'line', // 类型: bar 柱状图（默认），line 横线+圆圈, circle 圆圈
    *         effective: true, // 有效性
    *         show: true // 是否显示
    *       }
    *     ],
    *     orient: '一组内的排列方式' // verticalAlign 垂直排列（默认），horizontal 水平排列
    *   }
    * ]
  */
    legendData: {
      type: Array,
      default: () => []
    },
    origin: {
      type: String,
      default: 'horizontal' // 每组之间排列方式: verticalAlign 垂直，horizontal 水平
    }
  },
  methods: {
    handleClick(item) {
      item.effective = !item.effective
      this.$emit('clickItem')
    }
  }
}
</script>

<style scoped
  lang="scss">
  .wrap {
    display: flex;
    justify-content: center;

    &.verticalAlign {
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    &.horizontal {
      flex-direction: row;
      align-items: center;

      .group {
        margin-right: 20px;
      }
    }

    .group {
      display: flex;

      &.verticalAlign {
        flex-direction: column;
        gap: 10px
      }

      &.horizontal {
        flex-direction: row;
        gap: 10px;
      }

      /* 柱状图 */
      .bar {
        display: flex;
        align-items: center;
        font-size: 12px;
        cursor: pointer;

        &:before {
          content: "";
          display: block;
          width: 28px;
          height: 15px;
          background: var(--color);
          border-radius: 3px;
          margin-right: 5px;
        }
      }

      /* 折线图+圆圈 */
      .line {
        display: flex;
        align-items: center;
        font-size: 12px;
        cursor: pointer;
        position: relative;

        &:before {
          content: "";
          display: block;
          width: 28px;
          height: 2px;
          background: var(--color);
          border-radius: 3px;
          margin-right: 5px;
        }

        &:after {
          content: "";
          display: block;
          width: 14px;
          height: 14px;
          background-color: white;
          box-sizing: border-box;
          border: 3px solid var(--color);
          border-radius: 50%;
          position: absolute;
          top: 0.5px;
          left: 7.45px;
        }
      }

      /* 圆圈 */
      .circle {
        display: flex;
        align-items: center;
        font-size: 12px;
        cursor: pointer;
        position: relative;
        padding-left: 7.75px;

        &:before {
          content: "";
          display: block;
          width: 14px;
          height: 14px;
          background: white;
          border: 3px solid var(--color);
          border-radius: 50%;
          margin-right: 10px;
        }
      }

      /* 失效效果 */
      .dis {
        color: lightgray !important;

        &:before {
          background: lightgray !important;
          border: 3px solid lightgray !important;
        }

        &:after {
          border: 3px solid lightgray !important;
        }
      }

      /* 重写圆圈 */
      .circle.dis {
        &:before {
          background: white !important;
          border: 3px solid lightgray !important;
        }
      }

      /* 隐藏 */
      .none{
        display: none;
      }
    }
  }

</style>