<template>
  <SysDialog
    :title="dialog.title"
    :width="dialog.width"
    :height="dialog.height"
    :visible="dialog.visible"
    @onClose="onClose"
    @onConfirm="confirm"
  >
    <template #content>
      <el-form
        ref="addFeeItemCategoryForm"
        :model="addModel"
        :rules="rules"
        label-width="80px"
      >
        <el-row>
          <el-col
            :span="12"
            :offset="0"
          >
            <el-form-item
              prop="id"
              label="序号"
            >
              <el-input
                v-model="addModel.id"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col
            :span="12"
            :offset="0"
          >
            <el-form-item
              prop="categoryName"
              label="名称"
            >
              <el-input v-model="addModel.categoryName" />
            </el-form-item>
          </el-col>
        </el-row>      
      </el-form>
    </template>
  </SysDialog>
</template>
<script setup lang='ts'>
import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import useBaseModel from '@/composables/feeItemCategory/useBaseModel'
import useAddFeeItemCategory from '@/composables/feeItemCategory/useAddFeeItemCategory';
//弹框属性
const { dialog, onClose, onShow } = useDialog()

//声明事件
const emit = defineEmits(['save'])

const { rules } = useBaseModel();

const { confirm, show, addModel, addFeeItemCategoryForm,pickerOptions } = useAddFeeItemCategory(dialog, onClose, onShow, emit)

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show
})
</script>
<style scoped lang='scss'>

</style>