<template>
  <el-dialog :title="form.id ? `编辑${typeObj[type]}` : `添加${typeObj[type]}`" width="400px" v-model="visible"
    @closed="resetForm">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" label-position="left">
      <el-form-item :label="`${typeObj[type]}名称`" prop="name">
        <el-input placeholder="请输入" :maxlength="30" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="排序值">
        <el-input placeholder="请输入" :maxlength="20" v-model="form.sort"
          @input="e => form.sort = filterNumberInput(e, 0)"></el-input>
      </el-form-item>
      <el-form-item label="启用状态">
        <el-switch v-model="form.isEnable" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog_footer">
        <div class="btn">
          <el-button size="large" style="width: 100%;" @click="visible = false">取 消</el-button>
        </div>
        <div class="btn">
          <el-button size="large" type="primary" :loading="loading" style="width: 100%;" @click="submitHandle">确
            定</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { filterNumberInput } from '@/utils'
import { roleTemplateAdd } from "@/api/account/roleTemplate";

// 1添加模板 2添加类型
const type = ref(1)
const typeObj = ref({
  1: '模板',
  2: '角色'
})

// 1添加 2编辑
const addType = ref(1)

const visible = ref(false)
const formRef = ref(null)
const loading = ref(false)
const form = ref({
  name: '',
  sort: 0,
  isEnable: 1,
  roleId: '',
  pid: ''
})
const rules = ref({
  name: [
    {
      required: true,
      message: '请输入模板名称',
      triiger: 'blur'
    }
  ]
})

function resetForm() {
  form.value = {
    name: '',
    sort: '',
    isEnable: 1
  }
  formRef.value.resetFields()
}

// 提交
const emits = defineEmits(['success'])
function submitHandle() {
  formRef.value.validate(async vaild => {
    try {
      if (vaild) {
        loading.value = true
        if (form.value.sort === '') {
          form.value.sort = 0
        }
        await roleTemplateAdd(form.value)

        ElNotification({
          title: '注意',
          message: '添加成功',
          type: 'success'
        })

        emits('success')

        visible.value = false
      }
    } catch (error) {
      console.log(error);
    }
    setTimeout(() => {
      loading.value = false
    }, 500);
  })
}

// t=1模板 2角色 obj=row数据 At=添加还是编辑
function show(t = 1, obj = {}, At = 1) {
  visible.value = true
  type.value = t
  if (obj && obj.id) {
    form.value = { ...obj }
    if (At == 1) {
      if (form.value.pid === null) {
        form.value.pid = form.value.id
        form.value.id = ''
        form.value.name = ''
        form.value.sort = 0
        form.value.isEnable = 1
        form.value.roleId = ''
      }
    }
    console.log('form.value===', form.value);
  }
}

defineExpose({
  show
})
</script>

<style scoped lang="scss">
.dialog_footer {
  display: flex;
  gap: 14px;

  .btn {
    flex: 1;
  }
}
</style>