<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"
        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="itemName"
              label="名称"
              :rules="rules.itemName"
            >
              <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-col
            :span="12"
            :offset="0"
          >
            <el-form-item
              prop="englishName"
              label="英文名称"
              :rules="defineRules"
            > 
              <div class="flex english-name">
                <el-input v-model="addModel.englishName" />
                <el-checkbox
                  v-model="addModel.paramterFlag"
                  :false-label="0"
                  :true-label="1"
                  label="参数"
                />
              </div>
            </el-form-item>
          </el-col>
        </el-row>   
        <el-row>
          <el-col
            :span="12"
            :offset="0"
          >        
            <el-form-item
              prop="itemType"
              label="费用类型"
            >           
              <el-select
                v-model="addModel.itemType"
                clearable
                filterable="true"
                placeholder="请选择费用类型"
              >
                <el-option
                  v-for="item in feeItemTypeSelectList"
                  :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()
// TODO 参数标志 ==》 复选框 ==》 为true ==》 英文名称 为必填内容
/**
 * 参数标志
 *
 * @mbg.generated
 */
// private Integer paramterFlag;
/**
 * 英文名称
 *
 * @mbg.generated
 */
// private String englishName;
//声明事件
const emit = defineEmits(['save'])

const { rules } = useBaseModel();

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

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

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show
})
</script>
<style scoped lang='scss'>
.english-name {
  .el-checkbox {
    margin-left: 8px;
    :deep(.el-checkbox__label) {
      padding-left: 0;
    }
  }
}
</style>