aida_front/src/views/HomeMain.vue

<template>
  <div class="homeMain_max">
    <div class="leftBox" :class="{ leftHide: leftShow }">
      <div class="left">
        <div class="title">
          <!-- <span>AiDA</span> -->
          <img
            src="@/assets/images/homePage/aidaIcon.png"
            alt=""
            @click="() => $router.push('/home')"
          />
          <svg
            @click="() => (leftShow = !leftShow)"
            class="leftShowOrHide"
            xmlns="http://www.w3.org/2000/svg"
            width="2rem"
            height="2rem"
            fill="currentColor"
            viewBox="0 0 24 24"
            data-v-1c7326d6=""
          >
            <path
              fill-rule="evenodd"
              d="M6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2V5H6Zm4 0v14h8a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-8ZM3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Z"
              clip-rule="evenodd"
              data-v-1c7326d6=""
            ></path>
          </svg>
        </div>
        <div class="newObj" :class="{ active: isNewProject }" @click="newProject">
          <!-- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 24"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.5 5v14m-7-7h14"></path></svg> -->

          <svg
            width="19"
            height="16"
            viewBox="0 0 19 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <line
              x1="9.83398"
              y1="1"
              x2="9.83398"
              y2="15"
              stroke="black"
              stroke-width="4"
              stroke-linecap="round"
            />
            <path
              d="M1.5 8H17.5"
              stroke="black"
              stroke-width="4"
              stroke-linecap="round"
            />
          </svg>
          <p>{{ $t('Header.NewProject') }}</p>
        </div>
        <div
          class="current-projct"
          @click="handleNavigateToCurrentProject"
          :class="{
            disabled: disabledCurrentProject,
            filled: !disabledCurrentProject,
            active: currentProjectActive
          }"
        >
          <FolderOpenOutlined class="current-project-icon" />
          <span>{{ $t('Habit.currentProject') }}</span>
        </div>
        <div class="divider" />
        <div class="navList">
          <div
            class="tools list"
            v-for="item in navTypeList"
            :class="{
              'active': openType == item.value,
              'history': item.value == 'history',
              'show-history': showHistory && item.value === 'history',
              'isHistory': item.value === 'history'
            }"
          >
            <div class="titleBox" @click="setOpenType(item)">
              <div class="left">
                <i :class="['fi', item.icon]"></i>
                <span>{{ item.label }}</span>
              </div>
              <div class="right" v-if="item.value !== 'history'">
                <i class="fi fi-br-angle-small-down"></i>
              </div>
            </div>
            <div class="detailBox" v-if="item.value != 'history'" v-show="openType">
              <div
                class="detail"
                v-if="item.value != 'history' && item.value != 'cloud'"
                v-show="openType == item.value"
              >
                <div
                  class="detailItem"
                  v-for="childItem in item.list"
                  @click="setRouter(item, childItem)"
                  :class="{ active: openTypeChild == childItem.value }"
                >
                  <i v-show="childItem.icon" :class="['fi', childItem.icon]"></i>
                  <div class="text">
                    <span>{{ childItem.label }}</span>
                  </div>
                </div>
              </div>
              <!-- <div class="detail" v-else-if="item.value == 'history'" style="height: auto;">
								<div v-for="historyTypeItem in historyData.updateTimeType" :key="historyTypeItem">
									<div class="timeType" v-if="historyTypeItem == 'Todaylist' && item.Todaylist.length>0">{{$t('Header.Today')}}</div>
									<div class="timeType" v-if="historyTypeItem == 'Yesterdaylist' && item.Yesterdaylist.length>0">{{$t('Header.Yesterday')}}</div>
									<div class="timeType" v-if="historyTypeItem == 'WithinAWeeklist' && item.WithinAWeeklist.length>0">{{$t('Header.WithinAWeek')}}</div>
									<div class="timeType" v-if="historyTypeItem == 'Earlierlist' && item.Earlierlist.length>0">{{$t('Header.Earlier')}}</div>
									<div v-for="childItem,index in item[historyTypeItem]" :key="childItem.name" class="detailItem history" @click="setHistory(item,childItem)" :class="{active:openTypeChild == childItem.id}">
										<div class="text" style="width: 100%;">
											<span :title="childItem.name" v-show="!childItem.editName">{{ childItem.name }}</span>
											<textarea v-model="historyData.historyTextarea" v-show="childItem.editName" @click.stop></textarea>
										</div>
										<div class="type">{{ $t(`Header.${childItem.process}`) }}</div>
										<div class="time">{{ childItem?.updateTime?.replace('T', ' ') }}</div>
										<div class="btn">
											<i class="fi fi-br-menu-dots-vertical" v-show="!childItem.editName" @click.stop="editHistory(childItem,index,$event,item[historyTypeItem])"></i>
											<i class="fi fi-br-check" v-show="childItem.editName" @click.stop="accomplishHistory(childItem,index,$event)"></i>
											<div class="operation" v-show="historyData.selectHistoryId == childItem.id">
												<div class="item" @click.stop="editName(childItem)">
													<i class="fi fi-rr-edit"></i>
													<span>{{$t('Header.Rename')}}</span>
												</div>
												<div class="item" v-if="childItem.process == 'SINGLE_DESIGN' || childItem.process == 'SERIES_DESIGN'" @click.stop="setting(childItem)">
													<i class="fi fi-rr-settings-sliders"></i>
													<span>{{$t('Header.Setting')}}</span>
												</div>
												<div class="item" @click.stop="deleteItem(childItem)">
													<i class="icon iconfont icon-shanchu operate_icon"></i>
													<span>{{$t('Header.Delete')}}</span>
												</div>
											</div>
										</div>
									</div>
								</div>
								
								<div v-show="!historyData.isNoData" class="material_content_list_loding">
									<span class="historyPage_loading" v-show="!historyData.isShowLoading"></span>
									<span v-show="historyData.isShowLoading">
										<a-spin size="large" />
									</span>
								</div>
								<img v-show="historyData.isNoData && historyData.isNull" src="@/assets/images/homePage/null_img.png">
							</div> -->
            </div>
          </div>
        </div>
        <div class="navListBottom">
          <!-- <div class="tools marginT2 marginB2 list" :class="{active:$route.name == 'cloud'}" @click="()=>$router.push('/home/cloud')">
						<div class="titleBox" style="margin-bottom: 0;">
							<div class="left">
								<i class="fi fi-rr-cloud-upload-alt"></i>
								<span>{{$t('Header.BatchGeneration')}}</span>
							</div>
						</div>
					</div> -->
          <div class="tools list" :class="{ active: isLanguage }">
            <div class="titleBox" @click="() => (isLanguage = !isLanguage)">
              <div class="left">
                <i class="fi fi-br-globe"></i>
                <span>{{ $t('Header.Language') }}</span>
              </div>
              <div class="right">
                <i class="fi fi-br-angle-small-down"></i>
              </div>
            </div>
            <div class="detailBox">
              <div class="detail" v-show="isLanguage">
                <div
                  class="detailItem"
                  v-for="item in language"
                  :class="{ active: locale == item.value }"
                  @click="setLocale(item.value)"
                >
                  <svg
                    v-show="locale == item.value"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 14 14"
                    class="dark-icon sidebar-lang-icon"
                    width="20"
                    height="20"
                  >
                    <path
                      stroke="#52525b"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.167"
                      d="M11.667 3.5 5.25 9.917 2.334 7"
                    ></path>
                  </svg>
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="segmentation"></div>
        <div
          v-if="userDetail.systemUser == 0 || userDetail.systemUser == 3"
          @click="openUpgradeToPro"
          class="gallery_btn gallery_btn_radius"
          style="width: 100%; display: flex; justify-content: center; align-items: center"
        >
          <i class="fi fi-br-dollar" style="margin-right: 0.6rem; display: flex"></i>
          {{ $t('Header.openUpgrade') }}
        </div>
      </div>
    </div>
    <div class="rightBox">
      <div class="right">
        <div class="user">
          <div class="left" v-show="leftShow">
            <svg
              @click="() => (leftShow = !leftShow)"
              class="leftShowOrHide"
              xmlns="http://www.w3.org/2000/svg"
              width="3rem"
              height="3rem"
              fill="currentColor"
              viewBox="0 0 24 24"
              data-v-1c7326d6=""
            >
              <path
                fill-rule="evenodd"
                d="M6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2V5H6Zm4 0v14h8a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-8ZM3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Z"
                clip-rule="evenodd"
                data-v-1c7326d6=""
              ></path>
            </svg>
            <div class="newObj marginT2" @click="newProject">
              <svg
                width="19"
                height="16"
                viewBox="0 0 19 16"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <line
                  x1="9.83398"
                  y1="1"
                  x2="9.83398"
                  y2="15"
                  stroke="black"
                  stroke-width="4"
                  stroke-linecap="round"
                />
                <path
                  d="M1.5 8H17.5"
                  stroke="black"
                  stroke-width="4"
                  stroke-linecap="round"
                />
              </svg>
              <p style="white-space: nowrap">{{ $t('Header.NewProject') }}</p>
            </div>
          </div>
          <div class="trialApproval">
            <div class="message_iconItem" style="display: flex">
              <i
                class="fi fi-rs-interrogation"
                style="font-size: 2.4rem"
                @click="toUserManual"
              ></i>
            </div>
            <div class="message_iconItem" style="display: flex">
              <a-badge :count="messageNum">
                <i
                  class="fi fi-rr-envelope"
                  style="font-size: 2.4rem"
                  @click="openMessage"
                ></i>
              </a-badge>
            </div>
            <div class="message_iconItem" style="display: flex">
              <a-badge :count="messageType?.newPosted">
                <!-- <i class="fi fi-rr-envelope" @click="openMessage"></i> -->
                <i
                  class="fi fi-rr-bell"
                  style="font-size: 2.4rem"
                  @click.stop="openNewPosted"
                ></i>
              </a-badge>
              <div
                class="message_iconItem_value select_block"
                v-show="isNewPosted"
                style="width: 40rem"
              >
                <newPosted ref="newPosted"></newPosted>
              </div>
            </div>
          </div>
          <div class="homeMain_right_content">
            <div class="button_second credits hideChecked">
              {{ $t('Header.Credits') }}:&nbsp;
              <span :title="credits">
                <div
                  class="credits_item"
                  v-for="item in String(credits)"
                  :style="{ transform: 'translateY(' + item * -100 + '%)' }"
                >
                  <div v-if="item != '.'" v-for="numItem in 10">{{ numItem - 1 }}</div>
                  <div v-else>{{ item }}</div>
                </div>
              </span>
              <i
                @click="getCredits"
                class="fi fi-br-refresh"
                :class="[activeCredits ? 'active' : '']"
              ></i>
              <i @click="UpgradePlan" title="Purchase" class="fi fi-rr-shop"></i>
            </div>
          </div>
          <div class="homeMain_user">
            <div class="homeMain_user_icon" @click="openAccount">
              <img :src="userDetail.avatar" alt="" />
            </div>
            <div class="homeMain_user_detail">
              <div class="homeMain_user_icon" @click="openAccount">
                <img :src="userDetail.avatar" alt="" />
              </div>
              <div v-if="userDetail.systemUser == 3" class="username">
                {{ $t('Header.hello') }}@{{ $t('isTest.userName') }}
              </div>
              <div v-else class="username">
                {{ $t('Header.hello') }}@{{ userDetail.userName }}
              </div>
              <div class="homeMain_user_detail_attention">
                <div class="attention_item">
                  <!-- 点击事件就用下面的div -->
                  <div>{{ userDetail?.followeeCount }}</div>
                  <span>{{ $t('account.Follow') }}</span>
                </div>
                <div class="attention_item">
                  <div>{{ userDetail?.followerCount }}</div>
                  <span>{{ $t('account.Fans') }}</span>
                </div>
              </div>
              <div class="homeMain_subscribe">
                <div>
                  <span class="font">{{ $t('account.Status') }}</span>
                  <span v-if="userDetail.timeData.isExpiration" class="stateSucsess font">
                    {{ $t('account.Valid') }}
                    <i class="fi fi-ss-check-circle"></i>
                  </span>
                  <span v-else class="stateError font">
                    {{ $t('account.Expire') }}
                    <i class="fi fi-ss-check-circle"></i>
                  </span>
                  <span class="time">{{ userDetail.timeData.text }}</span>
                </div>
              </div>
              <div class="homeMain_select">
                <!-- <div class="select_item_box" @click.stop="isLanguage = !isLanguage">
									<div class="select_item">
										<span class="icon iconfont icon-yuyan"></span>
										<span class="select_item_des">{{$t('Header.language')}}</span>
										<span class="icon iconfont icon-xiala" :class="{'active': isLanguage}"></span>
									</div>
									<ul class="select_list" :class="{'active': isLanguage}" @click.stop="">
										<li class="select_item" v-for="item in language"  @click="setLocale(item.value)">
											<span class="select_item_des">{{ item.name }}</span>
										</li>
									</ul>
								</div> -->
                <div class="select_item" @click="orderForm()">
                  <i class="fi fi-rs-notebook"></i>
                  <span class="select_item_des">{{ $t('Header.ViewOrders') }}</span>
                </div>
                <router-link
                  class="select_item"
                  v-if="userDetail.systemList.indexOf(3) >= 0"
                  :to="`/administrator`"
                >
                  <span class="icon iconfont icon-yonghu"></span>
                  <span class="select_item_des">{{ $t('Header.Administrator') }}</span>
                </router-link>
                <router-link
                  class="select_item"
                  :to="`/Affiliate`"
                  v-if="userDetail.systemList.indexOf(2) >= 0"
                >
                  <span class="icon iconfont icon-yonghu"></span>
                  <span class="select_item_des">{{ $t('Header.Affiliate') }}</span>
                </router-link>
                <div class="select_item" @click="getTutorial()">
                  <span class="fi fi-rr-book-user"></span>
                  <span class="select_item_des">{{ $t('Header.Tutorial') }}</span>
                </div>
                <div class="select_item_long"></div>
                <div class="select_item" @click="logout()">
                  <span class="icon iconfont icon-tuichu"></span>
                  <span class="select_item_des">{{ $t('Header.logOff') }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="routerView">
          <div class="userSystem" v-show="pastDuePage">
            {{ $t('Header.pastDue') }}
          </div>
          <div class="router" v-if="!getLangIsShowMark">
            <home
              ref="home"
              @setNewProject="() => (leftShow = true)"
              @setTask="setTask"
            ></home>
          </div>
        </div>
      </div>
    </div>

    <payOrder ref="payOrder"></payOrder>
    <UpgradePlan ref="UpgradePlan"></UpgradePlan>
    <TaskPage ref="TaskPage"></TaskPage>

    <div class="mark_loading" v-show="getLangIsShowMark">
      <a-spin size="large" />
    </div>
    <!-- <RobotAssist v-if="!getLangIsShowMark"></RobotAssist> -->
    <scaleVideo ref="scaleVideo"></scaleVideo>
    <!-- 进行续订 -->
    <renew ref="renew"></renew>
    <projectSetting ref="projectSetting" @getHistory="settingGetHistory"></projectSetting>
    <!-- 未绑定邮箱弹窗 -->
    <bindEmail ref="bindEmail"></bindEmail>
  </div>
</template>
<script>
import {
  defineComponent,
  createVNode,
  ref,
  toRefs,
  reactive,
  computed,
  onMounted,
  nextTick,
  watch,
  provide,
  defineAsyncComponent
} from 'vue'
import { isEmail } from '@/tool/util'
import { setCookie, getCookie, WriteCookie, clonAllCookie } from '@/tool/cookie'
import payOrder from '@/component/Pay/payOrder.vue'
import renew from '@/component/HomePage/renew.vue'
// import Habit from "@/component/Detail/habit.vue";
import TaskPage from '@/component/HomePage/TaskPage.vue'
import UpgradePlan from '@/component/HomePage/UpgradePlan.vue'
import { Https } from '@/tool/https'
import { Modal, message } from 'ant-design-vue'
import { ExclamationCircleOutlined, FolderOpenOutlined } from '@ant-design/icons-vue'
import RobotAssist from '@/component/HomePage/RobotAssist.vue'
import scaleVideo from '@/component/HomePage/scaleVideo.vue'
import newPosted from '@/component/HomePage/newPosted.vue'
import { useStore } from 'vuex'
import { setLang } from '@/tool/guide'
import showViewVideo from '@/tool/mount'
import { useI18n } from 'vue-i18n'
import { gsap, TweenMax, TweenLite } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import MyWs from '@/tool/webSocket'
import MyEvent from '@/tool/myEvents'
import { useRouter, useRoute } from 'vue-router'
import { navTypeList } from '@/tool/listData.js'
import home from '@/component/home/index.vue'
import projectSetting from '@/component/home/newProject/setting.vue'
import bindEmail from '@/component/HomePage/bindEmail.vue'
// const home = defineAsyncComponent(() =>
//   import('@/component/home/index.vue')
// )
export default defineComponent({
  components: {
    renew,
    // Habit,
    RobotAssist,
    scaleVideo,
    newPosted,
    UpgradePlan,
    payOrder,
    TaskPage,
    home,
    projectSetting,
    bindEmail,
    FolderOpenOutlined
  },
  setup() {
    const store = useStore()
    const { t } = useI18n()
    const { locale } = useI18n()
    const route = useRoute()
    const router = useRouter()
    const homeMainData = reactive({
      leftShow: false,
      openType: '',
      openTypeChild: '',
      isLanguage: false,
      userDetailLanguage: computed(() => store.state.UserHabit.userDetail.language),
      navTypeList: navTypeList(t),
      projectSetting: null,
      historyData: {
        isNoData: false,
        isShowLoading: false,
        isNull: false,
        searchCollectionName: '',
        historyTextarea: '',
        updateTimeType: ['Todaylist', 'Yesterdaylist', 'WithinAWeeklist', 'Earlierlist'],
        selectHistoryId: -1,
        page: 1,
        size: 10,
        isToday: false,
        isYesterday: false,
        isWithinAWeek: false,
        isEarlier: false
      },
      bathGenerationList: ['poseTransfer', 'SERIES_DESIGN', 'toProduct', 'relight'],
      showHistory: false,
      isNewProject: false
    })
    let userDetail = computed(() => {
      return store.state.UserHabit.userDetail
    })
    const pastDuePage = computed(() => {
      const isAllowedRoute = route.path === '/home/events' || route.path === '/home/works'
      const hasNoSystemAccess = userDetail.value.systemList.indexOf(1) === -1
      return hasNoSystemAccess && !isAllowedRoute
    })
    watch(
      () => homeMainData.userDetailLanguage,
      newVal => {
        if (locale.value == newVal || !newVal) return
        locale.value = newVal
        let navList = navTypeList(t)
        for (const key in navList) {
          const element = navList[key]
          homeMainData.navTypeList[key].label = element.label
          if (element.list?.length > 0) {
            element.list.forEach((item, index) => {
              homeMainData.navTypeList[key].list[index].label = item.label
            })
          }
        }
      }
    )

    // watch(()=>locale.value,(newVal,oldVal)=>{
    // 	if(newVal == oldVal)return
    // 	console.log(newVal , oldVal)
    // 	// homeMainData.navTypeList =
    // })

    const historyData = reactive({})
    const getIdExistToHistory = async () => {
      return await new Promise((resolve, reject) => {
        let value = {
          id: Number(route.query?.id || route.query?.history)
        }
        Https.axiosPost(Https.httpUrls.historyProject, value)
          .then(rv => {
            resolve(rv.content.length > 0)
          })
          .catch(() => {
            resolve(false)
          })
      })
    }
    watch(
      () => route.query,
      (query, oldQuery) => {
        nextTick(async () => {
          const key = Object.keys(query)?.[0]
          if (key) {
            if (query.id) {
              homeMainData.openType = 'history'
              homeMainData.openTypeChild = query.id
            } else {
              homeMainData.openType = Object.keys(query)[0]
              homeMainData.openTypeChild = query[Object.keys(query)[0]]
            }
            if (homeMainData.openType === 'history' && route.path !== '/home/history') {
              homeMainData.openTypeChild = ''
              homeMainData.openType = ''
            }
            if ((query?.id || query?.history) && !(await getIdExistToHistory())) {
              router.push('/home')
              return
            }
          } else {
            homeMainData.openType = ''
            homeMainData.openTypeChild = ''
          }

          if (
            query.create == 'true' ||
            query?.source == 'batch' ||
            (query.history && query.type == 'Works')
          ) {
            settingGetHistory()
          }
        })
      },
      { immediate: true } // 立即触发一次以处理初始参数
    )

    // 监听路由,当路由地址为/home/history时homeMainData.showHistory为true,改变左侧菜单颜色
    watch(
      [() => route.path, () => route.fullPath],
      ([path, fullPath]) => {
        if (route.path == '/home/history') {
          homeMainData.showHistory = true
        } else {
          homeMainData.showHistory = false
        }
        // 当fullPath为/home时表示在新建项目
        if (route.fullPath === '/home') {
          homeMainData.isNewProject = true
        } else {
          homeMainData.isNewProject = false
        }
      },
      { immediate: true }
    )

    let isMurmur = ref()
    let credits = computed(() => {
      return store.state.UserHabit.credits.value
    })

    let activeCredits = ref(false)
    let getLangIsShowMark = ref(true)
    let messageNum = computed(() => {
      return store.state.UserHabit.messageSystem.messageNum
    })
    let messageType = computed(() => {
      return store.state.UserHabit.messageSystem.messageType
    })
    let stateList = reactive({
      isNewPosted: false,
      isLanguage: false
    })
    let newPosted = ref(null)

    let getUnreadCount = () => {
      Https.axiosGet(Https.httpUrls.getUnreadCount).then(rv => {
        if (rv) {
          store.commit('setMessageSystem', [rv])
        }
      })
    }
    MyWs.close()
    // MyWs.linkWs("wss://"+MyWs.messageUrl,'message')
    MyWs.linkWs('wss://' + MyWs.messageUrl, 'message')
    let getWsMessage = data => {
      let userInfo = ['followeeCount', 'followerCount']
      let obj = {}
      let isObj = false
      data.forEach(element => {
        const keys = Object.keys(element)[0]
        if (userInfo.indexOf(keys) > 0) {
          obj[keys] = element[keys]
          isObj = true
        }
      })
      if (isObj) store.commit('upUserDetail', obj)

      store.commit('setMessageSystem', data)
    }
    MyEvent.add('getMessage', getWsMessage)
    let openNewPosted = () => {
      stateList.isNewPosted = !stateList.isNewPosted
      newPosted.value.init()
      document.addEventListener('click', closeShowOperateContent, false)
    }
    //点击下拉图标出现操作
    let changeLanguage = () => {
      stateList.isLanguage = !stateList.isLanguage
      document.addEventListener('click', closeShowOperateContent, false)
    }

    //关闭下拉图标
    let closeShowOperateContent = () => {
      stateList.isLanguage = false
      stateList.isNewPosted = false
      document.removeEventListener('click', closeShowOperateContent)
    }
    let renew = ref(null)
    const openUpgradeToPro = () => {
      renew.value.init()
    }
    const toUserManual = () => {
      const route = router.resolve({ name: 'userManual' })
      window.open(route.href + '?lang=' + locale.value, '_blank')
    }
    onMounted(async () => {
      let test = getCookie('isTest')
      let isTest = JSON.parse(test)
      //判断账号剩余时间是否太短
      let isModalOne = JSON.parse(sessionStorage.getItem('isTimeOne'))
      if (!isModalOne) {
        //判断是否是试用用户
        await new Promise(async resolve => {
          if (isTest) {
            resolve('')
          } else {
            await Https.axiosPost(Https.httpUrls.getExpiredTime, {}).then(rv => {
              if (rv) {
                let dateNow = Date.now()
                let date = new Date(dateNow)
                let rvDate = new Date(rv)
                let diffInMilliseconds = Math.abs(date - rvDate) // 获取时间差的毫秒数
                let days = Math.floor(diffInMilliseconds / (24 * 60 * 60 * 1000)) // 计算天数
                let hours = Math.floor(
                  (diffInMilliseconds % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000)
                ) // 计算小时数
                let minutes = Math.floor(
                  (diffInMilliseconds % (60 * 60 * 1000)) / (60 * 1000)
                ) // 计算分钟数
                if (days < 5) {
                  setTimeout(() => {
                    let text = {
                      str: `${t('HomeView.jsContent4', {
                        days: days,
                        hours: hours
                      })}<a href="https://code-create.com.hk/aida" target="_blank">${t(
                        'HomeView.jsContent8'
                      )}</a>`,
                      title: `${t('HomeView.jsContent7')}`
                    }
                    dataDom.affiche.init(text)
                  }, 500)
                }
                resolve('')
              } else {
                resolve('')
              }
            })
          }
        })
      }
      getUnreadCount()
      // nextTick(()=>{
      // 	setPorfolioDom()
      // })
    })
    // onBeforeUnmount(()=>{
    // 	let imgParent = document.querySelector('.homeMain_max .detail .material_content_list_loding .historyPage_loading')
    // 	if(Observer?.unobserve)Observer.unobserve(imgParent);
    // })
    const setOpenType = item => {
      const { value, list } = item
      if (!list?.length) {
        router.push(item.router)
        return
      }
      homeMainData.openType = homeMainData.openType === value ? '' : value
    }
    let Observer = null
    let setPorfolioDom = () => {
      if (Observer) return
      homeMainData.historyData.isShowLoading = false
      homeMainData.historyData.isNoData = false
      homeMainData.historyData.page = 1
      let imgParent = document.querySelector(
        '.homeMain_max .detail .material_content_list_loding .historyPage_loading'
      )
      Observer = new IntersectionObserver((entries, observer) => {
        // 如果不是相交，则直接返回
        if (!entries[0].intersectionRatio) return
        getHistory()
        homeMainData.historyData.page += 1
      }).observe(imgParent)
    }
    const setRouter = (item, childItem) => {
      let itemRouter = item.router
      if (childItem.router) itemRouter = itemRouter + '?' + childItem.router
      router.push(itemRouter)
    }
    const setHistory = (item, childItem) => {
      // router.push(`/home/tools?tools=toProduct&id=${childItem.id}`)
      if (childItem.process == 'SERIES_DESIGN' || childItem.process == 'SINGLE_DESIGN') {
        router.push(`/home?history=${childItem?.id}`)
      } else {
        let processList = {
          toProduct: 'TO_PRODUCT_IMAGE',
          relight: 'RELIGHT',
          poseTransfer: 'POSE_TRANSFER',
          deReconstruction: 'DE_RECONSTRUCTION',
          patternMaking3D: 'THREE_D_PLATE_MAKING',
          canvasUpload: 'CANVAS'
        }
        let process = ''
        for (const key in processList) {
          if (processList[key] == childItem.process) {
            process = key
            break
          }
        }
        router.push(`/home/tools?tools=${process}&id=${childItem.id}`)
      }
      // router.push(`/home?history=${childItem.id}`)
    }
    const settingGetHistory = () => {
      if (homeMainData.historyData.page == 1) {
        return
      }
      homeMainData.historyData.page = 1
      // homeMainData.navTypeList.history = {
      // 	icon:"fi-br-time-past",
      // 	label:"History",
      // 	value:"history",
      // 	Todaylist:[],
      // 	Yesterdaylist:[],
      // 	WithinAWeeklist:[],
      // 	Earlierlist:[],
      // }
      homeMainData.navTypeList.history.Todaylist = []
      homeMainData.navTypeList.history.Yesterdaylist = []
      homeMainData.navTypeList.history.WithinAWeeklist = []
      homeMainData.navTypeList.history.Earlierlist = []
      homeMainData.historyData.isShowLoading = false
      homeMainData.historyData.isNoData = false
      isFound = 0 //表示是否找到当前id的记录，
      existToHistoryIndex = -1
    }
    provide('settingGetHistory', settingGetHistory)
    const categorizeDate = inputDate => {
      const now = new Date()
      const date = new Date(inputDate)
      // 计算时间差（毫秒）
      const diffTime = now - date
      const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
      // 判断逻辑
      if ((diffDays === -1 || diffDays === 0) && date.getDate() === now.getDate()) {
        return 'Today'
      } else if (diffDays === 1 || (diffDays === 0 && date.getDate() !== now.getDate())) {
        return 'Yesterday'
      } else if (diffDays <= 7) {
        return 'WithinAWeek'
      } else {
        return 'Earlier'
      }
    }
    let isFound = 0
    let existToHistoryIndex = -1
    const setScrollTop = () => {
      setTimeout(() => {
        let historyDateList = [
          'Todaylist',
          'Yesterdaylist',
          'WithinAWeeklist',
          'Earlierlist'
        ]
        let num = 0
        let dateIndex = -1 //表示某个时间段
        let parent = document.querySelectorAll('.homeMain_max .navList .history .detail')
        let imgParent = document.querySelectorAll(
          '.homeMain_max .navList .history .detail>div'
        )
        if (existToHistoryIndex == -1) {
          parent[0].parentNode.scrollTop = parent[0].offsetHeight
        } else {
          isFound++
          historyDateList.forEach((item, dateItemIndex) => {
            let length = homeMainData.navTypeList.history[item].length
            if (existToHistoryIndex > length + num) {
              num += length
            } else {
              if (dateIndex == -1) dateIndex = dateItemIndex
            }
          })
          let dateEl = imgParent[dateIndex].querySelectorAll('.history')
          parent[0].parentNode.scrollTop = dateEl[existToHistoryIndex - num - 1].offsetTop
        }
      }, 0)
    }
    const getHistory = () => {
      if (homeMainData.historyData.isShowLoading && !homeMainData.historyData.isNoData)
        return
      homeMainData.historyData.isShowLoading = true
      let data = {
        page: homeMainData.historyData.page,
        size: homeMainData.historyData.size,
        projectName: homeMainData.historyData.searchCollectionName,
        asc: 0,
        process: ''
        // startDate:startDate,
        // endDate:endDate,
        // intersection:1,
      }
      Https.axiosPost(Https.httpUrls.historyProject, data)
        .then(
          // Https.axiosPost( Https.httpUrls.queryUserGroup, data).then(
          rv => {
            if (data.page == 1 && rv.content.length == 0) {
              homeMainData.historyData.isNull = true
            } else {
              homeMainData.historyData.isNull = false
            }
            if (rv.content.length > 0) {
              rv.content.forEach((item, index) => {
                let str = categorizeDate(item.updateTime) + 'list'
                homeMainData.navTypeList.history[str].push(item)
                if (item.id == (route.query?.id || route.query?.history)) {
                  existToHistoryIndex = rv.page * rv.size + index + 1 - rv.size
                }
              })
              homeMainData.historyData.isNull = false
              if ((route.query?.id || route.query?.history) && isFound < 1) setScrollTop()
            } else {
              homeMainData.historyData.isNoData = true
            }
            homeMainData.historyData.isShowLoading = false
          }
        )
        .catch(res => {
          homeMainData.historyData.isShowMark = false
          if (data.page == 1) {
            homeMainData.historyData.isNull = true
          }
          homeMainData.historyData.isNoData = true
        })
    }
    const editHistory = (item, index, el, list) => {
      if (homeMainData.historyData.selectHistoryId == -1) {
        let top = el.target.parentNode.parentNode.getBoundingClientRect().y
        let parentTop =
          el.target.parentNode.parentNode.parentNode.parentNode.parentNode.getBoundingClientRect()
            .y
        let parentHeight =
          el.target.parentNode.parentNode.parentNode.parentNode.parentNode.offsetHeight
        let operation = el.target.parentNode.querySelector('.operation')
        homeMainData.historyData.selectHistoryId = item.id
        //判断弹窗是加载按钮上面还是下面
        if (list.length == 1) {
          operation.classList.add('activeLeft')
          return
        }
        if (top > parentHeight / 2 + parentTop) {
          //加在按钮上面
          operation.classList.add('active')
        } else {
          operation.classList.remove('active')
        }
      } else {
        homeMainData.historyData.selectHistoryId = -1
      }
      let operationCli = () => {
        homeMainData.historyData.selectHistoryId = -1
        document.removeEventListener('click', operationCli)
      }
      document.addEventListener('click', operationCli)
    }
    const editName = item => {
      homeMainData.historyData.selectHistoryId = -1
      for (const key in homeMainData.navTypeList.history) {
        let list = ['Earlierlist', 'Todaylist', 'WithinAWeeklist', 'Yesterdaylist']
        if (list.indexOf(key) == -1) continue
        homeMainData.navTypeList.history[key].forEach(item => {
          item.editName = false
        })
      }

      item.editName = true
      homeMainData.historyData.historyTextarea = item.name
    }
    const deleteItem = item => {
      Https.axiosPost(
        Https.httpUrls.projectDetail,
        {},
        { params: { projectId: item.id } }
      ).then(rv => {
        homeMainData.historyData.selectHistoryId = -1
        settingGetHistory()
        if (homeMainData.openTypeChild == item.id) {
          router.push('/home')
        }
      })
    }
    const setting = item => {
      homeMainData.projectSetting.init(item)
      homeMainData.historyData.selectHistoryId = -1
    }
    const accomplishHistory = item => {
      let data = {
        name: homeMainData.historyData.historyTextarea, //library名字
        id: item.id //history id
      }
      Https.axiosPost(Https.httpUrls.projectSaveOrUpdate, data)
        .then(rv => {
          item.name = homeMainData.historyData.historyTextarea
          item.editName = false
          homeMainData.historyData.historyTextarea = ''
        })
        .catch(res => {})
    }
    const newProject = () => {
      router.push('/home')
    }
    const bathGeneration = item => {
      homeMainData.openType = ''
      homeMainData.historyData.selectHistoryId = -1
      router.push(
        `/home/cloud?type=creation&id=${item.id}&name=${item.name}&process=${item.process}`
      )
    }

    const currentProjectPath = computed(() => {
      return store.state.Workspace.projectPath
    })

    const disabledCurrentProject = computed(() => {
      if (!currentProjectPath.value) return true

      return false
    })

    const currentProjectActive = computed(() => {
      return currentProjectPath.value === route.fullPath
    })

    const handleNavigateToCurrentProject = () => {
      if (currentProjectActive.value) return
      if (currentProjectPath.value) {
        router.push(currentProjectPath.value)
      }
    }

    return {
      store,
      userDetail,
      t,
      ...toRefs(homeMainData),
      ...toRefs(historyData),
      pastDuePage,
      locale,
      isMurmur,
      credits,
      activeCredits,
      getLangIsShowMark,
      messageNum,
      messageType,
      ...toRefs(stateList),
      newPosted,
      openNewPosted,
      changeLanguage,
      closeShowOperateContent,
      renew,
      openUpgradeToPro,
      setOpenType,
      setRouter,
      setHistory,
      editHistory,
      settingGetHistory,
      editName,
      deleteItem,
      setting,
      accomplishHistory,
      newProject,
      bathGeneration,
      toUserManual,
      currentProjectPath,
      disabledCurrentProject,
      currentProjectActive,
      handleNavigateToCurrentProject
    }
  },
  data() {
    return {
      email: '',
      emailCode: ['', '', '', '', '', ''], //邮箱验证码
      time: 60, //60秒倒计时
      timer: 0,
      timerOperate: null,
      numTime: 30,
      timerSec: null,
      modalWarning: null,

      language: [
        { name: 'English', value: 'ENGLISH' },
        { name: '中文', value: 'CHINESE_SIMPLIFIED' }
        // {name:'한국인',value:'KOREAN'},
        // {name:'にほんご',value:'JAPANESE'},
        // {name:'Русский',value:'RUSSIAN'},
        // {name:'Français',value:'FRENCH'},
        // {name:'แบบไทย',value:'THAI'},
        // {name:'Tiếng Việt',value:'VIETNAMESE'},
        // {name:'Italiano',value:'ITALIAN'},
      ]
    }
  },
  directives: {},
  async mounted() {
    await new Promise((resolve, reject) => {
      this.store
        .dispatch('getLangType')
        .then(() => {
          this.getLangIsShowMark = false
          resolve()
        })
        .catch(() => {
          this.getLangIsShowMark = false
          reject()
        })
    })
    let isMurmur = getCookie('isMurmur') //获取是否是试用用户
    this.isMurmur = JSON.parse(isMurmur)
    if (this.userDetail.userId && this.userDetail.userId > -1) {
      this.accountIsLogin()
    } else {
      this.$router.replace('/')
    }
    if (!this.isMurmur) {
      this.operateClick()
      document.addEventListener('click', this.operateClick)
    }
    this.getCredits()
    this.getLang('')
    //语言适配

    let tl1 = gsap.timeline({ paused: true })
    let userDetailMax = document.querySelector('.homeMain_max .homeMain_user')
    let userDetail = document.querySelector('.homeMain_max .homeMain_user_detail')
    // let anmiation = TweenMax.to(userDetailMax,1, {'margin-top':'30px',opacity:1})
    // anmiation.stop()
    let state
    tl1.to(userDetail, 0.3, { opacity: 1, display: 'flex' })
    // .to(userDetailIcon,.3, {'left':'16rem',y:'25%',x:'-50%',scale:1.5,opacity:1},'-=.3')
    let overTime
    let outTime
    userDetailMax.addEventListener('mouseenter', event => {
      if (state && !outTime) return
      clearTimeout(overTime)
      clearTimeout(outTime)
      overTime = setTimeout(() => {
        state = true
        this.isLanguage = false
        tl1.play()
      }, 500)
    })
    userDetailMax.addEventListener('mouseleave', event => {
      if (overTime) {
        clearTimeout(overTime)
      }
      if (!state) return
      clearTimeout(outTime)
      outTime = setTimeout(() => {
        state = false
        tl1.reverse()
      }, 500)
    })
    let orderId = sessionStorage.getItem('orderId') //进入首页后是否打开订单列表查询到订单
    if (orderId) {
      let payOrder = this.$refs.payOrder
      payOrder.init(orderId)
    }
  },
  methods: {
    setTask(data) {
      this.openTask(data)
    },

    turnToPage(name) {
      let noRefresh = name === 'home' ? true : false
      this.$router.push({ name: name, params: { noRefresh: noRefresh } })
    },
    UpgradePlan() {
      //购买积分
      let UpgradePlan = this.$refs.UpgradePlan
      UpgradePlan.init()
    },
    Assignment() {
      //任务
      // let num = 123+this.credits
      // this.store.commit('setCredits',num)
    },
    getCredits() {
      //刷新当前积分
      if (!this.activeCredits) {
        this.activeCredits = true
        this.store.dispatch('getCredits').then(rv => {
          setTimeout(() => {
            this.activeCredits = false
          }, 300)
        })
      } else {
        this.activeCredits = false
      }
    },

    //查看订单
    orderForm() {
      let payOrder = this.$refs.payOrder
      payOrder.init()
    },
    //教程
    getTutorial() {
      let url = 'https://aida-user-manual-chinese.super.site/'
      if (this.locale == 'ENGLISH') {
        url =
          'https://code-create.com.hk/wp-content/uploads/2025/02/aida_3.0-Manual-2_5-EN.pdf'
        showViewVideo({ url: 'https://aida.com.hk/video/AiDA_3_1_Demo_V2_EN.mp4' })
      } else {
        showViewVideo({ url: 'https://aida.com.hk/video/AiDA_3_1_Demo_V2_CN.mp4' })
      }
      this.toUserManual()
      // //打开视频
      // const a = document.createElement('a');
      // a.href = url;
      // a.target = '_blank';
      // // a.download = 'aida_3.0-Manual.pptx'; // 下载的文件名
      // document.body.appendChild(a);
      // a.click();
    },
    //登出
    async logout() {
      let data = {
        userId: this.userDetail.userId
      }
      await Https.axiosPost(Https.httpUrls.accountLogout, data).then(rv => {
        // WriteCookie("token");
        clonAllCookie()
      })
      this.$router.replace('/')
      this.store.commit('createDetail')
      this.store.commit('createProbject')

      // WriteCookie("token");
      // window.location.reload()
    },
    //判断是否登录
    accountIsLogin() {
      let data = {
        userId: this.userDetail.userId
      }
      Https.axiosPost(Https.httpUrls.accountIsLogin, data).then(rv => {
        if (!rv) {
          this.$router.replace('/')
        }
      })
    },

    //点击重置判断是否长时间五操作
    operateClick() {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      let _this = this
      let timeNum = 1000 * 60 * 120
      this.timer = setTimeout(() => {
        this.modalWarning = Modal.warning({
          title: () => this.t('Header.jsContent3', { numTime: _this.numTime }),
          icon: createVNode(ExclamationCircleOutlined),
          okText: 'Ok',
          centered: true,
          onOk() {
            _this.numTime = 30
            clearInterval(_this.timerSec)
          }
        })
        _this.numCounter()
      }, timeNum)
    },

    numCounter() {
      this.timerSec = setInterval(() => {
        if (this.numTime > 0) {
          this.numTime = this.numTime - 1
        } else {
          clearTimeout(this.timer)
          clearInterval(this.timerSec)
          this.logout()
          this.modalWarning.destroy()
        }
      }, 1000)
    },
    //获取当前语言
    getLang(v) {
      let data
      Https.axiosPost(Https.httpUrls.getUserLanguage, data).then(rv => {
        if (rv) {
          this.locale = rv
          setLang(rv)
        }
      })
    },
    setLang(v) {
      this.getLangIsShowMark = true
      Https.axiosGet(Https.httpUrls.changeUserLanguage, { params: { language: v } })
        .then(rv => {
          if (rv) {
            if (rv) {
              let token = rv
              setCookie('token', token)
              this.getLang('')
              // if(this.$router.currentRoute._value.path == '/home'){
              // 	this.$router.push("/home")
              // }else{
              // 	this.$router.push("/home")
              // }
              this.store.commit('clearAllData')
              window.location.reload()
              // window.location.href = '/home';
            }
            this.getLangIsShowMark = false
          }
        })
        .catch(() => {
          this.getLangIsShowMark = false
        })
    },

    setLocale(v) {
      this.setLang(v)
    },
    openTask(data) {
      let taskPage = this.$refs.TaskPage
      taskPage.init(data)
    },
    openAccount() {
      this.$router.push('/home/account')
    },
    openMessage() {
      this.$router.push('/home/account/accountMessage')
    }
  }
})
</script>

<style lang="less" scoped>
.homeMain_max {
  position: relative;
  display: flex;
  height: 100%;
  box-sizing: border-box;
  > .leftBox {
    height: 100%;
    background: #f9fafa;
    overflow: hidden;
    width: 29.5rem;
    transition: width 0.3s;
    &.leftHide {
      width: 0;
    }
    > .left {
      // width: 26rem;
      width: 29.5rem;
      height: 100%;
      padding: 2.4rem 2.2rem;
      display: flex;
      flex-direction: column;
      .marginT2 {
        margin-top: 2rem;
      }
      .marginB2 {
        // margin-bottom: 1rem;
        &.active {
          margin-bottom: 1rem;
        }
      }
      .list {
        display: flex;
        flex-direction: column;
        // padding: 1.2rem;
        max-height: 5rem;
        border-radius: 2rem;
        &.show-history {
          background: rgba(0, 0, 0, 0.04);
          border-radius: 0.8rem;
        }
        &.active {
          > .detailBox {
            flex: 1;
          }
        }
        &.history {
          flex: 1;
          &:hover {
            background: rgba(0, 0, 0, 0.04);
            border-radius: 0.8rem;
          }
          > .detailBox {
            > .detail {
              min-height: 10rem;
            }
          }
        }
        > .titleBox {
          padding: 1.2rem;
          display: flex;
          font-size: 1.8rem;
          cursor: pointer;
          justify-content: space-between;
          align-items: center;
          font-weight: 500;
          i {
            display: flex;
            font-size: 1.8rem;
          }
          > .left {
            display: flex;
            align-items: center;
            > i {
              margin-right: 1rem;
            }
            > span {
              line-height: 2.4rem;
              // color: #52525b;
              transition: all 0.3s;
              color: #000000bf;
            }
          }
          > .right {
            > i {
              transition: all 0.3s;
            }
          }
          &:hover {
            > .left {
              > span {
                color: #000;
              }
            }
          }
        }
        > .detailBox {
          overflow: auto;
          scrollbar-width: none;
          flex: 0;
          > .detail {
            position: relative;
            height: 100%;
            padding: 0 0.5rem;
            > img {
              width: 100%;
            }
            .timeType {
              font-size: 1.6rem;
              color: #52525b;
              font-weight: 400;
              margin-top: 1.2rem;
              margin-bottom: 0.8rem;
            }
            .detailItem {
              cursor: pointer;
              padding: 0.8rem;
              // padding: 1.2rem 1.1rem 1.2rem 2.2rem;
              font-size: 1.8rem;
              // font-size: 1.4rem;
              font-weight: 400;
              margin-bottom: 0.4rem;
              border-radius: 0.8rem;
              display: flex;
              align-items: center;
              flex-wrap: wrap;
              // flex-wrap: nowrap;

              &.history {
                padding: 1.2rem 1.1rem 1.2rem 2.2rem;
                margin-bottom: 1rem;
                > .text {
                  flex-basis: 100%;
                }
              }
              > .time {
                font-size: 1.2rem;
                opacity: 0.5;
              }
              > i {
                font-size: 1.8rem;
                margin-right: 1rem;
                display: flex;
              }
              > .text {
                flex: 1;
                overflow: hidden;
                > span {
                  //只在一行显示
                  width: 100%;
                  display: block;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
              &.active {
                // background: #F9FAFA;
                background-color: #ffffff;
              }
              &:hover {
                // background: #F9FAFA;
                background-color: #ffffff;
              }
              &.history {
                background: #f9fafa;
                // background-color: #ffffff;
                &:hover {
                  background: #fdfdfd;
                  // background-color: #ffffff;
                }
                &.active {
                  background: #fdfdfd;
                  // background-color: #ffffff;
                }
                > .text {
                  > span {
                    width: 100%;
                    font-weight: 600;
                    line-height: 2rem;
                    font-size: 1.8rem;
                    display: inline-block;
                  }
                  > textarea {
                    resize: none;
                    border: none;
                    background: rgba(0, 0, 0, 0);
                    font-weight: 600;
                    line-height: 2rem;
                    height: 4rem;
                    width: 100%;
                    font-size: 1.8rem;
                  }
                }

                > .type {
                  border: 1px solid #0000000d;
                  padding: 0.4rem 0.8rem;
                  border-radius: 0.8rem;
                  color: #71717a;
                  font-size: 1.4rem;
                  max-width: 70%;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  min-width: 40%;
                  text-align: center;
                }
                > .btn {
                  border: 1px solid #0000000d;
                  border-radius: 0.8rem;
                  margin-left: auto;
                  position: relative;
                  > i {
                    width: 3rem;
                    height: 3rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  }
                  > .fi-br-check {
                    border-radius: 50%;
                    background: #38c793;
                    color: #fff;
                    width: 2rem;
                    height: 2rem;
                  }
                  > .operation {
                    position: absolute;
                    right: 0;
                    top: 3rem;
                    background: #e4e4e7;
                    border: 1px solid #d4d4d8;
                    border-radius: 1rem;
                    z-index: 7;
                    padding: 0.8rem;
                    box-shadow: 0 0 3.2rem -0.8rem #1a1b1e33;
                    position: absolute;
                    height: min-content;
                    &.active {
                      top: auto;
                      bottom: 3rem;
                    }
                    &.activeLeft {
                      bottom: 0;
                    }
                    > .item {
                      padding: 0.8rem;
                      color: #52525b;
                      display: flex;
                      border-radius: 0.8rem;
                      cursor: pointer;
                      align-items: center;
                      > i {
                        font-size: 1.6rem;
                        display: flex;
                      }
                      > span {
                        margin-left: 0.5rem;
                        white-space: nowrap;
                      }
                      &:hover {
                        background: #efeff1;
                      }
                    }
                  }
                }
              }
            }
            .detailItem:last-child {
              margin-bottom: 0;
            }
            > .material_content_list_loding {
              text-align: center;
              height: 50px;
              .page_loading {
                display: block;
                width: 50px;
                height: 50px;
                margin: 0 auto;
              }
              img {
                height: calc(10rem * 1.2);
              }
            }
          }
        }
        &.active {
          padding: 1.2rem 0;
          overflow: hidden;
          max-height: 100%;
          background: #00000008;
          &.isHistory {
            background: #fff;
            border-radius: 0.8rem;
            max-height: 5rem;
          }
          > .titleBox {
            padding: 0;
            margin-bottom: 1.6rem;
            padding: 0 1.2rem;
            > .right {
              > i {
                transform: rotate(180deg);
              }
            }
          }
        }

        &.language {
          > .titleBox {
            padding: 0.8rem;
            background: #00000000;
            height: 5rem;
            > .left {
              > i {
                margin-right: 2rem;
              }
            }
          }
          > .detailBox {
            > .detail {
              .detailItem {
                padding: 0.8rem;
                > svg {
                  margin-right: 2.5rem;
                  width: 2rem;
                  height: 2rem;
                }
                > span {
                  color: #111a18;
                  opacity: 0.5;
                  margin-left: 4.5rem;
                  font-weight: 600;
                }
                &.active {
                  > span {
                    color: #52525b;
                    opacity: 1;
                    margin-left: 0px;
                  }
                }
              }
            }
          }
        }
      }
      > .title {
        display: flex;
        padding: 0.4rem;
        align-items: center;
        justify-content: space-between;
        > span {
          font-size: 2rem;
          font-weight: 600;
        }
        > img {
          width: 2.7rem;
          cursor: pointer;
        }
        > svg {
          cursor: pointer;
        }
      }

      > .navList {
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        margin-top: 2.8rem;
      }
      > .segmentation {
        height: 2px;
        background: #0000000d;
        margin-top: 2rem;
        width: 100%;
      }

      > .navListBottom {
        display: flex;
        flex-direction: column;
      }

      > .gallery_btn {
        margin-top: 2rem;
      }
    }
  }
  .newObj {
    border-radius: 2rem;
    border: 2px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: 4.2rem;
    width: 25.1rem;
    // height: 6.8rem;
    padding: calc(2rem - 2px) 0;
    &.active {
      border-color: rgba(0, 0, 0, 0.5);
    }
    &:hover {
      border-color: rgba(0, 0, 0, 0.5);
    }
    > svg {
      margin-right: 1.3rem;
      width: 1.6rem;
      height: 1.6rem;
    }
    > p {
      font-size: 2rem;
      font-weight: 500;
      margin: 0;
    }
  }
  > .rightBox {
    flex: 1;
    overflow: hidden;
    > .right {
      display: flex;
      width: 100%;
      height: 100%;
      flex-direction: column;
      position: relative;
      > .user {
        margin-bottom: 1rem;
        display: flex;
        justify-content: flex-end;
        padding: 3.2rem 2.1rem 1.2rem;
        align-items: center;
        > .left {
          display: flex;
          align-items: center;
          margin-right: auto;
          > .newObj {
            background: #fff;
            padding: 1.2rem 2.5rem;
            margin: 0;
            width: 17.7rem;
            border-radius: 3rem;
            p {
              font-size: 1.6rem;
              font-weight: 600;
            }
          }
          > svg {
            margin-right: 2rem;
            cursor: pointer;
          }
        }
        > .homeMain_right_content {
          top: 0;
          left: 0;
          display: flex;
          align-items: center;
          margin-right: 1.2rem;
          .homeMain_icon {
            font-size: 3.6rem;
            position: relative;
            top: 0.3rem;
          }

          .username {
            font-size: 1.6rem;
            color: #1a1a1a;
            margin: 0 0.8rem;
            font-weight: 900;
            span {
              margin: 0.7rem;
            }
          }
          .credits {
            font-size: 1.6rem;
            color: #1a1a1a;
            font-weight: 500;
            cursor: auto;
            display: flex;
            line-height: calc(5rem - 4px);
            height: 5rem;
            border-radius: 3.4rem;
            justify-content: center;
            width: auto;
            // width: calc(25.3rem - 4px);
            padding: 0 1.2rem;
            border: 1.72px solid #000;
            span {
              // width: 5rem;
              max-width: 10rem;
              display: inline-block;
              overflow: hidden;
              display: flex;
              margin-right: 1.2rem;
              .credits_item {
                transition: 0.3s all;
                // height: 4rem;
                height: 100%;
                // height: 3.2rem;
                div {
                  height: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
              }
            }
            i {
              height: 100%;
              border-left: 1.72px solid;
              padding-left: 1.3rem;
              margin-left: 1.5rem;
              font-size: 2.2rem;
              cursor: pointer;
              display: flex;
              align-items: center;
            }
            .fi-rr-shop {
              font-size: 2.4rem;
            }
            .fi-br-refresh {
              margin-left: 0;
              border-left: none;
              padding-left: 0;
              &.active {
                transition: all 0.3s;
                transform: rotate(360deg);
              }
            }
          }
        }
        > .trialApproval {
          display: flex;
          align-items: center;
          > .message_iconItem {
            position: relative;
            cursor: pointer;
            margin: 0;
            margin-right: 1.4rem;
            i {
              width: 2.4rem;
              height: 2.4rem;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
        .homeMain_user {
          height: 5.6rem;
          width: 5.6rem;
          // margin-left: auto;
          display: flex;
          position: relative;
          align-items: center;
          position: relative;
          .homeMain_user_icon {
            height: 5.6rem;
            width: 5.6rem;
            position: relative;
            // transform-origin: top;
            overflow: hidden;
            z-index: 2;
            left: 0;
            border-radius: 50%;
            cursor: pointer;
            background: #fff;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
            // transition: all .3s;
          }
          .homeMain_user_detail {
            z-index: 1050;
            position: absolute;
            top: calc(100% + 0.5rem);
            background: #fff;
            width: 34rem;
            height: auto;
            opacity: 0;
            right: 0px;
            display: none;
            // box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
            text-align: center;
            flex-direction: column;
            align-items: center;
            padding: 1.2rem 2rem;
            border: 2px solid #000;
            border-radius: 2rem;
            .username,
            .homeMain_user_detail_attention,
            .homeMain_subscribe {
              margin-bottom: 2rem;
            }
            .homeMain_user_icon {
              position: relative;
            }
            .homeMain_subscribe {
              padding: 2rem;
              background: #f3f3f6;
              border-radius: 1.4rem;
              cursor: pointer;
              width: 100%;
              > div {
                display: flex;
                margin-bottom: 2rem;
              }
              > div:last-child {
                margin-bottom: 0;
              }
              .font {
                font-size: 1.6rem;
                font-weight: 600;
                margin-right: 1rem;
              }
              .stateSucsess {
                color: #3ab45c;
              }
              .stateError {
                color: #b43a3a;
              }
              .time {
                font-size: 1.4rem;
                font-weight: 400;
                margin-left: auto;
              }
            }
            .homeMain_select {
              width: 100%;
              .select_item {
                padding: 0 1rem;
                border-radius: 0.8rem;
                line-height: 4rem;
                color: #4d4d4d;
                display: flex;
                align-items: center;
                cursor: pointer;
                user-select: none;
                width: 100%;
                flex-wrap: wrap;
                &:hover {
                  background: #f3f3f6;
                }
                .fi {
                  font-size: 1.8rem;
                }

                .select_item_des {
                  font-size: 1.6rem;
                  margin-left: 1rem;
                  font-weight: 500;
                }
              }
              .select_item_long {
                border-bottom: 1px solid #eceaea;
                margin: 2rem 0;
              }
              .icon-xiala {
                margin-left: auto;
                &.active {
                  transform: rotate(180deg);
                }
              }
              .select_list {
                height: 0;
                overflow: hidden;
                transition: all 0.3s;
                width: 100%;
                margin: 0;
                > li {
                  padding-left: 2.5rem;
                }
                &.active {
                  height: auto;
                }
              }
            }
            .homeMain_user_detail_attention {
              width: 100%;
              display: flex;
              justify-content: space-between;
              padding-left: 3.5rem;
              padding-right: 3.5rem;
              .attention_item {
                display: flex;
                flex-direction: column;
                align-items: center;
              }
              .attention_item_active {
                cursor: pointer;
              }
              .attention_item_active:hover {
                color: #000;
                span {
                  color: #000;
                }
              }
              div {
                font-size: 1.6rem;
                font-weight: 600;
              }
              span {
                font-size: 1.4rem;
                color: #949eae;
              }
            }
          }
        }
      }
      > .routerView {
        position: relative;
        overflow: hidden;
        flex: 1;
        display: flex;
        > .router {
          flex: 1;
          overflow: hidden;
          padding: 0 6rem;
          padding-bottom: 2rem;
        }
        > .userSystem {
          top: 0;
          left: 0;
          position: absolute;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.4);
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          font-weight: 600;
          font-size: 4rem;
          z-index: 100;
        }
      }
    }
  }
}
.select_block {
  z-index: 1050;
  position: absolute;
  right: 0rem;
  top: 4rem;
  width: 13.5rem;
  background: #ffffff;
  box-shadow: 0px 0.4rem 0.4rem 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: 1px solid #000000;
  height: auto;
  padding: 2rem;
  border-radius: 2rem;

  .homeMain_select {
    width: 100%;
    .select_item {
      height: 4.1rem;
      color: #4d4d4d;
      display: flex;
      align-items: center;
      cursor: pointer;
      user-select: none;
      width: 100%;
      &:hover {
        background: #f7f7f7;
      }

      .select_item_des {
        font-size: 1.6rem;
        margin-left: 1rem;
        font-weight: 500;
      }
    }
  }
}
.modal_component {
  .skip_content {
    width: 6rem;
    height: 3rem;
    line-height: 2.8rem;
    border: 0.1rem solid #000;
    font-size: 1.4rem;
    color: #000;
    position: absolute;
    top: 1.8rem;
    right: 1.8rem;
    cursor: pointer;
  }

  .bind_email_content {
    padding: 4.8rem 9.2rem 6rem;

    .bind_email_tip {
      font-size: 1.8rem;
      color: #a5b0c2;
      line-height: 1.9rem;
      text-align: center;
    }
    .bind_email {
      margin-top: 2rem;
      font-size: 2.2rem;
      font-weight: 400;
      color: #030303;
      text-align: center;
    }

    .bind_email_form_content {
      .bind_email_form_title {
        font-size: 2.2rem;
        font-weight: bold;
        color: #030303;
        line-height: 2.4rem;
      }

      .bind_email_form_input {
        width: 100%;
        height: 4.6rem;
        margin-top: 1rem;
        border: 0.1rem solid #b4bed7;
        padding-left: 2.1rem;
        line-height: 4.6rem;
        font-size: 1.8rem;
        box-sizing: border-box;

        &::placeholder {
          color: #a5b0c2;
        }
      }
    }

    .bind_email_submit_button {
      height: 4.6rem;
      line-height: 4.6rem;
      background: #000;
      font-size: 1.6rem;
      font-weight: 500;
      color: #ffffff;
      width: 12.8rem;
      text-align: center;
      cursor: pointer;
      margin: 3rem auto 0;
    }

    .icon--shangyibu {
      font-size: 2.5rem;
      font-weight: bold;
      color: #030303;
    }

    .email_last_step_content {
      margin-left: 1rem;
      font-size: 2.2rem;
      font-weight: bold;
      color: #030303;
    }

    .tip_content {
      font-size: 1.3rem;
      font-weight: bold;
      color: #000;
      cursor: pointer;
    }

    .email_last_step_des {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 2.5rem;
      margin-bottom: 1.5rem;

      .sent_email_content {
        font-size: 1.8rem;
        font-weight: bold;
        color: #a5b0c2;
      }
    }
  }
}

.current-projct {
  font-size: 2rem;
  cursor: pointer;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25.1rem;
  padding: calc(2rem - 2px) 0;
  margin-top: 2rem;
  &.filled {
    background-color: #fff;
  }

  .current-project-icon {
    margin-right: 1.3rem;
  }

  &.disabled {
    color: #9a9a9a;
    border: none;
    background: #f5f5f5;
    cursor: not-allowed;
  }
  &.active {
    cursor: not-allowed;
    border-color: rgba(0, 0, 0, 0.5);
  }

  &.filled:hover {
    border-color: rgba(0, 0, 0, 0.5);
  }
}
.divider {
  width: 100%;
  height: 1px;
  margin-top: 3rem;
  background-color: rgba(0, 0, 0, 0.1);
}
</style>