<template>
  <SysDialog
    :title="dialog.title"
    :width="dialog.width"
    :height="dialog.height"
    :visible="dialog.visible"
    @onClose="onClose"
    @onConfirm="confirm"
  >
    <template #content>
      <el-form
        ref="addCountryForm"
        :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="twCode"
              label="二字简码"
            >
              <el-input v-model="addModel.twCode" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col
            :span="12"
            :offset="0"
          >
            <el-form-item
              prop="cnName"
              label="中文名称"
            >
              <el-input v-model="addModel.cnName" />
            </el-form-item>
          </el-col>
          <el-col
            :span="12"
            :offset="0"
          >
            <el-form-item
              prop="enName"
              label="英文名称"
            >
              <el-input v-model="addModel.enName" />
            </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/country/useBaseModel'
  import useAddCountry from '@/composables/country/useAddCountry';
  //弹框属性
  const { dialog, onClose, onShow } = useDialog()
  
  //声明事件
  const emit = defineEmits(['save'])

  const {rules} = useBaseModel();
  
  const { confirm, show, addModel, addCountryForm} = useAddCountry(dialog, onClose, onShow,emit)
  
  
  //父组件调用子组件显示弹框
  //暴露出去给外部使用
  defineExpose({
      show
  })
  </script>
  <style scoped lang='scss'>
  </style>