<!--
 * @Author: your name
 * @Date: 2022-03-25 17:15:31
 * @LastEditTime: 2022-03-28 13:53:04
 * @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/CzCard.vue
-->

<template>
  <div class="czcard">
    <my-collapse
      title="调压箱"
      ref="myCollapse"
      :listNum="czList.filter((item) => item.show).length"
    >
      <template v-slot:chackbox>
        <div
          class="filter"
          :class="`one-${item.state}`"
          v-for="item in filterList"
          :key="item.value"
        >
          <span
            class="text"
            :class="{ active: deviceTypeArr.indexOf(item.state) >= 0 }"
            @click="fliterTypeChange(item)"
            >{{ item.value }}</span
          >
          <span class="number">({{ item.count }})</span>
        </div>
      </template>
      <template #container>
        <div class="container flex">
          <div
            class="com"
            v-for="item in czList"
            :key="item.deviceName"
            v-show="item.show"
          >
            <div :title="item.companyName" class="left zzz">
              {{ item.companyName }}
            </div>
            <div :class="`one-${item.state}`" class="state">
              {{ typeState[item.state - 1] }}
            </div>
          </div>
        </div>
      </template>
    </my-collapse>
  </div>
</template>

<script>
import MyCollapse from "./MyCollapse";
import CzItem from "./CzItem";

export default {
  components: {
    MyCollapse,
    CzItem,
  },
  data() {
    return {
      carHide: true,
      addStartNum: 3,
      filterList: [
        { value: "正常", count: 100, state: 1 },
        { value: "报警", count: 100, state: 2 },
        { value: "离线", count: 100, state: 3 },
      ],
      typeState: ["正常", "报警", "离线"],
      deviceTypeArr: [1, 2, 3],
      czList: [
        { companyName: "河北泽宏股份调压箱", state: 1, show: true },
        { companyName: "河北泽宏股份调压箱", state: 2, show: true },
        { companyName: "河北泽宏股份调压箱", state: 3, show: true },
        { companyName: "河北泽宏股份调压箱", state: 1, show: true },
        { companyName: "河北泽宏股份调压箱", state: 2, show: true },
        { companyName: "河北泽宏股份调压箱", state: 3, show: true },
        { companyName: "河北泽宏股份调压箱", state: 1, show: true },
        { companyName: "河北泽宏股份调压箱", state: 2, show: true },
        { companyName: "河北泽宏股份调压箱", state: 3, show: true },
        { companyName: "河北泽宏股份调压箱", state: 1, show: true },
        { companyName: "河北泽宏股份调压箱", state: 2, show: true },
        { companyName: "河北泽宏股份调压箱", state: 3, show: true },
        { companyName: "河北泽宏股份调压箱", state: 1, show: true },
        { companyName: "河北泽宏股份调压箱", state: 2, show: true },
        { companyName: "河北泽宏股份调压箱", state: 3, show: true },
        { companyName: "河北泽宏股份调压箱", state: 1, show: true },
        { companyName: "河北泽宏股份调压箱", state: 2, show: true },
        { companyName: "河北泽宏股份调压箱", state: 3, show: true },
      ],
    };
  },
  computed: {
    // 计算有多少个展示的对象,如果小于3个,就把justify-content: space-between;取消
    getShowNum() {
      return this.czList.filter((item) => item.show).length < this.addStartNum;
    },
  },
  mounted() {
    // this.changeAddStartNum();
  },
  methods: {
    hide() {
      this.carHide = !this.carHide;
    },
    // 根据父子元素自动计算是否需要添加值start
    changeAddStartNum() {
      const czItem = this.$refs.czItem;
      let czItemWidth;
      // 组件有可能是一个数组，所以要这样判断
      if (Array.isArray(czItem)) {
        const { width } = czItem[0].$el.getBoundingClientRect();
        czItemWidth = width;
      } else {
        const { width } = czItem.$el.getBoundingClientRect();
        czItemWidth = width;
      }
      // 取出collap的宽
      const { width: CollapseWidth } =
        this.$refs.myCollapse.$el.getBoundingClientRect();
      // 得到最小的承载数量
      this.addStartNum = Math.floor(CollapseWidth / czItemWidth);
    },
    //过滤选择
    fliterTypeChange(data) {
      const { state } = data;
      const index = this.deviceTypeArr.indexOf(state);
      if (index >= 0) {
        this.deviceTypeArr.splice(index, 1);
      } else {
        this.deviceTypeArr.push(state);
      }
      this.filter(this.deviceTypeArr);
    },
    // 过滤对象
    filter(arr) {
      this.czList.forEach((item) => {
        const { state } = item;
        if (arr.includes(state)) {
          item.show = true;
        } else {
          item.show = false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
$one: #666666;
$two: #ff6c68;
$three: #bbbbbb;
$active: #06d7b1 !important;

.filter {
  margin-right: 22px;
  margin-top: 5px;
  font-size: 14px;

  .text {
    position: relative;
    cursor: pointer;
    &::before {
      content: "";
      position: absolute;
      border-radius: 50%;
      width: 6px;
      height: 6px;
      left: -10px;
      top: 50%;
      margin-top: -3px;
    }

    &.active {
      color: $active;
    }
    &:hover {
      color: #06d7b189 !important;
    }
  }

  .number {
    font-weight: 500;
  }

  &.one-1 {
    .number,
    .text {
      color: $one;
    }
    .text {
      &:before {
        background-color: $one;
      }
    }
  }
  &.one-2 {
    .number,
    .text {
      color: $two;
    }
    .text {
      &:before {
        background-color: $two;
      }
    }
  }
  &.one-3 {
    .number,
    .text {
      color: $three;
    }
    .text {
      &:before {
        background-color: $three;
      }
    }
  }
}
.container {
  width: 100%;
  flex-wrap: wrap;
  margin-left: 35px;

  &.start {
    justify-content: flex-start;
    & > div {
      // margin-right: 50px;
    }
  }
  & > div {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
    // margin-right: 45px;
    width: 15%;
    min-width: 190px;
    margin-right: 1.5%;
    .left {
      margin-right: 4px;
      font-size: 14px;
      max-width: 112px;
    }
    .state {
      font-size: 8px;
      padding: 0px 4px;
      box-sizing: border-box;
      &.one-1 {
        color: #fff;
        border: 1px solid #6fffe5;
        border-radius: 2px;
        background-color: #06d7b1;
      }
      &.one-2 {
        color: #fff;
        border: 1px solid #ff9c99;
        border-radius: 2px;
        background-color: #ff6c68;
      }
      &.one-3 {
        color: #fff;
        border: 1px solid #aaaaaa;
        border-radius: 2px;
        background-color: #bbbbbb;
      }
    }
  }
}
.flex {
  display: flex;
  justify-content: flex-start;
}
</style>