<template>
  <div class="space-home">
    <div class="com-search">
      <van-search
        placeholder="搜索办公区"
        v-model="searchValue"
        @update:model-value="onSearch"
        @clear="onCancel"
      />
      <div class="search-icon">
          <img :src="parseImgUrl('search-icon', 'search-icon.svg')" alt="" />
        </div>
    </div>
    <div class="space-box">
      <template v-if="spaceData && spaceData.length">
        <div
          class="space-item"
          :class="
            activeSpace.spaceId == item.spaceId ? 'space-active-item' : ''
          "
          :key="'spaceItem' + index"
          @click="changeSpace(item, index)"
          v-for="(item, index) in spaceData"
        >
          <span> {{ item.spaceName }}</span>
        </div>
      </template>
    </div>
  </div>
</template>
  
  <script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  ref,
  watch,
} from "vue";
import { useRouter } from "vue-router";
import { getUserInfo, newNumber, parseImgUrl } from "@/utils";
import { UserActionTypes } from "@/store/modules/user/action-types";
import { useStore } from "@/store";
import { login } from "@/apis/user";
import { Search, Toast } from "vant";
import { setToken } from "@/utils/cookies";
import { queryWorkSpace } from "@/apis/envmonitor";

export default defineComponent({
  props: {
    spaceData: {
      type: Array,
      default: () => [],
    },
    spaceInfo: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    vanSearch: Search,
  },
  setup(props, contx) {
    let router: any = useRouter();
    const userInfo: any = getUserInfo();
    const store = useStore();
    const spaceData: any = [];
    const proxyData = reactive({
      parseImgUrl:parseImgUrl,
      userInfo: userInfo,
      spaceData: spaceData,
      searchValue: "", // 搜索val
      activeSpace: props.spaceInfo,
      changeSpace(item: any, index: any) {
        // debugger;
        proxyData.activeSpace = item;
        console.log(proxyData.activeSpace);
        contx.emit("changeSpace", item);
      },
      queryWorkSpace() {
        let params: any = {
          criteria: {
            //类型：Object  必有字段  备注：无
            projectId: proxyData.userInfo.projectId,
            spaceName: proxyData.searchValue,
            macAddress: proxyData.userInfo.mac, //类型：String  必有字段  备注：mac地址
          },
          orders: [
            //类型：Array  必有字段  备注：无
            {
              //类型：Object  必有字段  备注：无
              column: "isMajorSpace", //类型：String  必有字段  备注：无
              asc: false, //类型：Boolean  必有字段  备注：无
            },
          ],
        };
        queryWorkSpace(params).then((res) => {
          let resData: any = res;
          if (resData.result === "success") {
            proxyData.spaceData = resData?.content ?? [];
          } else {
            proxyData.spaceData = [];
          }
        });
      },
      // 搜索
      onSearch() {
        proxyData.queryWorkSpace();
      },
      // 取消搜索
      onCancel() {},
    });
    onMounted(() => {});
    watch(
      props,
      (newProps: any) => {
        proxyData.spaceData = newProps.spaceData;
        proxyData.activeSpace = newProps.spaceInfo;
      },
      {
        deep: false,
        immediate: true,
      }
    );
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
  <style lang="scss" scoped>
.space-home {
  padding: 20px;
  width: 100%;
  height: 100%;
  background: $elBg;
  .space-box {
    .space-item {
      display: inline-block;
      margin-top: 20px;
      margin-right: 2%;
      width: 31.8%;
      height: 100px;
      background: #fff;
      box-shadow: inset 0px -1px 0px #e4e6e7;
      border-radius: 25px;
      span {
        display: block;
        width: 100%;
        line-height: 100px;
        text-align: center;
        font-size:16px;
      }
      &:nth-child(3n) {
        margin-right: 0;
      }
    }

    .space-active-item {
      background: $elActive4;
      color: #fff;
    }
  }
}
</style>
  