<template>
  <div style="height: 100vh; background: rgb(243, 246, 251)">
    <div class="workspace column">
      <div class="row q-pa-md items-center" style="padding-bottom: 15px">
        <img
          src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_1.png"
          style="height: 30px"
        />
        <div class="col text-center">
          <SearchDocument @open-position="openFilePosition"></SearchDocument>
        </div>
        <div class="user">
          <UserCard></UserCard>
        </div>
      </div>
      <div class="col row">
        <div class="q-ml-md full-height column">
          <div class="col">
            <el-tooltip effect="dark" content="我的设计空间" placement="right">
              <div class="left-button" @click="redicetTo('/space')" :class="{'active':isWorkspace}">
                <span class="svg-icon svg-icon-primary svg-icon-2x">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    width="24px"
                    height="24px"
                    viewBox="0 0 24 24"
                    version="1.1"
                  >
                    <g
                      stroke="none"
                      stroke-width="1"
                      fill="none"
                      fill-rule="evenodd"
                    >
                      <rect x="0" y="0" width="24" height="24" />
                      <path
                        d="M12.7037037,14 L15.6666667,10 L13.4444444,10 L13.4444444,6 L9,12 L11.2222222,12 L11.2222222,14 L6,14 C5.44771525,14 5,13.5522847 5,13 L5,3 C5,2.44771525 5.44771525,2 6,2 L18,2 C18.5522847,2 19,2.44771525 19,3 L19,13 C19,13.5522847 18.5522847,14 18,14 L12.7037037,14 Z"
                        fill="#0b40fe"
                        opacity="0.3"
                      />
                      <path
                        d="M9.80428954,10.9142091 L9,12 L11.2222222,12 L11.2222222,16 L15.6666667,10 L15.4615385,10 L20.2072547,6.57253826 C20.4311176,6.4108595 20.7436609,6.46126971 20.9053396,6.68513259 C20.9668779,6.77033951 21,6.87277228 21,6.97787787 L21,17 C21,18.1045695 20.1045695,19 19,19 L5,19 C3.8954305,19 3,18.1045695 3,17 L3,6.97787787 C3,6.70173549 3.22385763,6.47787787 3.5,6.47787787 C3.60510559,6.47787787 3.70753836,6.51099993 3.79274528,6.57253826 L9.80428954,10.9142091 Z"
                        fill="#0b40fe"
                      />
                    </g>
                  </svg>
                </span>
              </div>
            </el-tooltip>
            <el-tooltip effect="dark" content="模板广场" placement="right">
              <div class="left-button q-mt-md" @click="openMarketHandler()">
                <span class="svg-icon svg-icon-primary svg-icon-2x">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    width="24px"
                    height="24px"
                    viewBox="0 0 24 24"
                    version="1.1"
                  >
                    <g
                      stroke="none"
                      stroke-width="1"
                      fill="none"
                      fill-rule="evenodd"
                    >
                      <polygon points="0 0 24 0 24 24 0 24" />
                      <circle
                        fill="#564bec"
                        opacity="0.3"
                        cx="15"
                        cy="17"
                        r="5"
                      />
                      <circle
                        fill="#564bec"
                        opacity="0.3"
                        cx="9"
                        cy="17"
                        r="5"
                      />
                      <circle
                        fill="#564bec"
                        opacity="0.3"
                        cx="7"
                        cy="11"
                        r="5"
                      />
                      <circle
                        fill="#564bec"
                        opacity="0.3"
                        cx="17"
                        cy="11"
                        r="5"
                      />
                      <circle
                        fill="#564bec"
                        opacity="0.3"
                        cx="12"
                        cy="7"
                        r="5"
                      />
                    </g>
                  </svg>
                </span>
              </div>
            </el-tooltip>
            <el-tooltip effect="dark" content="模板管理中心" placement="right" v-if="userInfo.isTemplate">
              <div class="left-button q-mt-md"  @click="redicetTo('/m')">
                <IconStarOne size="24" theme="filled" style="color:#564bec4d"></IconStarOne>
              </div>
            </el-tooltip>
          </div>

          <el-popover placement="right" ref="popoverRef" trigger="click" width="320">
            <template #reference>
              <div class="left-button q-mb-md" :class="{'active':!isWorkspace}" title="企业中心">
                <span class="svg-icon svg-icon-primary svg-icon-2x">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    width="24px"
                    height="24px"
                    viewBox="0 0 24 24"
                    version="1.1"
                  >
                    <g
                      stroke="none"
                      stroke-width="1"
                      fill="none"
                      fill-rule="evenodd"
                    >
                      <rect x="0" y="0" width="24" height="24" />
                      <path
                        d="M12.7442084,3.27882877 L19.2473374,6.9949025 C19.7146999,7.26196679 20.003129,7.75898194 20.003129,8.29726722 L20.003129,15.7027328 C20.003129,16.2410181 19.7146999,16.7380332 19.2473374,17.0050975 L12.7442084,20.7211712 C12.2830594,20.9846849 11.7169406,20.9846849 11.2557916,20.7211712 L4.75266256,17.0050975 C4.28530007,16.7380332 3.99687097,16.2410181 3.99687097,15.7027328 L3.99687097,8.29726722 C3.99687097,7.75898194 4.28530007,7.26196679 4.75266256,6.9949025 L11.2557916,3.27882877 C11.7169406,3.01531506 12.2830594,3.01531506 12.7442084,3.27882877 Z M12,14.5 C13.3807119,14.5 14.5,13.3807119 14.5,12 C14.5,10.6192881 13.3807119,9.5 12,9.5 C10.6192881,9.5 9.5,10.6192881 9.5,12 C9.5,13.3807119 10.6192881,14.5 12,14.5 Z"
                        fill="#564bec"
                      />
                    </g>
                  </svg>
                </span>
              </div>
            </template>
            <div class="q-pa-md rounded">
              <div class="row items-center"  v-if="!userInfo.it">
                <div class="text-info text-small col">未加入任何企业</div>
                <el-button type="primary" @click="createEnterpriseHandler" link icon="officeBuilding">立即创建企业</el-button>
              </div>
              <div class="row" v-if="userInfo.it">
                <el-avatar :size="50" :src="userInfo.logo" shape="square" fit="contain"></el-avatar>
                <div class="col q-ml-md">
                  <div class="text-weight-bld text-dark" style="font-size: 18px;">{{ userInfo.company }}</div>
                  <div class="text-small text-info q-mt-sm">有效期至：{{ userInfo.expire }}</div>
                </div>
              </div>
              <el-divider />
              <el-menu mode="vertical no-select">
                <el-menu-item index="1" class="rounded" v-if="!userInfo.it" @click="()=>visibleFind=true">
                  <el-icon><Plus /></el-icon>
                  <span>加入企业</span>
                </el-menu-item>
                <el-menu-item index="2" class="rounded" v-if="userInfo.it && (userInfo.ia || userInfo.ic)" @click="redicetTo('/a')">
                  <el-icon><Setting /></el-icon>
                  <span>管理团队/企业</span>
                </el-menu-item>
                <el-menu-item index="4" class="rounded" @click="showInviteHandler" v-if="userInfo.it && (userInfo.ia || userInfo.ic)">
                  <IconShareOne size="18" style="margin-right: 8px" />
                  <span>邀请成员</span>
                </el-menu-item>
                <el-menu-item index="3" class="rounded" @click="showExitHandler" v-if="userInfo.it">
                  <IconLogout size="18" style="margin-right: 8px" />
                  <span>退出团队/企业</span>
                </el-menu-item>
              </el-menu>
            </div>
          </el-popover>
        </div>
        <div class="q-mx-md col bg-white right-box row">
            <router-view />
        </div>
      </div>
    </div>
  </div>
  <OrderReview v-if="orderVisible && activeOrderId==''" :default-type="2" @close="()=>orderVisible=false"></OrderReview>
  <CreateEnterprise :order-id="activeOrderId"  v-if="orderVisible && activeOrderId!=''"  @close="()=>orderVisible=false"></CreateEnterprise>
  <invite-member v-if="showAddMember" :show-type="1" @close="()=>showAddMember=false"></invite-member>
  <join-enterprise></join-enterprise>
  <exit-tenant v-if="visibleExit" @close="()=>visibleExit=false"></exit-tenant>
  <find-team v-if="visibleFind" @close="()=>visibleFind=false"></find-team>
</template>

<script lang="ts" setup>
import { useUserStore } from "@/store/user";
import { storeToRefs } from "pinia";
import SearchDocument from "@/views/SellTemplate/components/SearchDocument.vue";
import UserCard from "@/components/User/UserCard.vue";
import CreateEnterprise from '@/views/components/Order/CreateEnterprise.vue'
import { Plus, Setting } from "@element-plus/icons-vue";
import { openNewBlank } from "@/utils/common";
import { useSellTemplateStore } from "@/store";
import { useRouter } from "vue-router";
import { reactive, ref } from "vue";
import OrderReview from '@/views/components/Order/Review.vue'
import { ElLoading } from "element-plus";
import OrderService from "@/services/OrderService";
import { ApiResult } from "@/configs/axios";
import InviteMember from "@/views/components/Team/InviteMember.vue";
import JoinEnterprise from "@/views/components/Team/JoinEnterprise.vue";
import ExitTenant from "@/views/components/Team/ExitTenant.vue";
import FindTeam from "@/views/components/Team/FindTeam.vue";

const { userInfo } = storeToRefs(useUserStore());

const sellStore = useSellTemplateStore()
const orderVisible = ref(false)
const router = useRouter()
const isWorkspace = ref(true) 
const activeOrderId = ref('')
const showAddMember=ref(false)
const visibleExit = ref(false)
const visibleFind = ref(false)
const popoverRef = ref()
const font = reactive({
  color: 'rgba(0, 0, 0, .15)',
})
isWorkspace.value = !router.currentRoute.value.path.includes('/space/cp')

const openMarketHandler = (type: string = "") => {
  openNewBlank(`/market/create${type}`);
};

const openFilePosition = (playload:any)=>{
    sellStore.setSaleSearchPosition(playload)
    let currentMenu = 0
    if(!playload.FormShare){
        currentMenu = playload.FileType==1?3:4
    } 
    else currentMenu = 2
    router.push({
      path:"/space/"+currentMenu
    })
}
const createEnterpriseHandler = async ()=>{
  const pageLoading = ElLoading.service({
    lock:true,
    text:'正在加载'
  })

  const response = await OrderService.GetActiveTenantOrderAsync()
  if(response.data.resultCode == ApiResult.SUCCESS){
    activeOrderId.value = response.data.data
  }else{
    activeOrderId.value = ''
  }
  pageLoading.close()
  orderVisible.value=true
}
const showInviteHandler = ()=>{
  showAddMember.value=true
  popoverRef.value?.hide?.()
}
const showExitHandler = ()=>{
  visibleExit.value= true
  popoverRef.value?.hide?.()
}
const redicetTo = (path:string)=>{
  isWorkspace.value = !path.includes('/space/cp')

  router.push({
      path
  })
}
</script>

<style>
.workspace{
    width: 100vw;
    height: 100vh;
    background: #e7edf1;
}
.left-button{
    width: 50px;
    height: 50px;
    padding: 14px;
    border-radius: 8px;
    cursor: pointer;
}
.left-button:hover{
    background: rgba(0,0,0,.05);
    
}
.left-button:hover .i-icon{
  color:#564bec !important;
}
.left-button.active{
    background: #FFF !important;
}
.right-box{
    border:1px solid #ddd;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}
</style>
