<template>
  <div class="app-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <el-space>
            <el-button text @click="$router.back()">← 返回</el-button>
            <span>{{ isEdit ? '编辑' : '新增' }}用水单位</span>
          </el-space>
        </div>
      </template>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" style="max-width:700px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="单位名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入单位名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择">
                <el-option label="供水" value="供水" />
                <el-option label="灌溉" value="灌溉" />
                <el-option label="工业用水" value="工业用水" />
                <el-option label="生活用水" value="生活用水" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="省份" prop="province">
              <el-input v-model="form.province" placeholder="请输入省份" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="城市" prop="city">
              <el-input v-model="form.city" placeholder="请输入城市" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="详细地址" prop="address">
              <el-input v-model="form.address" placeholder="请输入详细地址" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经度" prop="longitude">
              <el-input v-model="form.longitude" placeholder="请输入经度" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纬度" prop="latitude">
              <el-input v-model="form.latitude" placeholder="请输入纬度" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系人" prop="contacts">
              <el-input v-model="form.contacts" placeholder="请输入联系人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="telphone">
              <el-input v-model="form.telphone" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="传真" prop="fax">
              <el-input v-model="form.fax" placeholder="请输入传真号码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在区域" prop="area">
              <el-input v-model="form.area" placeholder="请输入所在区域" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="批准日期" prop="approvalDate">
              <el-date-picker v-model="form.approvalDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择批准日期" style="width:100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio value="正常">正常</el-radio>
                <el-radio value="暂停">暂停</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" :loading="submitLoading" @click="submitForm">保 存</el-button>
          <el-button @click="$router.back()">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup name="UnitEdit">
import { getUnit, saveUnit } from '@/api/slgc/unit/index'

const { proxy } = getCurrentInstance()
const route = useRoute()
const formRef = ref(null)
const submitLoading = ref(false)
const isEdit = computed(() => !!route.query.id)

const form = ref({
  name: '',
  type: '',
  province: '',
  city: '',
  address: '',
  longitude: '',
  latitude: '',
  contacts: '',
  telphone: '',
  fax: '',
  area: '',
  approvalDate: '',
  status: '正常'
})

const rules = {
  name: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
  type: [{ required: true, message: '请选择单位类型', trigger: 'change' }],
  province: [{ required: true, message: '请输入省份', trigger: 'blur' }],
  city: [{ required: true, message: '请输入城市', trigger: 'blur' }],
  address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
  contacts: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
  telphone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
}

function loadForm() {
  if (!route.query.id) return
  getUnit(route.query.id).then(res => {
    form.value = { ...form.value, ...res.data }
  })
}

function submitForm() {
  formRef.value.validate(valid => {
    if (!valid) return
    submitLoading.value = true
    saveUnit(form.value).then(() => {
      proxy.$modal.msgSuccess('保存成功')
      router.back()
    }).finally(() => { submitLoading.value = false })
  })
}

onMounted(() => { loadForm() })
</script>

<style scoped>.card-header { font-weight: 600; font-size: 16px; }</style>
