<script lang="ts" setup name="Tool">
import vTransferDom from '@jinglun/view-design/src/directives/transfer-dom'
import vClickOutside from '@jinglun/view-design/src/directives/clickoutside'
const emits = defineEmits(['change-theme', 'change-nav'])

const themeShow = ref(false)
const theme = ref(false)
const showNav = ref(true)
const xxxref = ref()
const handleClickOutSide = function (e) {
  // 当外部被点击时调用
  if (themeShow.value) {
    themeShow.value = false
  }
}
</script>

<template>
  <div>
    <div>
      <img
        class="ml-15px mt-15px cursor-pointer"
        :src="
          theme
            ? $getImageUrl('nav/左侧菜单-底部操作-black.svg')
            : $getImageUrl('nav/左侧菜单-底部操作.svg')
        "
        @click.stop="themeShow = !themeShow"
      />
      <div
        ref="xxxref"
        v-transfer-dom
        v-click-outside="handleClickOutSide"
        :data-transfer="true"
      >
        <div
          v-show="themeShow"
          class="absolute flex justify-center rounded-5px flex-col shadow-box left-40px w-150px h-80px bottom-20px text-[#333333] bg-[#fff]"
          style="z-index: 15000"
        >
          <div
            class="flex-1 mx-10px flex items-center justify-between"
          >
            <span>深色模式</span>
            <ISwitch
              v-model="theme"
              true-color="#56be56"
              class="mr-12px"
              @on-change="value => emits('change-theme', value)"
            />
          </div>
          <hr class="w-120px ml-15px" />
          <div
            class="flex-1 mx-10px flex items-center justify-between"
          >
            <span>显示侧边栏</span>
            <ISwitch
              v-model="showNav"
              class="mr-12px"
              true-color="#56be56"
              @on-change="value => emits('change-nav', value)"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
::v-deep .ivu-switch-checked::after {
  left: 9px !important;
}

::v-deep .ivu-switch {
  width: 24px !important;
  height: 16px !important;
}

::v-deep .ivu-switch::after {
  width: 12px !important;
  height: 12px !important;
  border-radius: 12px !important;
}
</style>
