<!--
 * @Author: your name
 * @Date: 2022-03-29 09:41:23
 * @LastEditTime: 2022-03-29 11:14:11
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Filter.vue
-->
<template>
  <div class="fliter-vue">
    <div
      class="filter"
      v-for="(item, index) in filterList"
      :key="item.value"
      :class="`one-${item.state}`"
    >
      <!-- 全部 -->
      <template v-if="index == 0">
        <span
          class="text"
          @click="fliterTypeChange(item)"
          :class="{ active: deviceTypeArr.length == filterList.length - 1}"
          >{{ item.value }}
          <i class="iconfont icon-bingo"></i>
        </span>
        <span class="number">({{ item.count }})</span>
      </template>
      <template v-else>
        <span
          class="text"
          :class="{ active: deviceTypeArr.indexOf(item.state) >= 0 }"
          @click="fliterTypeChange(item)"
          >{{ item.value }}
          <i class="iconfont icon-bingo"></i>
        </span>
        <span class="number">({{ item.count }})</span>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      deviceTypeArr: [],
      allArray: [],
    };
  },
  props: {
    // 传进来的参数
    filterList: Array,
  },
  created() {
    this.deviceTypeArr = this.filterList
      .filter((item) => item.state > 0)
      .map((item) => item.state);
    // 全选时的数组内容
    this.allArray = [...this.deviceTypeArr];
  },
  methods: {
    fliterTypeChange(data) {
      const { state } = data;
      // 如果点的是全选
      if (state == "all") {
        if (this.deviceTypeArr.length == this.filterList.length - 1) {
          this.deviceTypeArr = [];
        } else {
          this.deviceTypeArr = [...this.allArray];
        }
      } else {
        const index = this.deviceTypeArr.indexOf(state);
        if (index >= 0) {
          this.deviceTypeArr.splice(index, 1);
        } else {
          this.deviceTypeArr.push(state);
        }
      }
      this.$emit("fliterTypeChange", [...this.deviceTypeArr]);
    },
  },
};
</script>

<style lang="scss" scoped>
$one: #06d7b1 !important;
$two: #ff6c68 !important;
$three: #bbbbbb !important;
$all: #000000;
.fliter-vue {
  display: flex;
}
.filter {
  margin-right: 30px;
  margin-top: 5px;
  font-size: 14px;

  .text {
    cursor: pointer;
    position: relative;
    .iconfont {
      font-size: 10px;
      position: absolute;
      left: -12px;
      top: 0px;
      color: rgba(0, 0, 0, 0);
    }
    &:before {
      content: "";
      position: absolute;
      width: 10px;
      height: 10px;
      border: 1px solid #000000;
      left: -12px;
      top: 50%;
      margin-top: -5px;
    }
    &:hover {
      .iconfont {
        font-size: 10px;
        position: absolute;
        left: -12px;
        color: rgba(0, 0, 0, .5);
      }
    }
    &.active {
       .iconfont {
        font-size: 10px;
        position: absolute;
        left: -12px;
        color: rgba(0, 0, 0, 1);
      }
    }
  }
  .number {
    font-weight: 500;
    color: #1890ff !important;
  }

  &.one-all {
    .number,
    .text {
      color: $all;
    }
  }
  &.one-1 {
    .number,
    .text {
      color: $one;
    }
  }
  &.one-2 {
    .number,
    .text {
      color: $two;
    }
  }
  &.one-3 {
    .number,
    .text {
      color: $three;
    }
  }
}
</style>