<template>
    <a-button v-if="props.isCreate" type="primary" @click="handleClick">
      <template #icon><icon-plus /></template>
      新建
    </a-button>
    <a-button
      v-if="!props.isCreate"
      type="outline"
      size="small"
      :style="{ marginRight: '10px', padding: '7px' }"
      @click="handleClick"
    >
      <template #icon><icon-edit /></template>
      修改
    </a-button>
    <a-modal
      width="700px"
      :visible="visible"
      @ok="handleSubmit"
      @cancel="handleCancel"
    >
      <template #title>{{ modalTitle }}</template>
      <a-form ref="createEditRef" :model="formData" :style="{ width: '650px' }">
        <a-form-item
          field="name"
          label="权限名称"
          :validate-trigger="['change', 'input']"
          :rules="[{ required: true, message: t('auth.info.name.required') }]"
        >
          <a-input
            v-model="formData.name"
            placeholder="请输入权限名称"
          />
        </a-form-item>
  
        <a-form-item field="remark" label="备注">
          <a-textarea
            v-model="formData.remark"
            :show-word-limit="true"
            placeholder="请输入备注"
            style="height: 100px"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </template>
  
  <script lang="ts" setup>
  import { useI18n } from 'vue-i18n';
  import useVisible from '@/hooks/visible';
  import { computed, PropType, ref } from 'vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { Message } from '@arco-design/web-vue';
  import { AuthRecord } from '@/api/authority';
  import { useAuthStore } from '@/store';
  
  const props = defineProps({
    prem: {
      type: Object as PropType<AuthRecord>,
    },
    isCreate: Boolean,
  });
  const { t } = useI18n();
  const modalTitle = computed(() => {
    return props.isCreate ? t('Create Auth Info') : t('Edit Auth Info');
  });
  const { visible, setVisible } = useVisible(false);
  const createEditRef = ref<FormInstance>();
  const authStore = useAuthStore();
  const formData = ref<AuthRecord>({
    id: '',
    name: '',
    // dataScope: '',
    // permissionIds: [],
    enabled: true,
    remark: '',
    // authorities: [],
  });
  
  const emit = defineEmits(['refresh']);
  
  // 组件被点击
  const handleClick = () => {
    const authId = props.prem?.id;
    // 编辑
    if (!props.isCreate && authId) {
      authStore
        .getAuthDetail(authId)
        .then((res:any) => {
          formData.value = res.data;
        })
        .then(() => {
          setVisible(true);
        });
    } else {
      setVisible(true);
    }
  };
  
  // 提交
  const handleSubmit = async () => {
    const valid = await createEditRef.value?.validate();
    if (!valid) {
      // 新增
      if (props.isCreate) {
        const res = await authStore.createAuth(formData.value);
        if (res.status === 200) {
          Message.success({
            content: t('create.sucess'),
            duration: 5 * 1000,
          });
        }
        createEditRef.value?.resetFields();
      } else {
        // 编辑
        const res = await authStore.updateAuth(formData.value);
        if (res.status === 200) {
          Message.success({
            content: t('modify.sucess'),
            duration: 5 * 1000,
          });
        }
      }
      emit('refresh');
      setVisible(false);
    }
  };
  
  // 关闭
  const handleCancel = async () => {
    createEditRef.value?.resetFields();
    setVisible(false);
  };
  </script>
  
  <style scoped></style>
  