<!-- 新建、编辑、详情 -->
<script lang="ts" setup name="AlarmDetail">
import type { Ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue'
import type { AlarmInfo } from './alarm-interface'
import { getAlarmInfo } from '@/api/ptz/alarm'

const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}
// 字典
const pageType = ref('detail') // 页面类型: add, edit, detail
const loading = ref(false) // 表单加载状态
const infoId = ref('')
const dataForm: Ref<AlarmInfo> = ref({
  id: '',
  stationName: '',
  monitorName: '',
  lineName: '',
  serialName: '',
  alarmContent: '',
  alarmValue: '',
  alarmType: '',
  alarmTypeName: '',
  alarmStatus: '',
  alarmStatusName: '',
  alarmDirection: '',
  alarmPitch: '',
  dealPerson: '',
  dealTime: '',
  alarmTime: '',
  deviceIp: '',
  devicePort: '',
  deviceUser: '',
  devicePassword: '',
  nvrIp: '',
  nvrPort: '',
  nvrUser: '',
  nvrPassword: '',
  nvrChannel: '',
})

// 从路由中获取页面类型参数
const $route = useRoute()
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
}
if ($route.params.id) {
  infoId.value = $route.params.id as string
}

const $router = useRouter()

// 关闭新增页面的回调
const close = () => {
  $router.back()
}

// 获取详细信息
const getInfo = () => {
  getAlarmInfo({ id: infoId.value }).then((res) => {
    dataForm.value = res.data
  })
}
getInfo()

</script>

<template>
  <app-container>
    <detail-page :title="`告警记录-${textMap[pageType]}`">
      <template #btns>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <div id="form">
        <el-form
          :model="dataForm"
          :label-width="120"
          label-position="right"
        >
          <el-row :gutter="24">
            <el-col :offset="1" :span="10">
              <el-form-item label="场站名称:">
                <el-input
                  v-model="dataForm.stationName"
                  :placeholder="pageType === 'detail' ? '' : '系统自动生成'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :offset="1" :span="10">
              <el-form-item label="设备名称:">
                <el-input
                  v-model="dataForm.monitorName"
                  :placeholder="pageType === 'detail' ? '' : '系统自动生成'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :offset="1" :span="10">
              <el-form-item label="巡航路径:">
                <el-input
                  v-model="dataForm.lineName"
                  :placeholder="pageType === 'detail' ? '' : '系统自动生成'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :offset="1" :span="10">
              <el-form-item label="巡航点位:">
                <el-input
                  v-model="dataForm.serialName"
                  :placeholder="pageType === 'detail' ? '' : '系统自动生成'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :offset="1" :span="10">
              <el-form-item label="水平角:">
                <el-input
                  v-model="dataForm.alarmDirection"
                  :placeholder="pageType === 'detail' ? '' : '系统自动生成'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :offset="1" :span="10">
              <el-form-item label="俯仰角:">
                <el-input
                  v-model="dataForm.alarmPitch"
                  :placeholder="pageType === 'detail' ? '' : '系统自动生成'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :offset="1" :span="10">
              <el-form-item label="告警类型:">
                <el-input
                  v-model="dataForm.alarmTypeName"
                  :placeholder="pageType === 'detail' ? '' : '系统自动生成'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :offset="1" :span="10">
              <el-form-item label="告警值(ppm·m):" v-show="dataForm.alarmType === '0'">
                <el-input
                  v-model="dataForm.alarmValue"
                  :placeholder="pageType === 'detail' ? '' : '系统自动生成'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :offset="1" :span="10">
              <el-form-item label="告警状态:">
                <el-input
                  v-model="dataForm.alarmStatusName"
                  :placeholder="pageType === 'detail' ? '' : '系统自动生成'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :offset="1" :span="10">
              <el-form-item label="告警时间:">
                <el-input
                  v-model="dataForm.alarmTime"
                  :placeholder="pageType === 'detail' ? '' : '系统自动生成'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :offset="1" :span="10" v-show="dataForm.alarmStatus === '1'">
              <el-form-item label="处理人:">
                <el-input
                  v-model="dataForm.dealPerson"
                  :placeholder="pageType === 'detail' ? '' : '系统自动生成'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :offset="1" :span="10" v-show="dataForm.alarmStatus === '1'">
              <el-form-item label="处理时间:">
                <el-input
                  v-model="dataForm.dealTime"
                  :placeholder="pageType === 'detail' ? '' : '系统自动生成'"
                  :class="{ 'detail-input': pageType === 'detail' }"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </detail-page>
  </app-container>
</template>

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