<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>
          </div>

          <el-popover placement="right" 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">
              <template v-if="!userInfo.it">
                <div class="row items-center">
                  <div class="text-info text-small col">未加入任何企业</div>
                  <el-button type="primary" @click="redicetTo('/space/cp')" link icon="officeBuilding">立即创建企业</el-button>
                </div>
                <el-divider />
                <el-menu mode="vertical">
                  <el-menu-item index="1">
                    <el-icon><Plus /></el-icon>
                    <span>加入企业</span>
                  </el-menu-item>
                  <el-menu-item index="2">
                    <el-icon><Setting /></el-icon>
                    <span>设置</span>
                  </el-menu-item>
                </el-menu>
              </template>
            </div>
          </el-popover>
        </div>
        <div class="q-mx-md col bg-white right-box row">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</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 { Plus, Setting } from "@element-plus/icons-vue";
import { openNewBlank } from "@/utils/common";
import { useSellTemplateStore } from "@/store";
import { useRouter } from "vue-router";
import { ref } from "vue";

const { userInfo } = storeToRefs(useUserStore());
const sellStore = useSellTemplateStore()
const router = useRouter()
const isWorkspace = ref(true) 
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:"/"+currentMenu
    })
}

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.active{
    background: #FFF !important;
}
.right-box{
    border:1px solid #ddd;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}
</style>
