<template>
  <div class="choice-project com-search">
    <van-search
      placeholder="请输入搜索关键词"
      v-model="searchVal"
      @update:model-value="onSearch"
      @cancel="onCancel"
    />
    <div class="choice-content">
      <div
        class="choice-item"
        :key="index+''+item.localName"
        @click="goCheckSpace(item)"
        v-for="(item, index) in projects"
      >
        {{ item.localName }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, nextTick, onMounted, reactive, toRefs } from "vue";
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import { Search, Toast } from "vant";
import router from "@/router";
import { getUsersInfo } from "@/apis/user";
import { store } from "@/store";
import { UserMutationTypes } from "@/store/modules/user/mutation-types";
import { getCookieMac } from "@/utils/cookies";

export default defineComponent({
  components: {
    vanSearch: Search,
  },
  beforeRouteLeave(to, from, next) {
    console.log("导航");
    console.log(to);
    console.log(from);
    console.log("=====");
    if (to.name === "home") {
      let mac: any = getCookieMac();
      to.fullPath = to.fullPath + `?mac=${mac}`;
      to.query.mac = mac;
    }
    next();
  },
  setup() {
    const route: any = useRoute();
    const projects: any = [];
    const proxyData = reactive({
      route: route,
      transitionName: "slide-right",
      showHeader: false,
      // 去选择空间
      goCheckSpace(item: any) {
        store.commit(UserMutationTypes.SET_PROJECT_ID, item.id);
        router.push({ path: "/choice-space", query: { id: item.id } });
      },
      projects: projects,
      cloneProjects: projects,
      getUsersInfo() {
        getUsersInfo().then((res) => {
          let resData: any = res;
          if (resData.result === "success") {
            let projects: any = resData?.projects ?? [];
            proxyData.cloneProjects = JSON.parse(JSON.stringify(projects));
            proxyData.projects = projects;
          } else {
            Toast("登录过期,请重新扫码进入!");
            router.push({ name: "home" });
          }
        });
      },
      searchVal: "",
      onSearch() {
        // console.log(proxyData.searchVal);
        proxyData.fuzzyQuery(proxyData.searchVal);
      },
      onCancel() {},
      // 搜索
      fiflterName(list: any, keyWord: any) {
        if (keyWord != "") {
          let reg: any = new RegExp(keyWord);
          let arr: any = [];
          for (let i = 0; i < list.length; i++) {
            if (reg.test(list[i].localName)) {
              //这里匹配的是数组中微信号名称以及公众号id，可根据业务需求自行修改！
              arr.push(list[i]);
            }
          }
          return arr; //返回符合条件的数组
        } else {
          return list;
        }
      },
      // 模糊匹配
      fuzzyQuery(val: any) {
        let arr: any = JSON.parse(JSON.stringify(proxyData.cloneProjects));
        if (val) {
          proxyData.projects = proxyData.fiflterName(arr, val);
        } else {
          proxyData.projects = arr;
        }
      },
    });
    onMounted(() => {
      proxyData.getUsersInfo();
    });
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
<style lang="scss" scoped>
.choice-project {
  width: 100%;
  // height: 100%;
  background: #fff;
  padding: 5px 20px;
}
</style>
<style lang="scss">
.choice-project {
  .choice-content {
    padding-top: 10px;
    .choice-item {
      padding: 20px 10px;
      font-family: "Noto Sans SC";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      line-height: 26px;
      color: #1f2429;
      border-bottom: 1px solid #e4e6e7;
    }
  }
}
</style>
