<script setup lang="ts">
import { onMounted, reactive, ref, computed, watch } from "vue";
import summaryLayoutStore from '@/store/modules/summaryLayout'
import { Subject } from "@/types/subject";
import useStructureRouter from "@/composables/useStructureRouter";

const { setRightStdBillVisible, setRightLibRationVisible } = summaryLayoutStore

const rightStdBillVisible = computed({
  get: () => summaryLayoutStore.rightStdBillVisible,
  set: val => setRightStdBillVisible(val),
});

const rightLibRationVisible = computed({
  get: () => summaryLayoutStore.rightLibRationVisible,
  set: val => setRightLibRationVisible(val),
});

const collapseIconDisabled = computed(() => !rightStdBillVisible.value && !rightLibRationVisible.value)

const emit = defineEmits<{
  (e: 'right-visible-change', needRender: boolean): void
}>()

const handleStdBillClick = () => {
  if (rightStdBillVisible.value)
    return
  emit('right-visible-change', collapseIconDisabled.value)

  rightStdBillVisible.value = true
  rightLibRationVisible.value = false
}

const handleLibRationClick = () => {
  if (rightLibRationVisible.value)
    return
  emit('right-visible-change', collapseIconDisabled.value)

  rightLibRationVisible.value = true
  rightStdBillVisible.value = false
}

const hide = () => {
  if (collapseIconDisabled.value)
    return
  emit('right-visible-change', true)

  rightStdBillVisible.value = false
  rightLibRationVisible.value = false
}

const structure = useStructureRouter()
// 监听 structure 改变
watch(structure, val => {
  console.log('tool bar 结构', val)
})

</script>

<template>
  <section class="tool-bar">
    <div class="tools">
      <el-dropdown trigger="click">
        <el-tooltip content="导入" placement="top" :offset="10">
          <el-button size="small" class="submenu">
            <iconfont class="dsk-upload" />
          </el-button>
        </el-tooltip>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="item1">这是一个非常非常非常长的菜单1</el-dropdown-item>
            <el-dropdown-item command="item2">这是菜单2</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-tooltip content="删除" placement="bottom">
        <el-button size="small">
          <iconfont class="dsk-close" />
        </el-button>
      </el-tooltip>
      <el-tooltip content="升级" placement="bottom">
        <el-button size="small">
          <iconfont class="dsk-arrow-left" />
        </el-button>
      </el-tooltip>
      <el-tooltip content="降级" placement="bottom">
        <el-button size="small">
          <iconfont class="dsk-arrow-right" />
        </el-button>
      </el-tooltip>
      <el-tooltip content="上移" placement="bottom">
        <el-button size="small">
          <iconfont class="dsk-arrow-up" />
        </el-button>
      </el-tooltip>
      <el-tooltip content="下移" placement="bottom">
        <el-button size="small">
          <iconfont class="dsk-arrow-down" />
        </el-button>
      </el-tooltip>
    </div>
    <div class="menus">
      <span class="menu-item" :class="{ active: rightStdBillVisible }" @click="handleStdBillClick">
        <i class="text">标准清单</i>
      </span>
      <span
        class="menu-item"
        :class="{ active: rightLibRationVisible }"
        @click="handleLibRationClick"
      >
        <i class="text">定额库</i>
      </span>
      <span class="menu-item" @click="hide" :class="{ disabled: collapseIconDisabled }">
        <iconfont class="icon dsk-menu-unfold" />
      </span>
    </div>
  </section>
</template>

<style lang="scss" src="./style.scss" scoped></style>
