<template>
  <PageContainer class="page-container" title="预警详情" @click-back="handleClickBack">
    <CurrentSite />

    <div class="form-panel">
      <van-field v-model="form.a" label="现场情况描述" placeholder="请输入备注" label-align="top" rows="3" type="textarea" />

      <van-field class="mt-8" v-model="form.b" label="备注(非必填)" placeholder="请填写" input-align="right" />

      <div class="image-upload-block">
        <div class="label-box">
          <span class="main-text">现场照片</span>
          <span class="sub-text">最多上传6张</span>
        </div>
        <div class="com-">
          <van-uploader
            v-model="fileList"
            @delete="handleDelete"
            name="photos"
            :file-list="fileList"
            :file-type="['image/jpeg', 'image/png']"
            :after-read="afterRead"
            multiple
            :max-count="6"
          />
        </div>
      </div>
    </div>

    <div class="footer-panel">
      <van-button block type="primary" @click="confirm()">确认</van-button>
    </div>
  </PageContainer>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import PageContainer from '@/components/PageContainer.vue'
import CurrentSite from '@/components/CurrentSite.vue'
import { showToast, showLoadingToast, showImagePreview } from 'vant'

const router = useRouter()

// 上传附件相关
const fileList = ref([])

const form = ref({
  a: '',
  b: '',
  photos: []
})

onMounted(() => {
  getData()
})

// 文件删除
const handleDelete = (file) => {
  if (file.serverUrl) {
    const index = form.value.photos.findIndex((p) => p.photoUrl === file.serverUrl)
    if (index !== -1) {
      form.value.photos.splice(index, 1)
    }
  }
}

// 文件上传
const afterRead = async (file) => {
  const toast = showLoadingToast({
    message: '上传中...',
    forbidClick: true,
    duration: 0 // 设置为0表示不会自动关闭
  })
  try {
    const formData = new FormData()
    formData.append('file', file.file)
    const res = await request({
      url: '/snow-ops-platform/file/upload',
      method: 'post',
      data: formData
    })
    toast.close()
    if (res.code === '00000') {
      form.value.photos.push({ photoUrl: res.data })
      const index = fileList.value.findIndex((f) => f.file === file.file)
      if (index !== -1) {
        fileList.value[index].serverUrl = res.data
      }

      console.log('form.value.photos', toRaw(form.value.photos))
      console.log('fileList.value', fileList.value)
    } else {
      throw new Error(res.message)
    }
  } catch (error) {
    toast.close()
    showToast({
      type: 'fail',
      message: error.message
    })
  }
}

const getData = async () => {}

const handleClickBack = () => {
  router.go(-1)
}
const confirm = async () => {
  console.log(form.value)

  router.go(-1)
}
</script>

<style lang="scss" scoped>
.page-container {
  position: relative;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 74px;
}

.mt-8 {
  margin-top: 8px;
}

/* ==================== Panel 层级 ==================== */

.footer-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: #ffffff;
  box-shadow: 0px -5px 12px 0px rgba(200, 200, 200, 0.37);
  opacity: 0.97;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 16px;
}

.image-upload-block {
  background-color: #fff;
  padding: 16px;

  .label-box {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
  }

  .main-text {
    font-weight: 600;
    font-size: 15px;
    color: #4a4a4a;
    line-height: 16px;
    margin-right: 2px;
  }
  .sub-text {
    font-weight: 400;
    font-size: 12px;
    color: #4a4a4a;
    line-height: 17px;
  }
}
</style>
