<template>
  <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="ruleForm"
      :size="formSize"
      status-icon
  >
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="任务类型" prop="rescue_type">
          <el-select v-model="ruleForm.rescue_type" >
            <el-option label="应急搜捞" value="SAR" />
            <el-option label="专项调查" value="SI" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="目标类别" prop="rescue_target_type">
          <el-select v-model="ruleForm.rescue_target_type" >
            <el-option label="大型沉物" value="Wreck" />
            <el-option label="锚系类目标" value="Mooring" />
            <el-option label="非合作方目标" value="NCT" />
            <el-option label="其他" value="Other" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="目标名称" prop="rescue_target_name">
          <el-input placeholder="请输入" v-model="ruleForm.rescue_target_name" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="目标经度" prop="rescue_target_lon">
          <el-input placeholder="请输入" v-model="ruleForm.rescue_target_lon" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="目标纬度" prop="rescue_target_lat">
          <el-input placeholder="请输入" v-model="ruleForm.rescue_target_lat" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="搜寻范围半径" prop="rescue_target_radius">
          <el-input placeholder="请输入" v-model="ruleForm.rescue_target_radius">
            <template #append>米</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="目标宽度" prop="rescue_target_width">
          <el-input placeholder="请输入" v-model="ruleForm.rescue_target_width">
            <template #append>米</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="目标长度" prop="rescue_target_length">
          <el-input placeholder="请输入" v-model="ruleForm.rescue_target_length">
            <template #append>米</template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="目标高度" prop="rescue_target_height">
          <el-input placeholder="请输入" v-model="ruleForm.rescue_target_height">
            <template #append>米</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="搜寻处置目标重量(空气中)" prop="rescue_air_weight">
          <el-input placeholder="请输入" v-model="ruleForm.rescue_air_weight">
            <template #append>千克</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="搜寻处置目标重量(水中)" prop="rescue_water_weight">
          <el-input placeholder="请输入" v-model="ruleForm.rescue_water_weight">
            <template #append>千克</template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="搜寻处置目标水深" prop="rescue_water_depth">
          <el-input placeholder="请输入" v-model="ruleForm.rescue_water_depth">
            <template #append>米</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="搜寻处置目标预估价值" prop="rescue_target_price">
          <el-input placeholder="请输入" v-model="ruleForm.rescue_target_price" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="快速响应等级" prop="rescue_response_level">
          <el-select v-model="ruleForm.rescue_response_level" >
            <el-option label="一级" value="一级" />
            <el-option label="二级" value="二级" />
            <el-option label="三级" value="三级" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="是否涉密" prop="rescue_secrecy">
          <el-select v-model="ruleForm.rescue_secrecy" >
            <el-option label="是" value="是" />
            <el-option label="否" value="否" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="搜捞目标的所属单位" prop="rescue_unit">
          <el-input placeholder="请输入" v-model="ruleForm.rescue_unit" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="快速响应时间要求" prop="rescue_response_day">
          <el-input placeholder="请输入" v-model="ruleForm.rescue_response_day">
            <template #append>天</template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="填报时间" prop="fill_time">
          <el-date-picker
              style="width: 100%"
              v-model="ruleForm.fill_time"
              type="datetime"
              placeholder="请选择"
              format="YYYY/MM/DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="联系人姓名" prop="fill_person">
          <el-input placeholder="请输入" v-model="ruleForm.fill_person" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="联系人电话" prop="fill_tel">
          <el-input placeholder="请输入" v-model="ruleForm.fill_tel" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="其他信息" prop="rescue_note">
          <el-input placeholder="请输入" v-model="ruleForm.rescue_note" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="填报来源描述" prop="fill_note">
          <el-input placeholder="请输入" v-model="ruleForm.fill_note" />
        </el-form-item>
      </el-col>
    </el-row>

    <div class="btn-bar">
      <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
      <el-button @click="resetForm">取消</el-button>
      <el-popconfirm
          v-if="props.rescueId && ruleForm.rescue_status === '任务进行中'"
          confirm-button-text="确定"
          cancel-button-text="取消"
          :icon="InfoFilled"
          icon-color="#626AEF"
          title="是否确认完成任务?"
          @confirm="completeTask"
      >
        <template #reference>
          <el-button type="success">完成任务</el-button>
        </template>
      </el-popconfirm>
    </div>
  </el-form>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import type { ComponentSize, FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { regEdit, regFind, regComplete } from '@/api/task.js'
import {InfoFilled} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";

const router = useRouter();

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref({
  voyage_name: '',
  rescue_status: '',
  rescue_status_time: '',
  rescue_status_note: '',
  rescue_type: '',
  rescue_target_type: '',
  rescue_target_name: '',
  rescue_target_lon: '',
  rescue_target_lat: '',
  rescue_target_radius: '',
  rescue_target_width: '',
  rescue_target_length: '',
  rescue_target_height: '',
  rescue_air_weight: '',
  rescue_water_weight: '',
  rescue_water_depth: '',
  rescue_target_price: '',
  rescue_response_level: '',
  rescue_secrecy: '',
  rescue_unit: '',
  rescue_response_day: '',
  fill_time: '',
  fill_person: '',
  fill_tel: '',
  rescue_note: '',
  fill_note: '',
})

const rules = reactive({
  voyage_name: [
    { required: true, message: '请选择', trigger: 'change' },
  ],
  rescue_status: [
    { required: true, message: '请选择', trigger: 'change' },
  ],
  rescue_status_time: [
    { required: true, message: '请选择', trigger: 'change' },
  ],
  rescue_status_note: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  rescue_type: [
    { required: true, message: '请选择', trigger: 'change' },
  ],
  rescue_target_type: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  rescue_target_name: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  rescue_target_lon: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  rescue_target_lat: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  rescue_target_radius: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  rescue_target_width: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  rescue_target_length: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  rescue_target_height: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  rescue_air_weight: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  rescue_water_weight: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  rescue_water_depth: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  rescue_target_price: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  rescue_response_level: [
    { required: true, message: '请选择', trigger: 'change' },
  ],
  rescue_secrecy: [
    { required: true, message: '请选择', trigger: 'change' },
  ],
  rescue_unit: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  rescue_response_day: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  fill_time: [
    { required: true, message: '请选择', trigger: 'change' },
  ],
  fill_person: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  fill_tel: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      regEdit(ruleForm.value).then(res => {
        ruleForm.value = res.entity
        ElMessage({
          message: '提交成功',
          type: 'success'
        })
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = () => {
  router.push('/search')
}

const props = defineProps({
  rescueId: {
    type: String, // 根据实际情况定义类型
    default: ''
  }
})

// 获取任务详情
const getDetail = () => {
  regFind({rescue_id: props.rescueId}).then(res => {
    ruleForm.value = res.entity
  })
}

// 完成任务
const completeTask = () => {
  regComplete({ rescue_id: props.rescueId }).then(() => {
    ElMessage({
      message: '操作成功',
      type: 'success'
    })
    getDetail()
  })
}

onMounted(() => {
  if (props.rescueId) {
    getDetail()
  }
})
</script>

<style lang="scss" scoped>
.ruleForm {
  margin-top: 20px;

  .btn-bar {
    display: flex;
    justify-content: center;
  }
}
</style>
