<template>
  <!-- 设备按钮 -->

  <div class="typelist-div" @click.stop="">
    <div class="t flex" :class="{ show: searchShow }" @click.stop="">
      <div class="device-btn-wrapper flex">
        <div
          class="list"
          v-for="(item, index) in arr"
          :key="index"
          :class="selarr1.indexOf(item.val) >= 0 ? 'active' : ''"
          @click.stop="sel1(index, item)"
        >
          <img
            :src="item.imgurl"
            style="margin-top: 2px; float: left; margin-right: 3px"
          />
          {{ item.name }}
        </div>
      </div>

      <div class="img-wrapper flex">
        <img
          @click.stop="searchChange"
          :class="{ show: searchShow }"
          class="active"
          src="@/assets/firstimage/top-down.png"
          alt=""
        />
      </div>
      <div class="search flex">
        <div class="input-wrapper flex">
          <input v-model="searchVal" type="text" @keyup.enter="searchClick" />
        </div>
        <div @click.stop="searchClick" class="btn-wrapper">搜索</div>

      </div>
      <img src="@/assets/firstimage/index-top-line.png" class="bottom-line" />
    </div>

    <!-- <div class="b"> -->
    <transition name="fadeBottom" mode="out-in">
      <div
        @click.stop=""
        class="device-container gdt"
        v-if="searchShow && searchItemShow"
      >
        <div
          class="devie-item zzz"
          v-for="item in searchList"
          :key="item.id + '' + item.type"
          @click="deviceItemClick(item)"
        >
          <!-- {{ item.NAME }} -->
          <div class="a">{{ devviceData[item.type] }}</div>
          <div class="b">{{ item.NAME }}</div>
        </div>
      </div>
    </transition>
    <!-- </div> -->
  </div>
</template>

<script>
import { searchDevice, searchDeviceDetail } from "@/api/bigWindow/getDevice.js";
export default {
  name: "",
  data() {
    return {
      selarr1: [1],
      searchShow: false,
      searchItemShow: false,
      searchVal: "",
      searchList: [],
      devviceData: {
        1: "阀井 :",
        2: "调压箱 :",
        3: "场站 :",
        4: "居民用户 :",
        5: "商业用户 :",
        6: "工业用户 :",
        7: "监控 :",
        8: "餐饮单位液化气用户 :",
        9: "管道 :",
      },
      arr: [
        {
          val: 3,
          ischeck: false,
          imgurl: require("@/assets/firstimage/famen1.png"),
          name: "阀门井",
        },
        {
          val: 4,
          ischeck: false,
          imgurl: require("@/assets/firstimage/changzhan1.png"),
          name: "场 站",
        },
        {
          val: 2,
          ischeck: false,
          imgurl: require("@/assets/firstimage/tiaoyaxiang1.png"),
          name: "调压箱",
        },
        {
          val: 1,
          ischeck: false,
          imgurl: require("@/assets/firstimage/guandao1.png"),
          name: "管道",
        },
        {
          val: 5,
          ischeck: false,
          imgurl: require("@/assets/firstimage/jiankong1.png"),
          name: "监 控",
        },
        {
          val: 6,
          ischeck: false,
          imgurl: require("@/assets/firstimage/user1.png"),
          name: "居民用户",
        },
        {
          val: 61,
          ischeck: false,
          imgurl: require("@/assets/firstimage/syUser1.png"),
          name: "工商业用户",
        },
        {
          val: 18,
          ischeck: false,
          imgurl: require("@/assets/firstimage/yhq1.png"),
          name: "餐饮用户",
        },
      ],
    };
  },
  methods: {
    searchChange() {
      this.searchShow = !this.searchShow;
      // 如果关闭了搜索框，那么搜索联动数据框也要关闭
      if (!this.searchShow) {
        this.searchItemShow = false;
      }
    },
    searchClick() {
      searchDevice({ name: this.searchVal }).then((res) => {
        if (res.code == 200) {
          this.searchList = Object.values(res.data).flat();
          this.searchItemShow = true;

          console.log(this.searchList);
        }
      });
    },
    deviceItemClick(item) {
      searchDeviceDetail({ type: item.type, id: item.id }).then((res) => {
        if (res.code == 200) {
          let data = null;
          // console.log(res);
          // console.log(item);

          // 1.阀井 iconType=3
          // 2.调压箱  iconType=2
          // 3.场站  iconType=4
          // 4.居民用户 6
          // 5.商业用户 61
          // 6.工业用户
          // 7.监控  5
          // 8.餐饮单位液化气用户 conType=18
          // 9.管道  1
          // 1,2,3的时候 是res.data.data才能获取数据，结构为数组。
          // 4，5 是 res.data就能获取数据，结构为数组
          // 7,8，9的时候，res.data能获取数据，结构为对象
          const type = item.type;
          if (type < 4) {
            data = res.data.data[0];

            if (type == 1) {
              data.iconType = 3;
            } else if (type == 2) {
              data.iconType = 2;
            } else {
              data.iconType = 4;
            }
          } else if (type < 7) {
            data = res.data[0];
            if (type == 4) {
              data.iconType = 6;
            } else if (type == 5) {
              data.iconType = 61;
            } else {
              data.iconType = 62;
            }
          } else {
            data = res.data;
            if (type == 7) {
              data.iconType = 5;
            } else if (type == 8) {
              data.iconType = 18;
            } else {
              data.iconType = 1;
            }
          }
          this.$emit("deviceSearchClick", item, data);
        }
      });
    },
    clearSearchContainer() {
      this.searchItemShow = false;
    },
    sel1(index, item) {
      const ind = this.selarr1.indexOf(item.val);
      if (ind >= 0) {
        this.selarr1.splice(ind, 1);
      } else {
        this.selarr1.push(item.val);
      }
      this.$emit("sel1", this.selarr1);
      // this.map.allfilter(this.selarr, this.selarr1);
    },
  },
};
</script>
<style lang="scss" scoped>
.typelist-div {
  transition: all 0.2s linear;
  width: 840px;
  // height: 96px;
  // height: 56px;
  z-index: 2000;
  position: fixed;
  top: 90px;
  margin-left: calc((100% - 840px) / 2);
  background: rgba(2, 41, 81, 0.25);
  border: 1px solid #275275;
  box-sizing: border-box;
  padding-top: 10px;
  transform: scale(1);
  .t {
    transition: all 0.2s linear;
    height: 40px;
    // background: blue;
    position: relative;
    overflow: hidden;
    &.show {
      height: 85px;
    }

    .list {

      z-index: 9999;
      float: left;
      margin-left: 15px;
      height: 28px;
      // margin-bottom:10px;
      color: #fff;
      line-height: auto;
      text-align: center;
      /* background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
  box-shadow: inset 0px 1px 2px 1px #125c9b; */
      font-size: 12px;
      padding: 1px 10px;
      cursor: pointer;
      line-height: 26px;
      background: rgba(31, 106, 215, 0.32);
      box-sizing: border-box;
      border: 1px solid #2d64b4;
      border-radius: 2px;
      &:hover {
        // opacity: 0.7;
      }
    }

    .list.active {

      /* background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
  box-shadow: inset 0px 1px 2px 1px #125c9b; */
      // font-size: 12px;
      // color: #00ffff;
      // border: 1px solid #0f6ca1;
      // box-shadow: inset 0px 0px 10px 1px #0f6ca1;
      // background-size: 100% 100%;
      // background-repeat: no-repeat;
      background: linear-gradient(180deg, #19d6fe 0%, #1684e5 100%);
      border-radius: 2px;
      box-sizing: border-box;
      border: 1px solid #72c1ff;
    }

    .list img {
      width: 20px;
      height: 20px;
    }
    .device-btn-wrapper {
      width: 790px;
      margin-right: 5px;
      flex-wrap: wrap;
    }
    .search {
      width: 785px;
      position: absolute;
      top: 40px;
      .input-wrapper {
        background: #082337;
        box-sizing: border-box;
        border: 1px solid #1a498e;
        margin-left: 15px;
        margin-right: 12px;
        box-sizing: border-box;
        // width: 600px;
        flex: 1;

        height: 28px;
        align-items: center;
        input {
          border: none;
          background: none;
          color: #fff;
          width: 100%;
          padding-left: 8px;

          &:focus {
            outline: none;
          }
        }
      }
      .btn-wrapper {
        width: 50px;
        height: 28px;
        color: #fff;
        text-align: center;
        line-height: 28px;
        background: linear-gradient(180deg, #19d6fe 0%, #1684e5 100%);
        box-sizing: border-box;
        border: 1px solid #72c1ff;
        cursor: pointer;
        &:hover {
          opacity: 0.7;
        }
      }
    }
    .img-wrapper {
      width: 28px;
      height: 28px;
      background: rgba(3, 39, 70, 0.8);
      border: 1px solid #125c98;
      margin-right: 10px;
      align-items: center;
      justify-content: center;

      img {
        width: 20px;
        height: 12px;
        transform: rotateZ(0deg);
        transition: all 0.2s linear;

        cursor: pointer;
        &.show {
          transform: rotateZ(180deg);
        }
      }
    }
    .bottom-line {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 280px;
      height: 1px;
      // background: red;
    }
  }
  .device-container {
    width: 838px;
    max-height: 400px;
    position: absolute;
    background: rgba(2, 41, 81, 0.7);
    border: 1px solid #275275;
    box-sizing: border-box;
    top: 100px;
    padding: 10px;
    padding-bottom: 0;
    overflow-y: auto;

    .devie-item {
      color: #fff;
      margin-bottom: 10px;
      height: 28px;
      line-height: 28px;
      cursor: pointer;
      box-sizing: border-box;
      padding: 0 2px;
      display: flex;
      .a {
        // width: 150px;
      }
      &:hover {
        // background: linear-gradient(180deg, #ffb464 0%, #e96310 100%);
      background: linear-gradient(180deg, #19d6fe 0%, #1684e5 100%);

      }
    }
  }
}
</style>
