<template>
  <base-dialog v-model="visible" unless :width="250" center @close="onCancelSubmit">
    <div class="m-t-base confirm-text">是否继续进入下一页?</div>
    <template #footer>
      <div class="flex items-center justify-between">
        <el-button ref="confirmButtonRef" class="confirm-button" type="primary" @click="onConfirmSubmit">
          是(Y)
        </el-button>
        <el-button ref="cancelButtonRef" class="confirm-button" plain @click="onCancelSubmit">否(N)</el-button>
      </div>
    </template>
  </base-dialog>
</template>
<script name="RowNextBottomDialog" setup lang="ts">
import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
import BaseDialog from '@/components/element/BaseDialog.vue'
import { ElButton } from 'element-plus'
import useMainStore from '@/store/main'
import bus from '@/utils/bus'
const mainStore = useMainStore()
const confirmButtonRef = ref()
const cancelButtonRef = ref()
const visible = ref(false)
const onConfirmSubmit = () => {
  bus.emit('toNextTablePage')
  mainStore.setRowNextBottomDialogStatus(false)
}
const onCancelSubmit = () => {
  mainStore.setRowNextBottomDialogStatus(false)
}
watch(
  () => mainStore.showRowNextBottomDialog,
  (val: boolean) => {
    visible.value = val
    if (val) {
      nextTick(() => {
        ;(confirmButtonRef.value?.ref as unknown as HTMLButtonElement)?.focus()
      })
    }
  }
)
const yesOrNo = (e: any) => {
  if (e.key === 'ArrowLeft') {
    ;(confirmButtonRef.value?.ref as unknown as HTMLButtonElement)?.focus()
  }
  if (e.key === 'ArrowRight') {
    ;(cancelButtonRef.value?.ref as unknown as HTMLButtonElement)?.focus()
  }
}
onMounted(() => {
  document.addEventListener('keyup', yesOrNo)
})
onBeforeUnmount(() => {
  document.removeEventListener('keyup', yesOrNo)
})
</script>
<style lang="scss" scoped>
.confirm-text {
  font-size: $BaseFont;
  color: $NormalColor;
}
.confirm-button {
  width: 90px;
}
</style>
