SichuanDaily/src/views/topicNavigation/index.vue

<template>
  <div>
    <n-drawer
      v-model:show="active"
      :width="240"
      placement="right"
      :trap-focus="false"
      :block-scroll="false"
      :show-mask="false"
      :mask-closable="false"
      to="#drawer-target"
      style="--n-body-padding: 0px"
    >
      <n-drawer-content title="专题导航">
        <div class="drawerContent m-5"></div>
        <n-flex justify="center">
          <n-button v-if="!isPanoEditing" type="primary" @click="handleAdd"
            >+ 添加
          </n-button>
        </n-flex>

        <n-list
          hoverable
          clickable
          style="--n-color-modal: none; margin-top: 20px"
          :show-divider="false"
          v-if="!isPanoEditing"
        >
          <n-list-item v-for="(element, index) in dataList" style="">
            <n-flex justify="space-between" align="center" :size="0">
              <n-flex align="center">
                <n-icon size="20">
                  <WalkSharp />
                </n-icon>
                <template v-if="isShowEditing(index)">
                  <n-flex style="flex: 1" align="center">
                    <n-input-group>
                      <n-input
                        v-model:value="element.title"
                        maxlength="15"
                        style="max-width: 130px"
                      />

                      <n-button type="primary" @click="currentEditing = NaN">
                        退出
                      </n-button>
                    </n-input-group>
                  </n-flex>
                </template>
                <div v-else @click="handleItem(index)" class="truncate inline-block" style="width: 145px">
                  {{ element.title === '新增路线' ? element.title + index : element.title }}
                </div>
              </n-flex>

              <n-dropdown
                @select="(key) => handleSelect(key, index)"
                trigger="hover"
                :options="fullOptions"
              >
                <n-icon :size="20" v-show="!isShowEditing(index)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    viewBox="0 0 32 32"
                  >
                    <circle cx="8" cy="16" r="2" fill="currentColor"></circle>
                    <circle cx="16" cy="16" r="2" fill="currentColor"></circle>
                    <circle cx="24" cy="16" r="2" fill="currentColor"></circle>
                  </svg>
                </n-icon>
              </n-dropdown>
            </n-flex>
          </n-list-item>
        
        </n-list>

        <template v-else>
          <n-flex justify="center" align="center" vertical style="flex: 1">
            <n-flex
              justify="start"
              align="start"
              style="min-height: 400px; width: 100%"
              vertical
            >
              <template v-if="dataList[currentPanoEditing].panos.length > 0">
                <n-list
                  hoverable
                  clickable
                  style="--n-color-modal: none; width: 100%"
                  :show-divider="false"
                >
                <Sortable
                  :list="dataList[currentPanoEditing].panos"
                  itemKey="id"
                  options="options"
                  @end="logEvent"
                >
                <template #item="{ element, index }">
                  <!-- v-for="(pano, index) in dataList[currentPanoEditing].panos" -->
                  <n-list-item
                    
                    :key="index"
                  >
                    <n-flex justify="space-between">
                      {{ element.index }}
                      <n-icon
                        :size="20"
                        @click="handlePanoDel(index)"
                        :color="'red'"
                      >
                        <TrashOutline />
                      </n-icon>
                    </n-flex>
                  </n-list-item>
                  </template>
                </Sortable>
                </n-list>
              </template>
              <n-flex v-else justify="center" style="width: 100%">
                <span> 暂没数据，请选择线路</span>
              </n-flex>
            </n-flex>

            <n-button
              type="primary"
              @click="handleItemSubmit"
              style="width: 130px"
              >确定并返回列表
            </n-button>
          </n-flex>
        </template>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch, watchEffect } from 'vue'
import { sdk, clearScreen, sdk_mounted } from '@/sdk'
import { onMounted, onUnmounted } from 'vue'
import { Sortable } from 'sortablejs-vue3'
import {
  // NRadio,
  // NPopover,
  useDialog,
  useMessage,
  NDropdown,
  NList,
  NListItem,
  NInputGroup
} from 'naive-ui'
import { WalkSharp, TrashOutline, EllipsisHorizontal } from '@vicons/ionicons5'
import { useMainStore } from '@/store'

const panos = ref([])
const newDataList = ref<object[]>([])
const main = useMainStore()
const currentEditing = ref(NaN)
const currentPanoEditing = ref()
const isPanoEditing = ref(false)
const naviData = computed(() => main.getEditorData.navigation)
const dataList = ref<
  {
    title: string
    panos: any[]
  }[]
>([])
const logEvent = (evt) => {
  const changeData = newDataList.value.splice(evt.oldIndex || 0, 1)
  newDataList.value.splice(evt.newIndex || 0, 0, changeData[0])
  const origin = dataList.value[currentPanoEditing.value]
  origin.panos = newDataList.value
  console.log('end', evt, newDataList.value)
}
const handleAdd = () => {
  dataList.value.push({
    title: '新增路线',
    panos: []
  })

  handleSelect("1",dataList.value.length-1)

  main.syncNavigation(dataList.value)
}
watchEffect(() => {
  if (naviData.value) {
    dataList.value = naviData.value
  }
})

onMounted(() => {
 
})

onUnmounted(() => {
  sdk_mounted((sdk) => {
    sdk.PanoCheckManager.leave()
    clearScreen(false)
  })
})

defineProps<{ msg: string }>()

const dialog = useDialog()
const message = useMessage()

const active = ref(true)

const fullOptions = ref([
  {
    label: '编辑',
    key: '1'
  },
  {
    label: '删除',
    key: '2'
  }
])

const handleSelect = (key: string, index: number) => {
  // console.log('handleSelect', key)
  switch (key) {
    case '1':
      handleListEdit(index)
      break
    case '2':
      handleListDel(index)
      break
  }
}

const handleListEdit = (index: number) => {
  console.log('handleListEdit', index)
  currentPanoEditing.value = index
  isPanoEditing.value = true
  
  sdk_mounted((sdk) => {
    sdk.Scene.whenLoaded(() => {
      sdk.PanoCheckManager.enter(dataList.value[index].panos)
      sdk.PanoCheckManager.echo((list: any) => {
        panos.value = list
      })
      clearScreen(true)
    })
  })
}

const handleListDel = (index: number) => {
  console.log('handleListDel', index)
  dataList.value.splice(index, 1)
}

const isShowEditing = computed(() => (i: number) => currentEditing.value === i)

const handleItem = (index: number) => {
  console.log('handleItem', index)
  currentEditing.value = index
}

const handleItemSubmit = () => {
  isPanoEditing.value = false
  main.syncNavigation(dataList.value)
  sdk_mounted((sdk) => {
    // 重置状态
    sdk.PanoCheckManager.leave()
    clearScreen(false)
  })
}
const handlePanoDel = (index: number) => {
  const origin = dataList.value[currentPanoEditing.value].panos
  const panoId = origin[index].id
  origin && origin.splice(index, 1)
  sdk_mounted((sdk) => {
    sdk.Scene.whenLoaded(() => {
      sdk.PanoCheckManager.setPanoChecked(panoId,false)
    })
  })
 
}
watch(
  [panos, isPanoEditing],
  () => {
    if (isPanoEditing.value && typeof currentPanoEditing.value === 'number') {
      const origin = dataList.value[currentPanoEditing.value]
      if (origin && panos.value.length > 0) {
        origin.panos = panos.value
      }
      console.log('panos', origin.panos)
      newDataList.value = JSON.parse(JSON.stringify(origin.panos))
    }
  },
  {
    deep: true,
    immediate: true
  }
)
</script>

<style lang="sass" scoped>
a
  color: #42b983

label
  margin: 0 0.5em
  font-weight: bold

code
  background-color: #eee
  padding: 2px 4px
  border-radius: 4px
  color: #304455
</style>