<template>
  <n-popover
    id="config-popover"
    :show="showPopover"
    :x="position[0]"
    :y="position[1]"
    trigger="manual"
    placement="right-start"
  >
    <section>
      <div class="head">
        <p class="title">调整数据</p>
        <n-button type="primary" text @click="closePopover">
          <n-icon size=".18rem">
            <CloseCircleOutline />
          </n-icon>
        </n-button>
      </div>
      <div class="content">
        <n-space>
          <n-radio
            :checked="checkedValue === 'originValue'"
            value="originValue"
            size="small"
            @change="onChange"
          >
            使用初始值
          </n-radio>
        </n-space>
        <n-space align="center">
          <n-radio
            :checked="checkedValue === 'newValue'"
            value="newValue"
            size="small"
            @change="onChange"
          >
            使用配置值
          </n-radio>
          <n-input
            v-model:value="newValue"
            :disabled="checkedValue !== 'newValue'"
            size="small"
          />
        </n-space>
        <n-space justify="center">
          <n-button size="small" type="primary" @click="saveConfig">
            确定
          </n-button>
        </n-space>
      </div>
    </section>
  </n-popover>
</template>

<script lang="ts" setup>
import { computed, onBeforeUnmount, PropType, ref, watch } from 'vue'
import { NPopover, NSpace, NIcon, NButton, NRadio, NInput } from 'naive-ui'
import { CloseCircleOutline } from '@vicons/ionicons5'
import { getSelectorPath } from '@dom-utils/selector-path'
import useSettings, { Settings } from '@/hooks/useSettings'

const props = defineProps({
  settings: {
    type: Array as PropType<Settings>,
    required: true,
  },
})
const emit = defineEmits(['save'])
const showPopover = ref(false)
const position = ref<[number, number]>([0, 0])
const changes = computed(() => props.settings)
let curEle: HTMLElement | undefined
const timer: any = null

const handler = (e) => {
  e.preventDefault()
  curEle = e.target as HTMLElement
  if (!curEle.innerText || curEle.children.length > 0) return

  const { clientX, clientY } = e
  position.value = [clientX, clientY]
  showPopover.value = true
  checkValue()
}
function checkValue() {
  if (!curEle) return
  const path = getSelectorPath(curEle)
  const index = changes.value.findIndex((item) => item.path === path)
  if (index >= 0) {
    checkedValue.value = 'newValue'
    newValue.value = curEle.innerText
  } else {
    checkedValue.value = 'originValue'
    newValue.value = ''
  }
}

document.addEventListener('contextmenu', handler)

watch(
  () => changes.value,
  (changes) => {
    useSettings(changes)
  },
  { immediate: true },
)
onBeforeUnmount(() => {
  document.removeEventListener('contextmenu', handler)
})

const newValue = ref('')
const checkedValue = ref('originValue')
function onChange(e) {
  checkedValue.value = e.target.value
}
function saveConfig() {
  if (!curEle) return
  const path = getSelectorPath(curEle)
  const result = [...changes.value]
  const index = result.findIndex((item) => item.path === path)
  if (checkedValue.value === 'newValue') {
    if (index >= 0) {
      result[index].value = newValue.value
    } else {
      result.push({
        path,
        value: newValue.value,
        pastValue: curEle.innerText,
      })
    }
    curEle.innerText = newValue.value
  } else if (checkedValue.value === 'originValue') {
    if (index >= 0) {
      curEle.innerText = result[index].pastValue
      result.splice(index, 1)
    }
  }
  emit('save', result)
}

function closePopover() {
  showPopover.value = false
  newValue.value = ''
  checkedValue.value = 'originValue'
}
</script>

<style lang="stylus">
@import '../../components/MyComponent/main.styl'
#config-popover
  $blur()
  font-size .1rem
  padding 0
  width 3rem
  box-sizing border-box
  .head
    display flex
    align-items center
    justify-content space-between
    border-bottom .01rem solid $font-color
    padding .04rem .08rem
    box-sizing inherit
    font-size .12rem
    font-weight bold
  .content
    padding .08rem
    box-sizing inherit
</style>
