<script lang="ts" setup name="EditReport">
import type { Ref } from 'vue'
import { nextTick, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { Picture as IconPicture } from '@element-plus/icons-vue'


const emits = defineEmits(['closeRefresh'])

// 对话框类型：create,update
const dialogStatus = ref('create')
const dialogVisible = ref(false)
const disabledBtn = ref(true)
const presetName = ref('')
const baseUrl = ref(window.localStorage.getItem('baseurl-robot') + '/static/')
// 显示标题
const textMap: { [key: string]: string } = {
  detail: '查看详情',
  update: '编辑',
  create: '新增',
  insert: '插入',
}
// 表单数据对象
const formData: Ref<any> = ref({
  alarmNum: 0,
  createTime: "",
  discernType: 0,
  discernTypeName: "",
  endTime: "",
  gridNumber: 0,
  gridSize: 0,
  heatImg: "",
  heatMap: {
    createTime: "",
    id: 0,
    repetition: "",
    repetitionList: [],
    taskId: 0,
    updateTime: ""
  },
  id: 0,
  mcaImg: "",
  psdImg: "",
  robotId: 0,
  routeId: 0,
  routeImg: "",
  startTime: "",
  taskName: "",
  taskNo: 0,
  taskStatus: 0,
  taskStatusName: "",
  taskType: 0,
  taskTypeName: "",
  updateTime: ""
})

// 保存按钮加载状态
const btnLoading = ref(false)

// 表单对象
const dataFormRef = ref<FormInstance>()

// 重置表单
function resetForm() {
  formData.value = {
    alarmNum: 0,
    createTime: "",
    discernType: 0,
    discernTypeName: "",
    endTime: "",
    gridNumber: 0,
    gridSize: 0,
    heatImg: "",
    heatMap: {
      createTime: "",
      id: 0,
      repetition: "",
      repetitionList: [],
      taskId: 0,
      updateTime: ""
    },
    id: 0,
    mcaImg: "",
    psdImg: "",
    robotId: 0,
    routeId: 0,
    routeImg: "",
    startTime: "",
    taskName: "",
    taskNo: 0,
    taskStatus: 0,
    taskStatusName: "",
    taskType: 0,
    taskTypeName: "",
    updateTime: ""
  }
}

// ----------初始化、关闭对话框相关-----------------
function initDialog(dialogstatus: string, row: any) {
  disabledBtn.value = true
  dialogStatus.value = dialogstatus
  dialogVisible.value = true
  resetForm()

  // if (dialogstatus === 'detail') {
    formData.value = row
    // formData.value.mcaImg = window.localStorage.getItem('baseurl-robot') + '/static/'+ formData.value.mcaImg
    // formData.value.psdImg = window.localStorage.getItem('baseurl-robot') + '/static/'+formData.value.psdImg
    // formData.value.heatImg = window.localStorage.getItem('baseurl-robot') + '/static/' + formData.value.heatImg
    // formData.value.routeImg = window.localStorage.getItem('baseurl-robot') + '/static/' + formData.value.routeImg
  // }
}

// 关闭并刷新
function closeRefresh() {
  dialogVisible.value = false
  resetForm()
}
// 关闭弹窗
function dialogClose() {
  dialogVisible.value = false
  resetForm()
  closeRefresh()
}

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

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="textMap[dialogStatus]"
    width="80%"
    :before-close="dialogClose"
    append-to-body
    :open-delay="0"
    :close-on-click-modal="false"
  >
    <el-form
      ref="dataFormRef" :model="formData" label-position="left" label-width="110px" class="form-container"
      size="default" @submit.prevent
    >
      <el-row :gutter="10">
        <el-col :span="10" :offset="1" class="grid-cell">
          <el-form-item label="任务ID" prop="presetName" class="required">
            <el-input v-model="formData.id" :disabled="dialogStatus === 'detail' || dialogStatus === 'update'" type="text" placeholder="必填" />
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="1" class="grid-cell">
          <el-form-item label="任务名称" prop="presetName" class="required">
            <el-input v-model="formData.taskName" :disabled="dialogStatus === 'detail' || dialogStatus === 'update'" type="text" placeholder="必填" />
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="1" class="grid-cell">
          <el-form-item label="设备名称" prop="presetName" class="required">
            <el-input v-model="formData.robotName" :disabled="dialogStatus === 'detail' || dialogStatus === 'update'" type="text" placeholder="必填" />
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="1" class="grid-cell">
          <el-form-item label="巡检类型" prop="presetName" class="required">
            <el-input v-model="formData.taskTypeName" :disabled="dialogStatus === 'detail' || dialogStatus === 'update'" type="text" placeholder="必填" />
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="1" class="grid-cell">
          <el-form-item label="巡检开始时间" prop="presetName" class="required">
            <el-input v-model="formData.startTime" :disabled="dialogStatus === 'detail' || dialogStatus === 'update'" type="text" placeholder="必填" />
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="1" class="grid-cell">
          <el-form-item label="巡检结束时间" prop="presetName" class="required">
            <el-input v-model="formData.endTime" :disabled="dialogStatus === 'detail' || dialogStatus === 'update'" type="text" placeholder="必填" />
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="1" class="grid-cell">
          <el-form-item label="告警数量" prop="presetName" class="required">
            <el-input v-model="formData.alarmNum" :disabled="dialogStatus === 'detail' || dialogStatus === 'update'" type="text" placeholder="必填" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="10" :offset="1" class="grid-cell">
          <el-form-item label="巡检路线图" prop="presetName" class="required">
            <el-image style="width: 400px;height: 200px" :src="baseUrl + formData.routeImg" fit="fill">
              <template #error>
                <div class="image-slot" style="background-color: #f3f3f3;height: 200px;text-align: center;padding-top: 60px;border-radius: 10px">
                  <el-icon style="font-size: 80px"><PictureFilled /></el-icon>
                </div>
              </template>
            </el-image>
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="1" class="grid-cell">
          <el-form-item label="热点分布图" prop="presetName" class="required">
            <el-image style="width: 400px;height: 200px" :src="baseUrl + formData.heatImg" fit="fill">
              <template #error>
                <div class="image-slot" style="background-color: #f3f3f3;height: 200px;text-align: center;padding-top: 60px;border-radius: 10px">
                  <el-icon style="font-size: 80px"><PictureFilled /></el-icon>
                </div>
              </template>
            </el-image>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="21" :offset="1" class="grid-cell">
          <el-form-item label="MCA图" prop="presetName" class="required">
            <el-image style="width: 100%;height: 200px" :src="baseUrl + formData.mcaImg" fit="fill">
              <template #error>
                <div class="image-slot" style="background-color: #f3f3f3;height: 200px;text-align: center;padding-top: 60px;border-radius: 10px">
                  <el-icon style="font-size: 80px"><PictureFilled /></el-icon>
                </div>
              </template>
            </el-image>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="21" :offset="1" class="grid-cell">
          <el-form-item label="PSD图" prop="presetName" class="required">
            <el-image style="width: 100%;height: 200px" :src="baseUrl + formData.psdImg" fit="fill">
              <template #error>
                <div class="image-slot" style="background-color: #f3f3f3;height: 200px;text-align: center;padding-top: 60px;border-radius: 10px">
                  <el-icon style="font-size: 80px"><PictureFilled /></el-icon>
                </div>
              </template>
            </el-image>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<style lang="scss" scoped>
.form-container {
  width: 100%;

  .full-width-input {
    width: 100%;
  }

  .dict-detail {
    padding: 10px;

    .title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 15px;
    }
  }
}
</style>