<script setup lang="ts">
import { onMounted, inject, ref } from 'vue'
import $xui from './cad_defined'
const __sdk: any = inject('__sdk')

const classify = ref('elem')
const selected = ref('')

const onClassify = (name: string) => {
  classify.value = name
}
const onSelected = (name: string) => {
  $xui.selected((selected.value = name))
}

const onMenuClick = (name: string, value?: string) => {
  // if (name == 'panos' || name == 'texture' || name == 'download') {
  //       cad.uiControl.execute(name, values)
  //       if (name == 'download') {
  //           Dialog.toast({ type: 'success', content: `${t('common.downloadDone')}` })
  //       }
  //   } else {
  //       if (name == 'default') {
  //           await store.dispatch('cad/reset')
  //       }
  //       cad.uiControl.execute(name)
  //   }
  $xui.execute(name, value)
}

onMounted(() => {
  __sdk.use('EditCAD').then(() => {
    __sdk.Plugins.EditCAD.$xui = $xui
    __sdk.Plugins.EditCAD.padding({
      top: 100,
      left: 50,
      right: 290,
    })
    __sdk.Plugins.EditCAD.show()
  })
  __sdk.Scene.on('loaded', () => {})
  __sdk.mount('#scene').render()
})
</script>

<template>
  <div id="menus">
    <ul>
      <li v-for="cate in $xui.toolbars">
        <div v-for="item in cate.list" @click="onMenuClick(item.type)">
          {{ item.text }}
        </div>
      </li>
    </ul>
  </div>
  <div id="tools">
    <div class="tabs">
      <div @click="onClassify('elem')" :class="{ active: classify == 'elem' }">
        绘制结构
      </div>
      <div class="split"></div>
      <div @click="onClassify('furn')" :class="{ active: classify == 'furn' }">
        添加家具
      </div>
    </div>
    <div class="elem" v-show="classify == 'elem'">
      <ul>
        <template v-for="cate in $xui.widgets">
          <li v-if="!cate.hide">
            <div>{{ cate.name }}</div>
            <div class="widgets">
              <div
                v-for="item in cate.list"
                :class="{ selected: selected === item.name }"
                @click="onSelected(item.name)"
              >
                {{ item.text }}
              </div>
            </div>
          </li>
        </template>
      </ul>
    </div>
    <div class="furn" v-show="classify == 'furn'">
      <ul>
        <li v-for="cate in $xui.furnitures">
          <div>{{ cate.name }}</div>
          <div class="widgets">
            <div
              v-for="item in cate.list"
              :class="{ selected: selected === item.name }"
              @click="onSelected(item.name)"
            >
              {{ item.text }}
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="prop"></div>
  </div>
  <div id="scene"></div>
</template>

<style scoped lang="scss">
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#menus {
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  right: 245px;
  z-index: 1000;
  background-color: rgba(27, 27, 28, 0.8);
  font-size: 14px;
  ul {
    display: flex;
  }
  li {
    position: relative;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    &::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      width: 1px;
      height: 20px;
      z-index: 1000;
      background-color: hsla(0, 0%, 100%, 0.16);
      transform: translateY(-50%);
    }
    &:last-child {
      &::after {
        display: none;
      }
    }
    > div {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 10px;
    }
  }
}
#tools {
  user-select: none;
  padding: 10px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 225px;
  z-index: 1000;
  font-size: 14px;
  background-color: rgba(27, 27, 28, 0.8);
  li {
    margin-top: 16px;
  }
}
#scene {
  width: 100vw;
  height: 100vh;
}

.tabs {
  position: relative;
  display: flex;
  margin-top: 10px;
}
.tabs div {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border: 1px solid hsla(0, 0%, 100%, 0.2);
  width: 50%;
  &:first-child {
    border-right: none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  &:last-child {
    border-left: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  &.active {
    color: aqua;
    border-color: aqua;
  }
  &.split {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background-color: aqua;
    border: none;
  }
}

.widgets {
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
}
.widgets > div {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: hsla(0, 0%, 100%, 0.05);
  border: 1px solid hsla(0, 0%, 100%, 0.2);
  margin-top: 8px;
  margin-left: 8px;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
  flex-wrap: wrap;
}
.widgets > div:hover {
  color: aqua;
}
.widgets > div:last-child {
  margin-right: 0;
}
.widgets > div.selected {
  color: aqua;
  border: solid 1px aqua;
}
</style>
