<template>
  <el-drawer v-model="isDrawer" :size="width" :title="title" @close="handleReset">
    <el-form
      :model="formParams"
      :rules="rules"
      ref="formRef"
      label-placement="left"
      :label-width="80"
    >
      <el-form-item label="配置名称" prop="configName">
        <el-input placeholder="请输入配置名称" v-model="formParams.configName" />
      </el-form-item>
      <el-form-item label="配置编码" prop="configCode">
        <el-input placeholder="请输入配置编码" v-model="formParams.configCode" />
      </el-form-item>
      <el-form-item label="配置值" prop="configValue">
        <el-input placeholder="请输入配置值" v-model="formParams.configValue" />
      </el-form-item>
      <el-form-item label="描述" prop="configDesc">
        <el-input type="textarea" placeholder="请输入配置描述" v-model="formParams.configDesc" />
      </el-form-item>
      <el-form-item label="排序" prop="configOrder">
        <el-input-number placeholder="显示排序" v-model="formParams.configOrder" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-space>
        <el-button @click="handleReset">重置</el-button>
        <el-button type="primary" :loading="subLoading" @click="formSubmit">提交</el-button>
      </el-space>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import type { formParamsType } from './types';

  import { addConfig, editConfig, configInfo } from '@/api/system/config';

  const rules = {
    configName: {
      required: true,
      message: '配置名称不能为空',
      trigger: 'blur',
    },
    configCode: {
      required: true,
      message: '配置编码不能为空',
      trigger: 'blur',
    },
    configValue: {
      required: true,
      message: '配置值不能为空',
      trigger: 'blur',
    },
  };

  const emit = defineEmits(['change']);

  defineProps({
    title: {
      type: String,
      default: '添加配置',
    },
    width: {
      type: Number,
      default: 450,
    },
    permissionList: {
      type: Array,
    },
  });

  const defaultValueRef = () => ({
    id: null,
    configCode: '',
    configDesc: '',
    configName: '',
    configOrder: undefined,
    configValue: '',
  });

  const message = ElMessage;
  const formRef: any = ref(null);
  const isDrawer = ref(false);
  const subLoading = ref(false);

  const formParams = ref<formParamsType>(defaultValueRef());

  function openDrawer(id?) {
    if (id) {
      formParams.value.id = id;
      getInfo();
      return;
    }
    isDrawer.value = true;
  }

  function closeDrawer() {
    isDrawer.value = false;
  }

  function formSubmit() {
    formRef.value.validate((valid) => {
      if (!valid) {
        return message.error('请填写完整信息');
      }
      if (formParams.value.id) {
        editConfig(formParams.value).then((_) => {
          message.success('编辑成功');
          emit('change');
          handleReset();
          closeDrawer();
        });
      } else {
        addConfig(formParams.value).then((_) => {
          message.success('添加成功');
          emit('change');
          handleReset();
          closeDrawer();
        });
      }
    });
  }

  function handleReset() {
    formRef.value.resetFields();
    formParams.value = Object.assign(formParams.value, defaultValueRef());
  }

  function getInfo() {
    configInfo({ id: formParams.value.id }).then((res) => {
      const info = {
        id: res.id,
        configCode: res.configCode,
        configDesc: res.configDesc,
        configName: res.configName,
        configOrder: res.configOrder,
        configValue: res.configValue,
      };
      formParams.value = info;
      isDrawer.value = true;
    });
  }

  defineExpose({
    openDrawer,
    closeDrawer,
  });
</script>
