<script setup>
import { shallowRef, watchEffect } from "vue";
import { useFocusHub } from "jsview";
const props = defineProps({
  name: String,
  onAction: Function,
  focused: Boolean,
});

let focusId = shallowRef(0);

const focusHub = useFocusHub();
watchEffect(() => {
  if (props.focused) {
    focusHub.setFocus(props.name);
  }
});

const onKeyDown = (ev) => {
  switch (ev.keyCode) {
    case 37:
      if (focusId.value == 1) {
        focusId.value = 0;
      }
      break;
    case 39:
      if (focusId.value == 0) {
        focusId.value = 1;
      }
      break;
    case 10000:
    case 27:
    case 8:
      props.onAction("back");
      break;
    case 13:
      props.onAction(focusId.value == 0 ? "ok" : "cancel");
      break;
    default:
  }
  return true;
};
const actionDefines = {
  onKeyDown,
};

const funcDialogOuterClick = () => {
  console.log("Clicked on dialog outer");
  props.onAction("back");
};

const funcDialogBackClick = () => {
  console.log("Clicked on dialog back");
};

const funcDialogOKClick = () => {
  props.onAction("ok");
};

const funcDialogNGClick = () => {
  props.onAction("cancel");
};
</script>

<template>
  <jsv-focus-block :name="props.name" :onAction="actionDefines">
    <div :style="{ width: 1280, height: 720 }" @click="funcDialogOuterClick" />
    <div :style="{ top: 200, left: 465 }">
      <div class="background" @click="funcDialogBackClick"></div>
      <div class="message">是否退出</div>
      <div :style="{ top: 120, left: 30 }">
        <div v-if="focusId == 0" class="focus"></div>
        <div class="normal" @click="funcDialogOKClick">确定</div>
      </div>
      <div :style="{ top: 120, left: 220 }">
        <div v-if="focusId == 1" class="focus"></div>
        <div class="normal" @click="funcDialogNGClick">取消</div>
      </div>
    </div>
  </jsv-focus-block>
</template>

<style scoped>
.focus {
  top: -5;
  left: -5;
  width: 100;
  height: 50;
  background-color: #0000ff;
}

.normal {
  width: 90;
  height: 40;
  color: #ffffff;
  text-align: center;
  font-size: 30;
}

.background {
  left: 0;
  top: 0;
  width: 350;
  height: 200;
  background-color: rgba(0, 0, 0, 0.7);
}

.message {
  top: 20;
  width: 350;
  height: 50;
  color: #ffffff;
  font-size: 40;
  text-align: center;
}
</style>
