<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2023-07-12 13:58:25
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2023-07-12 17:12:59
 * @FilePath: /gassafetyprogress-web/src/views/bigWindow/components/Bottom.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="bigwindow-bottom listingsSty">
    <img
      src="~@/assets/firstimage/bottombk.svg"
      alt=""
      style="backdrop-filter: blur(4px)"
    />
    <div class="listingsSty">
      <div
        class="firsty selectAll"
        @click.stop="selectAll"
        :class="[
          {
            active:
              selectActive.length == listFlatArr.length &&
              selectActive.length > 1,
          },
        ]"
      >
        全部
      </div>
      <div class="firsty item" v-for="(item, index) in list" :key="item.value">
        <div
          class="itemCompany"
          @click.stop="selectChange(item.value)"
          :class="[
            { active: selectSome(index) },
            { activeAll: selectEvery(index) },
          ]"
        >
          {{ item.label }}
        </div>

        <div
          class="up-select"
          :class="[{ hide: !selectShowNum.includes(item.value) }]"
          :style="{ height: item.children.length * 35 + 'px' }"
        >
          <div
            class="selectItem"
            v-for="selectItem in item.children"
            :class="[{ active: selectActive.includes(selectItem.value) }]"
            :key="selectItem.value"
            @click.stop="selectActiveChange(selectItem.value)"
          >
            {{ selectItem.label }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "",
  data() {
    return {
      list: [
        {
          value: 1,
          label: "天然气公司",
          children: [
            // { value: 10, label: "东阿道夫阿" },
            // { value: 11, label: "阿发送到" },
            // { value: 19, label: "发打算发大水" },
          ],
        },
        {
          value: 2,
          label: "液化气公司",
          children: [
            // { value: 21, label: "2-1" },
            // { value: 22, label: "2-2" },
          ],
        },
        {
          value: 3,
          label: "加气站",
          children: [
            // { value: 31, label: "3-1" },
            // { value: 32, label: "3-2" },
          ],
        },
      ],
      selectShowNum: [],
      // 被选中的值
      selectActive: [],
      listFlatArr: [],
    };
  },
  computed: {
    ...mapGetters(["company", "systemSetting"]),
  },
  beforeCreate() {},

  mounted() {
    this.GetCompany().then((res) => {
      this.company.forEach((item) => {
        this.list[item.companyType-1].children.push({
          value: item.conpanyId,
          label: item.companyName,
        });
      });
      this.selectAll();
    });
  },
  methods: {
    ...mapActions({
      GetCompany: "bigWindowCompany/GetCompany",
    }),
    // 把下拉框放下
    selectUpClear(){
      this.selectShowNum=[];
    },
    selectAll() {
      // 生成所有都选中的数组
      this.listFlatArr = this.list
        .map((item) => {
          return item.children.map((iten) => {
            return iten.value;
          });
        })
        .flat();

      // 如果是全选中状态,则全取消,否则全选

      if (this.selectActive.length == this.listFlatArr.length) {
        this.selectActive = [];
      } else {
        this.selectActive = [...this.listFlatArr];
      }
      this.$emit("listChange", this.selectActive);
    },
    selectChange(value) {
      const num = this.selectShowNum.indexOf(value);
      if (num >= 0) {
        this.selectShowNum.splice(num, 1);
      } else {
        this.selectShowNum.push(value);
      }
    },
    selectActiveChange(value) {
      const num = this.selectActive.indexOf(value);
      if (num >= 0) {
        this.selectActive.splice(num, 1);
      } else {
        this.selectActive.push(value);
      }
      this.$emit("listChange", this.selectActive);
    },
    // 至少有一个被选中
    selectSome(index) {
      return (
        this.list[index].children.length > 0 &&
        this.list[index].children.some((item) => {
          return this.selectActive.includes(item.value);
        })
      );
    },
    // 都被选中
    selectEvery(index) {
      return (
        this.list[index].children.length > 0 &&
        this.list[index].children.every((item) => {
          return this.selectActive.includes(item.value);
        })
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.bigwindow-bottom {
  width: 40%;
  height: 70px;
  position: fixed;
  bottom: 0;
  margin-left: 30%;
  display: flex;
  // z-index: 1000;
  img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    bottom: -10px;
  }
  .listingsSty {
    padding-left: 15%;
    padding-right: 15%;
    box-sizing: border-box;
    width: 180%;
    display: flex;
    justify-content: space-between;
    .firsty {
      // width: 15%;
      min-width: 80px;
      height: 35px;
      text-align: center;
      line-height: 35px;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
      &.selectAll {
        transition: all 0.5s ease;

        &.active {
          color: #00ffff;
          text-shadow: 0 0 20px rgba(0, 255, 255, 1),
            0 0 35px rgb(0, 255, 255, 1);
        }
      }

      &.item {
        min-width: 180px;
        position: relative;
        .itemCompany {
          transition: all 0.5s ease;
          &.active {
            color: #00ffff;
            text-shadow: 0 0 20px rgba(0, 255, 255, 0.3),
              0 0 35px rgb(0, 255, 255, 0.3);
          }
          &.activeAll {
            color: #00ffff;
            text-shadow: 0 0 20px rgba(0, 255, 255, 1),
              0 0 35px rgb(0, 255, 255, 1);
          }
        }
        .up-select {
          transition: all 0.5s ease;
          position: absolute;
          bottom: 50px;
          left: 0;
          width: 100%;
          background: rgb(18, 92, 155, 0.3);
          overflow: hidden;
          &.hide {
            height: 0px !important;
          }
          .selectItem {
            transition: all 0.5s ease;
            &.active {
              color: #00ffff;
              text-shadow: 0 0 20px #00ffff, 0 0 35px #00ffff;
            }
          }
        }
      }
    }
  }
}
</style>