<!-- 新增巡航路线 -->
<script lang="ts" setup name="AddRouteDialog">
import { reactive, ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { getDictByCode } from '@/api/system/dict'
import type { dictType } from '@/global'
import { addRoute, editRoute } from '@/api/patrol/navigation'
import AreaSelectTree from '@/views/system/area/areaSelectTree.vue'
const emits = defineEmits(['closeRefresh'])
const dialogStatus = ref('add')
const dialogVisible = ref(false) // 弹窗显示隐藏
// 显示标题
const textMap: { [key: string]: string } = {
  detail: '详情',
  edit: '编辑',
  add: '新增',
}
const routeInfoDetailList: any = ref([])
// 表单数据对象
const formData = ref({
  id: '',
  communityAddress: '', // 街道/小区地址
  communityName: '', // 街道/小区名称
  robotId: '', // 机器人ID
  routeName: '', // 巡检路线名称
})
const btnLoading = ref(false) // 保存按钮加载状态
const formDataRef = ref<FormInstance>() // 表单对象
// 校验规则
const rules = reactive<FormRules>({
  communityAddress: [{ required: true, message: '小区地址必填', trigger: ['blur', 'change'] }],
  communityName: [{ required: true, message: '小区名称必填', trigger: ['blur', 'change'] }],
  routeName: [{ required: true, message: '新增路线名称必填', trigger: ['blur', 'change'] }],
})

// -------------------------------------------------------------------------------------------
// 表单提交
function submitForm() {
  if (formDataRef.value) {
    formDataRef.value?.validate((valid: boolean) => {
      if (valid) {
        const params = {
          ...formData.value,
          routeInfoDetailList: routeInfoDetailList.value,
        }
        if (dialogStatus.value === 'add') { // 新建
          addRoute(params).then((res) => {
            ElMessage.success('新增巡检路线成功')
            closeRefresh()
          })
        }
        else if (dialogStatus.value === 'edit') { // 编辑
          editRoute(params).then((res) => {
            ElMessage.success('编辑巡检路线成功')
            closeRefresh()
          })
        }
      }
    })
  }
}

// 重置表单
function resetForm() {
  formData.value = {
    id: '',
    communityAddress: '', // 街道/小区地址
    communityName: '', // 街道/小区名称
    robotId: '', // 机器人ID
    routeName: '', // 巡检路线名称
  }
}
// -----------------------------------初始化、关闭对话框相关-----------------------------------------
function initDialog(dialogstatus: string, robotInfo: any, row: any, routeInfoDetail: any) {
  formData.value.robotId = robotInfo.robotId // 机器人ID
  dialogVisible.value = true
  if (dialogstatus === 'edit' || dialogstatus === 'detail') {
    formData.value.id = row.id
    formData.value.communityAddress = row.communityAddress // 街道/小区地址
    formData.value.communityName = row.communityName // 街道/小区名称
    formData.value.routeName = row.routeName // 巡检路线名称
  }
  else {
    routeInfoDetailList.value = routeInfoDetail
  }
  // 详情隐藏表单校验
  if (dialogstatus === 'detail') {
    formDataRef.value?.clearValidate()
  }
  dialogStatus.value = dialogstatus // 类型 新建add 编辑edit 详情detail
  btnLoading.value = false
}

// 关闭并刷新
function closeRefresh() {
  dialogVisible.value = false
  resetForm()
  if (formDataRef.value) {
    formDataRef.value?.clearValidate()
  }
  emits('closeRefresh')
}

// ----------------------- 以下是暴露的方法内容 ----------------------------
defineExpose({ initDialog })
</script>

<template>
  <el-dialog
    v-model="dialogVisible" :title="textMap[dialogStatus]" width="800" :before-close="closeRefresh" append-to-body
    :open-delay="0" :close-on-click-modal="false"
  >
    <el-form
      ref="formDataRef" :model="formData" :rules="rules" label-position="right" label-width="130px"
      class="form-container" size="default" :disabled="dialogStatus === 'detail'" @submit.prevent
    >
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="新增路线名称" prop="routeName">
            <el-input
              v-model="formData.routeName" class="full-width-input"
              placeholder="必填"
              :disabled="dialogStatus === 'detail'"
              show-word-limit type="textarea" autosize
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="小区名称" prop="communityName">
            <el-input
              v-model="formData.communityName" class="full-width-input"
              placeholder="必填"
              :disabled="dialogStatus === 'detail'"
              show-word-limit type="textarea" autosize
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="小区地址" prop="communityAddress">
            <el-input
              v-model="formData.communityAddress" class="full-width-input"
              placeholder="必填"
              :disabled="dialogStatus === 'detail'"
              show-word-limit type="textarea" autosize
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button v-if="dialogStatus !== 'detail'" :loading="btnLoading" type="primary" @click="submitForm">
          保存路线
        </el-button>
        <el-button type="info" @click="closeRefresh">
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
//
</style>