<template>
  <div class="List">
    <!-- 右下侧的标识 -->
    <div class="rightBot">
      <div>列 表</div>
      <div @click="lookMap">地 图</div>
    </div>
    <div class="searTop" @keyup.enter="mySearch">
      <input type="text" v-model="name" placeholder="参展单位搜索" />
      <div class="inco" @click="mySearch">
        <van-icon name="search" />
      </div>
    </div>
    <div class="main">
      <template v-for="(item, index) in data">
        <div
          class="row"
          :key="index"
          @click="quChange(item)"
          :class="{
            shouqi:
              open != item.id &&
              Number(open) - 1 != item.id &&
              Number(open) + 1 != item.id,
            smm: Number(open) - 1 == item.id || Number(open) + 1 == item.id,
          }"
        >
          {{ item.name }}
          <div class="inco">
            <van-icon name="arrow-up" v-if="open == item.id" />
            <van-icon name="arrow-down" v-else />
          </div>
        </div>
        <div class="rowTxt" v-if="open == item.id">
          <div
            :class="{ active: rowAc === val.id }"
            v-for="val in item.son"
            :key="val.id"
            @click="toZhan(item.id, val.id, val.code)"
          >
            {{ val.name }}
          </div>
        </div>
      </template>
    </div>
    <!-- 搜索页面 -->
    <div class="searchResBox" v-if="searShow">
      <div class="close" @click="searShow = false">
        <van-icon name="cross" />
      </div>
      <h3>搜索结果</h3>
      <div class="none" v-if="searchData.length === 0">没有找到对应结果...</div>

      <div class="searMain" v-else>
        <div v-for="item in searchData" :key="item.id">
          <div
            @click="toZhan(item.id, val.id, val.code, true)"
            :class="{ active: rowAc === val.id }"
            class="searTxt"
            v-for="val in item.son"
            :key="val.id"
            v-html="val.name"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
import { exArr3, exArr4 } from "./zhan.js";
import { Notify } from "vant";
export default {
  name: "List",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    box3Ac: {
      type: Number,
      default: 3,
    },
  },
  data() {
    //这里存放数据
    return {
      data: [],
      name: "",
      open: 1,
      searShow: false,
      searchData: [],
      rowAc: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    box3Ac: {
      handler(val) {
        this.name = "";
        this.open = 1;
        this.searShow = false;
        if (val == 3) this.data = [...exArr3];
        else if (val == 4) this.data = [...exArr4];
        this.$nextTick(() => {
          document.querySelector(".rowTxt").scrollTop = 0;
        });
      },
      immediate: true,
    },
  },
  //方法集合
  methods: {
    // 封装一个vr选中的高亮
    VRActive(id) {
      this.rowAc = id;
      // 当前的
      this.data[Number(this.open) - 1].son.forEach((v, i) => {
        if (v.id === id) {
          document.querySelector(".rowTxt").scrollTop = 35 * i;
        }
      });
      // document.querySelector('.rowTxt').scrollTop=200*ind
    },
    toZhan(id1, id2, code, flag) {
      if (this.rowAc === id2) return;

      // code为空的不跳
      if(code==='') return Notify({ type: "warning", message: "数据计算中，敬请期待" });

      if (flag) {
        this.data[Number(id1) - 1].son.forEach((v, i) => {
          if (v.id === id2) {
            document.querySelector(".rowTxt").scrollTop = 35 * i;
          }
        });
      }
      this.$emit("toZhan", id1, id2, code);
      this.rowAc = id2;
    },
    // 点击地图
    lookMap() {
      let url = "one";
      if (this.box3Ac == 4) url = "tow";
      ImagePreview({
        showIndex: false,
        images: [`data/${url}.png`],
        closeable: true,
      });
    },
    // 点击搜索
    mySearch() {
      if (this.name.trim() === "")
        return Notify({ type: "warning", message: "不能为空" });
      this.searShow = true;
      let arr1 = [];
      this.data.forEach((v) => {
        let arr2 = [];
        v.son.forEach((c) => {
          if (c.name.includes(this.name)) {
            arr2.push({
              id: c.id,
              name: c.name.replaceAll(
                this.name,
                `<span style="color:#034c52">${this.name}</span>`
              ),
              code: c.code,
            });
          }
        });
        if (arr2.length > 0) {
          arr1.push({
            id: v.id,
            name: v.name,
            son: arr2,
          });
        }
      });
      this.searchData = arr1;
      this.name = "";
    },

    quChange(item, flag) {
      if (this.open === item.id) return;
      this.open = item.id;
      if (!flag) this.$emit("fenQuChange", item.id);
      document.querySelector(".rowTxt").scrollTop = 0;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.List {
  z-index: 8;
  position: absolute;
  top: 60px;
  left: 70px;
  width: calc(100% - 120px);
  height: calc(100% - 300px);
  background-image: url("../assets/img/ListBac.png");
  background-size: 100% 100%;
  .rightBot {
    color: #fff;
    position: absolute;
    bottom: 18px;
    right: -26px;
    width: 34px;
    height: 120px;
    & > div {
      width: 100%;
      height: 50%;
      writing-mode: vertical-lr;
      text-align: center;
      line-height: 30px;
      &:nth-of-type(1) {
        background-image: url("../assets/img/searRight.png");
        background-size: 100% 100%;
      }
      &:nth-of-type(2) {
        background-color: rgba(0, 0, 0, 0.4);
      }
    }
  }
  .searchResBox {
    color: #fff;
    z-index: 15;
    position: absolute;
    top: 0;
    left: 0;
    width: 98%;
    height: 100%;
    background-image: url("../assets/img/searBac.png");
    background-size: 100% 100%;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background-image: linear-gradient(
        rgba(69, 114, 119, 0.9),
        rgba(69, 114, 119, 0.4)
      );
    }
    .close {
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      width: 30px;
      height: 30px;
      right: 5px;
      top: 5px;
    }
    & > h3 {
      text-align: center;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
    }
    .none {
      width: 100%;
      height: calc(100% - 80px);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
    }
    .searMain::-webkit-scrollbar {
      width: 4px;
      height: 0px;
    }
    .searMain::-webkit-scrollbar-track-piece {
      background-color: transparent;
    }
    .searMain::-webkit-scrollbar-thumb {
      background: #445859;
    }
    .searMain {
      width: 100%;
      margin: 0 auto;
      height: calc(100% - 50px);
      overflow-y: auto;
      .searTxt {
        width: 90%;
        margin: 0 auto;
        padding: 10px 0;
        border-bottom: 1px solid #d5d5d5;
      }
      .active {
        color: #034c52;
      }
    }
  }
  .searTop {
    height: 50px;
    width: 80%;
    margin: 0 auto;
    padding-top: 15px;
    position: relative;
    .inco {
      position: absolute;
      top: 15px;
      right: 0px;
      width: 30px;
      height: 30px;
      z-index: 10;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      color: #9fa1a5;
    }
    input {
      padding: 0 10px;
      display: block;
      width: 100%;
      height: 30px;
      line-height: 30px;
      background-color: #fff;
      border-radius: 15px;
      font-size: 12px;
    }
  }
  .main {
    width: 90%;
    margin: 5px auto 0;
    height: calc(100% - 70px);
    overflow: hidden;

    .row {
      width: 100%;
      height: 28px;
      background-image: url("../assets/img/listRowAc.png");
      background-size: 100% 100%;
      color: #fff;
      text-align: center;
      line-height: 26px;
      font-size: 14px;
      position: relative;
      .inco {
        position: absolute;
        width: 24px;
        height: 24px;
        top: 40%;
        right: 20px;
        transform: translateY(-50%);
      }
    }
    .shouqi {
      height: 0;
      overflow: hidden;
      .inco {
        opacity: 0;
        pointer-events: none;
      }
    }
    .smm {
      height: 24px;
      line-height: 20px;
      background-image: url("../assets/img/listRow.png");
      .inco {
        top: 45%;
      }
    }
    .rowTxt::-webkit-scrollbar {
      width: 4px;
      height: 0px;
    }
    .rowTxt::-webkit-scrollbar-track-piece {
      background-color: transparent;
    }
    .rowTxt::-webkit-scrollbar-thumb {
      background: #292724;
    }
    .rowTxt {
      font-size: 14px;
      color: #292724;
      height: calc(100% - 80px);
      overflow-y: auto;
      margin-bottom: 5px;
      & > div {
        width: 90%;
        margin: 0 auto;
        padding: 10px 0;
        border-bottom: 1px solid #afafaf;
      }
      .active {
        color: #c48871;
      }
    }
  }
}
</style>