<template>
  <template v-if="Array.isArray(btnConfig)">
    <n-button
      v-for="(btn, idx) in btnConfig"
      v-show="visibleFormItem(btn.show, props.fatherData)"
      :key="idx"
      v-permission="btn.permission"
      :type="btn.type"
      tertiary
      :loading="btn.loading"
      :circle="btn.circle"
      class="fl-mx-xs"
      :class="btn.class"
      :style="calcBtnStyle(btn)"
      :disabled="btn.disable"
      @click.stop="handleClick(btn)"
    >
      {{ btn.label }}
    </n-button>
  </template>
  <template v-else-if="btnConfig.tooltip">
    <n-popover trigger="hover">
      <template #trigger>
        <n-button
          v-show="visibleFormItem(btnConfig.show, props.fatherData)"
          v-permission="btnConfig.permission"
          :type="btnConfig.type"
          tertiary
          :loading="btnConfig.loading"
          :circle="btnConfig.circle"
          class="fl-mx-xs"
          :class="btnConfig.class"
          :style="calcBtnStyle(btnConfig)"
          :disabled="btnConfig.disable"
          @click.stop="handleClick(btnConfig)"
        >
          {{ btnConfig.label }}
        </n-button>
      </template>
      <span>{{ btnConfig.tooltipLabel }}</span>
    </n-popover>
  </template>
  <template v-else>
    <n-button
      v-show="visibleFormItem(btnConfig.show, props.fatherData)"
      v-permission="btnConfig.permission"
      :type="btnConfig.type"
      tertiary
      :loading="btnConfig.loading"
      :circle="btnConfig.circle"
      class="fl-mx-xs"
      :class="btnConfig.class"
      :style="calcBtnStyle(btnConfig)"
      :disabled="btnConfig.disable"
      @click.stop="handleClick(btnConfig)"
    >
      {{ btnConfig.label }}
    </n-button>
  </template>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import { visibleFormItem } from "@/utils/helper/form";

const props = defineProps({
  fatherData: {
    type: Object,
  },
  btnConfig: {
    type: [Array, Object],
    required: true,
  },
});

const state = reactive({
  defaultStyle: "",
});

onMounted(() => {});

const emit = defineEmits(["triggerClick"]);
import { debounce } from "lodash-es";

const handleClick = debounce((btnConfig) => {
  if (btnConfig.loading) {
    return;
  }
  emit("triggerClick", btnConfig);
}, 300);

const calcBtnStyle = (btnConfig) => {
  let baseStyle = "";

  if (btnConfig.btnNo === 1) {
    baseStyle = "background: #288B7F; color: #fff;";
  } else if (btnConfig.btnNo === 2) {
    baseStyle = "background: #286D8B; color: #fff;";
  } else if (btnConfig.btnNo === 3) {
    baseStyle = "background: #28438B; color: #fff;";
  } else if (btnConfig.btnNo === 4) {
    baseStyle = "background: #5068A7; color: #fff;";
  } else if (btnConfig.btnNo === 21) {
    baseStyle = "background: #CAEBE7; color: #288B7F;";
  } else if (btnConfig.btnNo === 22) {
    baseStyle = "background: #D6ECF5; color: #288B7F;";
  } else if (btnConfig.btnNo === 23) {
    baseStyle = "background: #D4DDF4; color: #288B7F;";
  } else if (btnConfig.btnNo === 24) {
    baseStyle = "background: #EBF1FF; color: #288B7F;";
  }

  return baseStyle + (btnConfig.style || "");
};
</script>
