<template>
  <split-pane :min-percent="10" :default-percent="15" split="vertical" style="height: calc(100vh - 110px)">
    <template slot="paneL">
      <!-- <el-button @click="setIsLeaderPosition">设置是否主阵地 {{ isLeaderPosition }}</el-button>
      <el-radio-group v-model="select" @change="SET_SELECTED_POSITION" v-if="isLeaderPosition">
        <el-radio v-for="item in ['sma-1', 'ams-2']" :key="item" :label="item">{{ item }}</el-radio>
      </el-radio-group> -->
      <SideMenu @handleNodeClick="handleNodeClick"></SideMenu>
    </template>
    <template slot="paneR">
      <RightList ref="listRef"></RightList>
    </template>
  </split-pane>
</template>
<script lang="ts">
import { defineComponent, ref, unref } from 'vue'
import SplitPane from 'vue-splitpane'
import SideMenu from './SideMenu.vue'
import RightList from './List.vue'
import usePostion from '@/views/usePostion'
const addStorageEvent = (key, data) => {
  // 创建一个StorageEvent事件
  var newStorageEvent = document.createEvent('StorageEvent')
  const storage = {
    setItem: function (k, val) {
      sessionStorage.setItem(k, val)
      // 初始化创建的事件
      newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null)
      // 派发对象
      window.dispatchEvent(newStorageEvent)
    },
  }
  return storage.setItem(key, data)
}
export default defineComponent({
  components: { SplitPane, SideMenu, RightList },
  setup() {
    // eslint-disable-next-line
    const { isLeaderPosition } = usePostion(() => {
      handleNodeClick(unref(lastNode))
    })
    const lastNode = ref(null)
    const listRef = ref()
    function handleNodeClick(node: any) {
      lastNode.value = node
      const { type, id } = node
      if (type === 'module') {
        listRef.value.init(node)
      }
    }
    const select = ref('')
    const SET_SELECTED_POSITION = () => {
      addStorageEvent('selectPostion', unref(select))
    }
    const setIsLeaderPosition = () => {
      const val = Math.random() > 0.5
      addStorageEvent('isLeaderPosition', val)
      if (!val) addStorageEvent('selectPostion', '')
    }
    return {
      listRef,
      handleNodeClick,
      isLeaderPosition,
      setIsLeaderPosition,
      select,
      SET_SELECTED_POSITION,
    }
  },
})
</script>
