<template>
  <div class="set-main-space content-box">
    <div
      class="space-item"
      @click="checkMainSpace(item)"
      v-for="(item, index) in spaceData"
      :key="'space' + index"
    >
      <van-swipe-cell>
        <van-cell :border="false" :title="item.spaceName" />
        <template #right>
          <van-button square type="danger" text="删除" />
        </template>
      </van-swipe-cell>
    </div>

    <van-popup v-model:show="show">
      <div class="tip">
        正在设置主空间,设置成功后,将关闭弹窗,并且进入空间页面
      </div>
    </van-popup>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
} from "vue";
import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
import { SwipeCell, Cell, Popup, Button, Dialog, Loading } from "vant";
import { getUserInfo, parseImgUrl } from "@/utils";
import { queryWorkSpace, saveWorkSpace } from "@/apis/envmonitor";

export default defineComponent({
  components: {
    VanSwipeCell: SwipeCell,
    VanCell: Cell,
    // VanPopup: Popup,
    VanButton: Button,
    VanDialog: Dialog,
  },
  setup() {
    const proxyGlobal: any = getCurrentInstance();
    const userInfo: any = getUserInfo();
    const spaceData: any = [];
    const router: any = useRouter();
    const proxyData = reactive({
      show: false,
      userInfo: userInfo,
      loaging: false,
      parseImgUrl: parseImgUrl,
      // 格式化提交的数据
      formateData(item: any) {
        let params: any = {
          workSpaceList: [],
          majorSpaceId: "", //类型：String  必有字段  备注：主空间
          macAddress: proxyData.userInfo.mac, //类型：String  必有字段  备注：平板地址
        };
        proxyData.spaceData.map((space: any) => {
          if (item.spaceId === space.spaceId) {
            params.majorSpaceId = space.spaceId;
          }
          params.workSpaceList.push(space.spaceId);
        });
        return params;
      },
      // 选择主空间
      checkMainSpace(item: any) {
        if (!proxyData.loaging) {
          let params: any = proxyData.formateData(item);
          proxyData.saveWorkSpace(params);
        }
      },
      // 保存空间
      saveWorkSpace(params: any) {
        proxyData.loaging = true;
        proxyGlobal.proxy.$toast.loading({
          forbidClick: true,
          duration: 0, // 如果大于0则不必使用destory方法
          message: "正在设置主空间...",
        });
        saveWorkSpace(params)
          .then((res) => {
            proxyData.closeLoading();
            router.push({
              name: "envmonitor",
              query: { spaceId: params.majorSpaceId },
            });
          })
          .catch(() => {
            proxyData.closeLoading();
          });
      },
      closeLoading() {
        proxyGlobal.proxy.$toast.clear();
        proxyData.loaging = false;
      },
      spaceData: spaceData,
      queryWorkSpace() {
        let params: any = {
          criteria: {
            //类型：Object  必有字段  备注：无
            macAddress: proxyData.userInfo.mac, //类型：String  必有字段  备注：mac地址
          },
        };
        queryWorkSpace(params).then((res) => {
          let resData: any = res;
          if (resData.result === "success") {
            proxyData.spaceData = resData?.content ?? [];
          } else {
            proxyData.spaceData = [];
          }
          // 默认都不是主空间
          proxyData.spaceData.map((item: any) => {
            item.isMajorSpace = 0;
          });
        });
      },
    });
    onMounted(() => {
      proxyData.queryWorkSpace();
    });
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
<style lang="scss" scoped>
.set-main-space {
  .space-item {
    background: #fff;
    font-family: "Noto Sans SC";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    display: flex;
    align-items: center;
    color: #1f2429;
    border-bottom: 1px solid #e4e6e7;
  }
  .tip {
    width: 200px;
    padding: 20px;
    border-radius: 5px;
  }
}
</style>
<style lang="scss">
.set-main-space {
  .van-cell {
    padding: 0 !important;
  }
  .van-swipe-cell {
    // padding: 20px 0px 20px 28px;
    width: 100%;
    padding-left: 20px;
    line-height: 66px;
    height: 66px;
  }
  .van-cell__title {
    font-size: 16px;
    line-height: 66px;
    height: 66px;
    padding: 0 !important;
  }
  .van-swipe-cell__right {
    height: 100%;
    top: -6px;
  }
  .van-button--square {
    height: 100%;
  }
  .van-button--danger {
    background: $elDeleteColor !important;
    border: 1px solid $elDeleteColor !important;
  }
}
</style>

