<script setup lang="ts">
import { add, update } from 'apis/matrix'
import FtDialog from 'components/common/FTDialog/index.vue'
import { FtMessage } from 'libs/message'
import { onMounted, ref } from 'vue'

const props = defineProps({
  formData: {
    type: Object,
    default: () => ({}),
  },
})
const emits = defineEmits(['ok', 'cancel'])

onMounted(() => {
  if (props.formData.id) {
    form.value = { ...props.formData }
  }
})

const form = ref({})

const rules = {
  name: [
    { required: true, message: '请输入基质名称', trigger: 'blur' },
  ],
}

const formRef = ref()

const okLoading = ref(false)
const okHandle = () => {
  formRef.value.validate(async (valid: any) => {
    if (!valid) {
      return
    }
    okLoading.value = true
    // TODO 调用保存接口
    if (form.value.id) {
      await update(form.value)
    }
    else {
      await add(form.value)
    }
    setTimeout(() => {
      okLoading.value = false
      FtMessage.success('保存成功')
      emits('ok')
    }, 300)
  })
}

const cancel = () => {
  emits('cancel')
}
</script>

<template>
  <FtDialog visible :title="form.id ? '编辑基质' : '新增基质'" width="40%" :ok-handle="okHandle" @cancel="cancel">
    <div class="dialog-content">
      <el-form ref="formRef" label-width="120" :model="form" :rules="rules">
        <el-form-item
          label="基质名称" prop="name" :rules="[
            {
              required: true,
              message: '请输入基质名称',
              trigger: 'blur',
            },
            {
              min: 1,
              max: 20,
              message: '1-20个字符',
              trigger: ['blur', 'change'],
            },
          ]"
        >
          <el-input v-model="form.name" placeholder="" />
        </el-form-item>
      </el-form>
    </div>
  </FtDialog>
</template>

<style scoped lang="scss">
:deep(.el-form-item__error) {
  font-size: 40px;
}
.dialog-content {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 400px; /* 确保容器高度撑开 */
}
.el-select {
  width: 80%;
}
.el-input {
  width: 80%;
}
.unit-text {
  font-size: 40px;
  color: #0349A8;
  font-weight: 500;
  margin-left: 20px;
}
.select-box {
  display: flex;
  margin: 40px;
}
.route-img {
  display: flex;
  img {
    width: 70px;
  }
}
</style>
