<!--
 * @Author: your name
 * @Date: 2022-03-25 17:15:31
 * @LastEditTime: 2022-03-29 11:12:33
 * @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="chars-card">
    <my-collapse
      title="调压箱"
      ref="myCollapse"
      :listNum="czList.filter((item) => item.show).length"
    >
      <template v-slot:chackbox>
       <FilterVue2
          :filterList="filterList"
          @fliterTypeChange="fliterTypeChange"
        />
        <!-- <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, index) in czList"
            :key="item.deviceName"
            v-show="item.show"
          >
            <el-popover
              :ref="'popo' + index"
              placement="right-end"
              width="330"
              trigger="click"
              popper-class="paddingnone"
            >
              <div class="cz-item">
                <div class="title">
                  <div class="text">
                    {{ item.companyName }}
                  </div>
                  <div @click="change(index)" class="x">
                    <i class="iconfont icon-x"></i>
                  </div>
                </div>
                <CzItem
                  ref="czItem"
                  :list="item"
                  :changeStyle="true"
                  :stateType="stateType"
                />
              </div>
              <template slot="reference">
                <div class="flex">
                  <div :title="item.companyName" class="left zzz">
                    {{ item.companyName }}
                  </div>
                  <div
                    :class="`one-${item.state}`"
                    class="state"
                    @click="change"
                  >
                    {{ typeState[item.state - 1] }}
                  </div>
                </div>
              </template>

              <!-- <el-button slot="reference">click 激活</el-button> -->
            </el-popover>
            <!-- <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";
import FilterVue2 from "./FilterVue2";
// 场罐
export default {
  components: {
    MyCollapse,
    CzItem,
    FilterVue2,
  },
  data() {
    return {
      carHide: true,
      visible: true,
      addStartNum: 3,
      filterList: [
        { value: "全部", count: 100, state: "all" },
        { value: "正常", count: 100, state: 1 },
        { value: "报警", count: 100, state: 2 },
        { value: "离线", count: 100, state: 3 },
      ],
      typeState: ["正常", "报警", "离线"],
      deviceTypeArr: [1, 2, 3],
      czList: [
        {
          companyName: "河北泽宏股份调压箱",
          state: 1,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
          popoVidible: true,
        },
        {
          companyName: "河北泽宏股份调压箱",
          state: 2,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
          popoVidible: false,
        },
        {
          companyName: "河北泽宏股份调压箱",
          state: 3,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
          popoVidible: false,
        },
        {
          companyName: "河北泽宏股份调压箱",
          state: 1,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
          popoVidible: false,
        },
        {
          companyName: "河北泽宏股份调压箱",
          state: 2,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
        },
        {
          companyName: "河北泽宏股份调压箱",
          state: 3,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
        },
        {
          companyName: "河北泽宏股份调压箱",
          state: 1,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
        },
        {
          companyName: "河北泽宏股份调压箱",
          state: 2,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
        },
        {
          companyName: "河北泽宏股份调压箱",
          state: 3,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
        },
        {
          companyName: "河北泽宏股份调压箱",
          state: 1,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
        },
        {
          companyName: "河北泽宏股份调压箱",
          state: 2,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
        },
        {
          companyName: "河北泽宏股份调压箱",
          state: 3,
          a: 25,
          b: 56,
          c: 54,
          d: 15,
          e: 56,
          image: "",
          show: true,
        },
      ],
      stateType: {
        1: "正常",
        2: "报警",
        3: "离线",
      },
    };
  },
  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;
    },
    change(index) {
      this.$refs["popo" + index][0].showPopper = false;
    },
    // 根据父子元素自动计算是否需要添加值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([...data]);
    },
    // 过滤对象
    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;
    }
  }
  &.one-2 {
    .number,
    .text {
      color: $two;
    }
  }
  &.one-3 {
    .number,
    .text {
      color: $three;
    }
  }
}
.container {
  width: 100%;
  flex-wrap: wrap;
  margin-left: 35px;

  &.start {
    // justify-content: flex-start;
    & > div {
      // margin-right: 50px;
    }
  }
  .com {
    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;
      cursor: pointer;
    }
    .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;
}
.cz-item {
  .title {
    display: flex;
    justify-content: space-between;
    // height: 20px;
    border-bottom: 1px solid #e6ebf5;
    box-sizing: border-box;
    padding: 13px 0px 6px 10px;
    .text {
      font-size: 13px;
      color: #666666;
      padding-left: 10px;
    }
    .x {
      color: #666666;
      padding-right: 10px;
      cursor: pointer;
      .iconfont {
        font-size: 12px;
        &::hover {
          color: #000000;
        }
      }
    }
  }
}
.paddingnone {
  padding: 0;
}
</style>