<template>
  <SysDialog :title="dialog.title" :width="dialog.width" :height="dialog.height" :visible="dialog.visible"
    @onClose="onClose" @onConfirm="confirm">
    <template #content>
      <el-form ref="addFeeItemForm" :model="addModel" :rules="rules" label-width="80px" size="mini">
        <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="itemName" label="名称">
              <el-input v-model="addModel.itemName"/>
            </el-form-item>
          </el-col>
        </el-row>  
        <el-row>
          <el-col :span="12" :offset="0">        
            <el-form-item
              prop="feeItemSpecialFlag"
              label="特殊费用"
            >           
              <el-select
                v-model="addModel.feeItemSpecialFlag"
                clearable
                filterable="true"
                placeholder="请选择特殊费用"
              >
                <el-option
                  v-for="item in feeItemSpecialFlagSelectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </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/feeItem/useBaseModel'
import useAddFeeItem from '@/composables/feeItem/useAddFeeItem';
//弹框属性
const { dialog, onClose, onShow } = useDialog()

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

const { rules } = useBaseModel();

const { confirm, show, addModel, addFeeItemForm,pickerOptions } = useAddFeeItem(dialog, onClose, onShow, emit)

 //费项科目类型下拉列表框
 const props = defineProps({feeItemSpecialFlagSelectList: {type: Object}});   

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

</style>