<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle"  :close-on-click-modal="false">
    <el-form ref="basicFormRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="审核人" prop="approver">
            <el-input v-model="formData.approver" placeholder="请输入审核人" :disabled="isDisabled"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="审核内容" prop="approveContent">
            <el-input v-model="formData.approveContent" placeholder="请输入审核内容" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="审核时间" prop="approveTime">
            <el-date-picker
              v-model="formData.approveTime"
              type="datetime"
              value-format="x"
              placeholder="选择审核时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm('success')">确 定</el-button>
      <el-button @click="handleClose('close')">取 消</el-button>
    </template>
  </Dialog>

<!--添加巡检项弹窗-->
  <SearchTable ref="searchTableRef" @searchTableSuccess="searchTableSuccess" />

</template>
<script lang="ts" setup>
import * as MaintenanceApi from '@/api/eam/maintenance'
import { SearchTable } from '@/components/SearchTable'
import {ElInput} from "element-plus";
import {updateMaintenanceAudi} from "@/api/eam/maintenance";

defineOptions({ name: 'TeamForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const tags=ref([])

const inputValue = ref('')
const inputVisible = ref(false)
const isDisabled = ref(false)
const InputRef = ref<InstanceType<typeof ElInput>>()


const formData = ref({
  id:'',
  number:'',
  approver: '',
  approveContent: '',
  approveTime: '',
})
const formRules = reactive({
  approver: [
    { required: true, message: '审核人不能为空', trigger: 'blur' },
    { max: 50, message: '不得超过50个字符', trigger: 'blur' }
  ],
  approveContent: [
    { required: true, message: '审核内容不能为空', trigger: 'blur' },
    { max: 50, message: '不得超过50个字符', trigger: 'blur' }
  ],
  approveTime: [
    { required: true, message: '审核时间不能为空', trigger: 'blur' },
  ],
})
const basicFormRef = ref() // 表单 Ref


/** 初始化弹窗 */
const open = async (type: string, row?: object) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  //初始化数据
  formData.value.id = row.id
  formData.value.number = row.number
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const submitForm = async (val) => {
   //把success函数传递到父页面
   emit('success',formData.value.id)
   // 校验表单
   if (!basicFormRef) return
   const valid = await basicFormRef.value.validate()
   if (!valid) return

   //发送数据
   await MaintenanceApi.updateMaintenanceAudi(formData.value)
   dialogVisible.value = false
}

const handleClose=(val)=>{
  dialogVisible.value = false
  emit('close',val)
}

// 传递给父类
const emit = defineEmits(['close','success'])

</script>

<style scoped>
.tag-container {
  margin-top: 10px; /* 可根据需要调整标签容器与表单项之间的间距 */
  border: 1px solid #ccc; /* 添加边框样式 */
  padding: 10px; /* 可根据需要调整容器内边距 */
  width: 950px; /* 设置固定宽度为 950px */
  overflow-y: auto; /* 当内容溢出容器高度时显示滚动条 */
  word-wrap: break-word; /* 使用 word-wrap 属性实现超出范围换行 */
  overflow-wrap: break-word; /* 兼容性更好的写法 */
  flex-wrap: wrap;
}
.input-with-button {
  display: flex;
  align-items: center;
  width: 100%;
}

.input-with-button > .el-input {
  flex: 1;
  /*margin-right: 10px;*/
}

</style>
