<template>
  <div>
    <q-dialog ref="dialogRef" allow-focus-outside v-bind="attrs">
      <q-card
        :style="{
          width: attrs.maximized ? '100vw' : width,
          'max-width': '100vw',
          height: attrs.maximized ? '100vh' : height,
          'max-height': '100vh',
        }"
      >
        <q-card-section :style="headerStyle">
          <div class="flex justify-between">
            <div class="text-h6">{{ title }}</div>
            <div class="flex justify-end q-gutter-md">
              <q-btn :label="$t('confirm')" dense color="primary" style="width: 100px" @click="addMenu" />
              <q-btn v-close-popup dense flat icon="close" :title="$t('close')"> </q-btn>
            </div>
          </div>
        </q-card-section>
        <q-card-section class="q-pt-none" :style="bodyStyle">
          <div class="row">
            <div class="col-12">
              <q-input v-model="name" type="input" label="名称" outlined autocomplete="false" class="p-1" />
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <q-input v-model="icon" type="input" label="图标" outlined autocomplete="false" class="p-1" />
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <q-checkbox v-model="enable" label="是否可用" />
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <q-input v-model="order" type="input" label="排序" outlined autocomplete="false" class="p-1" />
            </div>
          </div>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>
<script setup lang="ts">
import { useAttrs, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { axios, Environment } from 'platform-core';

const attrs = useAttrs();

const props = defineProps({
  headerStyle: { type: String, default: 'width:100%;padding: 16px 8px 4px 16px' },
  bodyStyle: { type: String, default: 'padding: 0px 8px 0px 8px;height:calc(100%)' },
  title: { type: String, default: '' },
  width: { type: String, default: '70%' },
  height: { type: String, default: '70%' },
});

const { t } = useI18n();

const dialogRef = ref();
const callbackRef = ref();

const name = ref();
const icon = ref();
const enable = ref(true);
const order = ref(0);

const addMenu = () => {
  const data = {
    type: 'ROUTE',
    enable: enable.value,
    order: order.value,
    parentId: null,
    name: name.value,
    icon: icon.value,
  };

  axios.post(Environment.apiContextPath('/api/system/menu/addMenu'), data).then(() => {
    dialogRef.value.hide();
    if (callbackRef.value) {
      callbackRef.value();
    }
  });
};

const show = (callback) => {
  callbackRef.value = callback;
  dialogRef.value.show();
};

const hide = () => {
  dialogRef.value.hide();
};

defineExpose({
  show,
  hide,
});
</script>
