<!--
 * @Author: your name
 * @Date: 2022-03-25 17:15:31
 * @LastEditTime: 2022-03-29 10:09:52
 * @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>
        <FilterVue
          :filterList="filterList"
          @fliterTypeChange="fliterTypeChange"
        />
      </template>
      <template #container>
        <div class="container" :class="{ start: getShowNum }">
          <div
            v-for="(item, index) in czList"
            :key="item.deviceName + index"
            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";
import FilterVue from "./FilterVue";

export default {
  // 场站
  components: {
    MyCollapse,
    CzItem,
    FilterVue,
  },
  data() {
    return {
      carHide: true,
      addStartNum: 3,
      filterList: [
        { value: "全部", count: 100, type: "all" },
        { value: "加气站", count: 100, type: 1 },
        { value: "门站", count: 100, type: 2 },
        { value: "调压站", count: 100, type: 3 },
        { value: "储备站", count: 100, type: 4 },
        { value: "气化站", count: 100, type: 5 },
      ],
      deviceTypeArr: [1, 2, 3, 4, 5],
      czList: [
        {
          deviceName: "加气站",
          state: 1,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
          type: 1,
        },
        {
          deviceName: "门站",
          state: 2,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
          type: 2,
        },
        {
          deviceName: "调压站",
          state: 1,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
          type: 3,
        },
        {
          deviceName: "储备站",
          state: 1,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
          type: 4,
        },
        {
          deviceName: "气化站",
          state: 1,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
          type: 5,
        },
        {
          deviceName: "气化站",
          state: 1,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
          type: 5,
        },
        {
          deviceName: "储备站",
          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) {
      this.filter([...data]);
      // 改变大小,因为动画原因加个延迟
      // 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>

.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;
    border: 1px solid #e6ebf5;
    border-radius: 4px;

    box-sizing: border-box;
  }
}
.flex {
  display: flex;
  justify-content: space-between;
}
</style>