<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)">
        <span class="e-icon"></span>
        <span>{{ o.name }}</span>
      </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;

        .e-icon {
          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;

        .e-icon {
          position: relative;
          display: block;
          width: 28px;
          height: 2px;
          background: var(--color);
          border-radius: 3px;
          margin-right: 5px;

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

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

        .e-icon {
          position: relative;
          display: block;
          width: 28px;
          height: 0px;
          margin-right: 5px;

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

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

        .e-icon {
          background: lightgray !important;
          border-color: lightgray !important;
          &:before{
            border-color: lightgray !important;
          }
        }
      }

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

</style>