<!--
 * @Author: your name
 * @Date: 2022-03-25 17:15:31
 * @LastEditTime: 2022-03-28 13:43:09
 * @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" v-for="item in filterList" :key="item.value">
          <span
            class="text"
            :class="{ active: deviceTypeArr.indexOf(item.type) >= 0 }"
            @click="fliterTypeChange(item)"
            >{{ item.value }}</span
          >
          <span class="number">({{ item.count }})</span>
        </div>
      </template>
      <template #container>
        <div class="container" :class="{ start: getShowNum }">
          <div v-for="item in czList" :key="item.deviceName" v-show="item.show">
            <CzItem ref="czItem" :list="item" v-if="item.show" />
          </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, type: 1 },
        { value: "加气站1", count: 100, type: 2 },
        { value: "加气站2", count: 100, type: 3 },
        { value: "加气站3", count: 100, type: 4 },
        { value: "加气站4", count: 100, type: 5 },
        { value: "加气站5", count: 100, type: 6 },
        { value: "加气站7", count: 100, type: 7 },
      ],
      deviceTypeArr: [1, 2, 3, 4, 5, 6, 7],
      czList: [
        {
          deviceName: "加气站a",
          state: 1,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
          type: 1,
        },
        {
          deviceName: "加气站b",
          state: 1,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
          type: 2,
        },
        {
          deviceName: "加气站c",
          state: 1,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
          type: 3,
        },
        {
          deviceName: "加气站d",
          state: 1,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
          type: 4,
        },
        {
          deviceName: "加气站e",
          state: 1,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
          type: 4,
        },
        {
          deviceName: "加气站f",
          state: 1,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
          type: 4,
        },
        {
          deviceName: "加气站g",
          state: 1,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
          type: 4,
        },
      ],
    };
  },
  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;
      // this.myCollapse();
    },
    // 根据父子元素自动计算是否需要添加值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 { type } = data;
      const index = this.deviceTypeArr.indexOf(type);
      if (index >= 0) {
        this.deviceTypeArr.splice(index, 1);
      } else {
        this.deviceTypeArr.push(type);
      }
      this.filter(this.deviceTypeArr);
      // 改变大小,因为动画原因加个延迟
      // this.$nextTick(() => {
      //   setTimeout(()=>{
      //     this.myCollapse()
      //   }, 300);
      // });
    },
    myCollapse() {
      // this.$refs.myCollapse.getHeight();
    },
    // 过滤对象
    filter(arr) {
      this.czList.forEach((item) => {
        const { type } = item;
        if (arr.includes(type)) {
          item.show = true;
        } else {
          item.show = false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.filter {
  margin-right: 12px;
  margin-top: 5px;
  font-size: 14px;
  .text {
    cursor: pointer;
    &:hover {
      color: #06d7b189 !important;
    }
    &.active {
      color: #06d7b1;
    }
  }
  .number {
    font-weight: 500;
    color: #1890ff;
  }
}
.container {
  width: 100%;
  flex-wrap: wrap;
  display: flex;
  &.start {
    justify-content: flex-start;
    & > div {
      // margin-right: 50px;
    }
  }
  & > div {
    margin-bottom: 20px;
    margin-left: 1%;
    width: 24%;
    min-width: 295px;
  }
}
.flex {
  display: flex;
  justify-content: space-between;
}
</style>