<template>
  <RightPano v-if="currentModel">
    <ui-group>
      <template #header>
          <Actions class="edit-header" :items="actionItems" />
      </template>
      <ui-group-option label="等比缩放">
        <template #icon>
          <a href="">设置比例</a>
        </template>
        <ui-input type="range" v-model="currentModel.scale" v-bind="scaleOption" width="100%" />
      </ui-group-option>
      <ui-group-option label="离地高度">
        <ui-input type="range" v-model="currentModel.bottom" v-bind="bottomOption" width="100%"/>
      </ui-group-option>
      <ui-group-option label="模型不透明度">
        <ui-input type="range" v-model="currentModel.opacity" v-bind="opacityOption" width="100%" />
      </ui-group-option>
      <ui-group-option>
        <ui-button>配准</ui-button>
      </ui-group-option>
      <ui-group-option>
        <ui-button>恢复默认</ui-button>
      </ui-group-option>
    </ui-group>
  </RightPano>
</template>

<script lang="ts" setup>
import { RightPano } from '@/layout'
import { currentModel } from '@/store'
import Actions from '@/components/actions/index.vue'
import { getSceneModel } from '@/sdk'
import { useViewStack } from '@/hook'
import { showLeftCtrlPanoStack, showLeftPanoStack } from '@/env'
import { ref } from 'vue'

import type { ActionsProps } from '@/components/actions/index.vue'

const opacityOption = { min: 0.01, max: 1, step: 0.01, }
const bottomOption = { min: 1, max: 100, step: 1, }
const scaleOption = { min: 0.01, max: 1, step: 0.01, }
const actionItems: ActionsProps['items'] = [
  { 
    icon: 'move', 
    text: '移动', 
    action: () => {
      getSceneModel(currentModel.value)?.enterMoveMode()
      return () => getSceneModel(currentModel.value)?.leaveMoveMode()
    } 
  },
  { 
    icon: 'flip', 
    text: '旋转', 
    action: () => {
      getSceneModel(currentModel.value)?.enterRotateMode()
      return () => getSceneModel(currentModel.value)?.leaveRotateMode()
    } 
  },
]

useViewStack(() => {
  const pops = [
    showLeftCtrlPanoStack.push(ref(false)),
    showLeftPanoStack.push(ref(true))
  ]
  return () => {
    pops.forEach(pop => pop())
  }
})

</script>