<template>
  <div class="space-home">
    <div class="com-search">
      <van-search placeholder="搜索办公区"  
                  v-model="searchValue"
                  @update:model-value="onSearch"
                  @clear="onCancel" />
    </div>
    <div class="space-box">
      <div
        class="space-item"
        :key="'spaceItem' + index"
        @click="changeSpace(item)"
        v-for="(item, index) in spaceData"
      >
        <span> {{ item.spaceName }}</span>
      </div>
    </div>
  </div>
</template>
  
  <script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  ref,
  watch,
} from "vue";
import { useRouter } from "vue-router";
import { 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";

export default defineComponent({
  props: {
    spaceData: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    vanSearch: Search,
  },
  setup(props, contx) {
    let router: any = useRouter();
    const store = useStore();
    const spaceData: any = [];
    const proxyData = reactive({
      spaceData: spaceData,
      searchValue:'',  // 搜索val
      changeSpace(item: any) {
        contx.emit("changeSpace", item);
      },
      // 搜索
      onSearch(){
        console.log("====")
        console.log(proxyData.searchValue)
      },
      // 取消搜索
      onCancel(){

      }
    });
    onMounted(() => {});
    watch(
      props,
      (newProps: any) => {
        proxyData.spaceData = newProps.spaceData;
      },
      {
        deep: false,
        immediate: true,
      }
    );
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
  <style lang="scss" scoped>
.space-home {
  padding: 20px;
  width: 100%;
  height: 100%;
  background: $elBg;
  .space-box {
    // display: flex;
    // padding-top: 20px;
    // justify-content: space-between;
    .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;
      }
      &:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
}
</style>
  