<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2024-07-15 10:26:41
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2024-07-31 16:25:42
 * @FilePath: /zh-baseversion-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="big-bottom">
    <div class="left">
      <img
        v-if="cont != list.length - 3"
        @click.stop="cont++"
        src="@/assets/firstimage/l.png"
        alt=""
      />
    </div>
    <div class="container">
      <transition name="fadeBottom" mode="out-in">
        <div v-if="activeCom.label" class="children" @click.stop="">
          <div
            v-for="item in activeCom.children"
            :key="item.value"
            :title="'河北冉盛升新能源有限公123123123司'"
            class="child zzz"
            :class="[{ active: selectActive.includes(item.value) }]"
            @click.stop="selectActiveChange(item.value)"
          >
            {{ item.label }}
          </div>
        </div>
      </transition>
      <div
        class="all"
        @click.stop="selectAll"
        :class="{
          active:
            selectActive.length == listFlatArr.length &&
            selectActive.length > 1,
        }"
      >
        全部
      </div>
      <div class="other">
        <div class="other2">
          <div class="move" :style="{ left: -cont * 144 + 'px' }">
            <div
              v-for="item in list"
              @click.stop="itemClick(item)"
              :key="item.value"
              class="item"
              :class="[
                { active: item.label == activeCom.label },
                { minOne: selectSome(item) },
                { maxAll: selectEvery(item) },
              ]"
            >
              {{ item.label }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <img
        v-if="cont != 0"
        @click.stop="cont--"
        src="@/assets/firstimage/r.png"
        alt=""
      />
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  name: "",
  data() {
    return {
      cont: 0,
      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" },
          ],
        },
      ],
      // 被选中的公司
      activeCom: {},
      selectShowNum: [],
      // 被选中的值
      selectActive: [],
      listFlatArr: [],
    };
  },
  computed: {
    ...mapGetters(["company", "systemSetting"]),
  },
  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.activeCom = {};
    },
    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);
    },
    itemClick(item) {
      if (item.children.length == 0) return;
      if (this.activeCom == item) {
        this.activeCom = {};
      } else {
        this.activeCom = item;
      }
    },
    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(item) {
      return (
        item.children.length > 0 &&
        item.children.some((item) => {
          return this.selectActive.includes(item.value);
        })
      );
    },
    // 都被选中
    selectEvery(item) {
      return (
        item.children.length > 0 &&
        item.children.every((item) => {
          return this.selectActive.includes(item.value);
        })
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.big-bottom {
  width: 810px;
  height: 50px;
  position: fixed;
  bottom: 5px;
  left: 50%;
  margin-left: -405px;
  background: url("~@/assets/firstimage/btmA.png") no-repeat bottom center,
    url("~@/assets/firstimage/btmB.png") no-repeat bottom center;
  box-sizing: border-box;
  padding: 0 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .container {
    // background: red;
    flex: 1;
    margin-right: 22px;
    height: 28px;
    display: flex;
    .all {
      transition: all 0.2s linear;
      width: 128px;
      margin-right: 16px;
      text-align: center;
      line-height: 28px;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
      background: url("~@/assets/firstimage/btm-item.png") no-repeat bottom
        center;
      &.active {
        background: url("~@/assets/firstimage/btm-item-active.png") no-repeat
          bottom center;
      }
      &:hover {
        opacity: 0.7;
      }
    }
    .other {
      flex: 1;
      width: 0;
      position: relative;
      .other2 {
        width: 100%;
        height: 100%;
        overflow: hidden;

        .move {
          transition: all 0.5s linear;
          width: 1000px;
          height: 100%;
          // background: blue;
          position: relative;
          display: flex;
          align-items: center;
          left: 0px;
          .item {
            transition: all 0.2s linear;

            width: 128px;
            margin-right: 16px;
            text-align: center;
            line-height: 28px;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            background: url("~@/assets/firstimage/btm-item.png") no-repeat
              bottom center;
            &.active {
              // color: #1ec9e3;
              background: url("~@/assets/firstimage/btm-item-two.png") no-repeat
                bottom center !important;
            }
            // 最少选中一个
            &.minOne {
              background: url("~@/assets/firstimage/btm-item-one.png") no-repeat
                bottom center;
            }
            // 全选中
            &.maxAll {
              background: url("~@/assets/firstimage/btm-item-active.png")
                no-repeat bottom center;
            }
            &:hover {
              opacity: 0.7;
            }
          }
        }
      }
    }
    .children {
      transition: all 1s linear;
      width: 620px;
      max-height: 214px;
      position: absolute;
      // background: red;
      background: rgba(2, 26, 51, 0.9);
      border: 1px solid #127bd1;
      box-shadow: inset 0px 0px 10px 0px #164db2;
      left: 50%;
      margin-left: -310px;
      // top: -215px;
      bottom: 50px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 20px 20px 0px 20px;
      // 滚动条
      overflow-y: auto;
      &::-webkit-scrollbar {
        width: 10px;
        background: #012a53;
        position: absolute;
        top: 0;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        // border-radius: 10px;
        // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #00000052;
        border-radius: 8px;
      }
      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        // border-radius: 10px;
        // background-color: red;
      }

      &::-webkit-scrollbar-button:start {
        // overflow: hidden;
      }
      &::-webkit-scrollbar-button:end {
        // overflow: hidden;
      }
      .child {
        transition: all 0.5s linear;
        width: 275px;
        height: 32px;
        margin-bottom: 16px;
        background: #0b2d47;
        box-sizing: border-box;
        padding-left: 21px;
        line-height: 32px;
        color: #5ac8fb;
        border: 1px solid rgba(54, 136, 255, 0.2392);
        cursor: pointer;

        &.active {
          background: rgba(23, 149, 234, 0.5);
          box-sizing: border-box;
          border: 1px solid #408AD7;
          color: #fff;
        }
        &:hover {
          opacity: 0.7;
        }
      }
    }
  }
  .left {
    margin-right: 32px;
    color: white;
  }
  .right {
    color: white;
  }
  .left,
  .right {
    width: 14px;
    height: 20px;

    img {
      transition: all 0.5s linear;
      width: 100%;
      height: 100%;
      cursor: pointer;
      &:hover {
        opacity: 0.7;
      }
    }
  }

  // background: red;
}
</style>
