<template>
  <!-- 警事圈发布页面容器 -->
  <div class="add-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar left-arrow @click-left="onClickLeft" @click-right="onClickRight">
      <template #right>
        <!-- 发表按钮 -->
        <div class="publish-btn">发表</div>
      </template>
    </van-nav-bar>

    <!-- 主要内容区域 -->
    <div class="content">
      <!-- 文本输入区域 -->
      <div class="thought-input">
        <textarea
          v-model="thoughtText"
          placeholder="这一刻的想法..."
          @blur="onBlur"
          @focus="onFocus"
        ></textarea>
      </div>

      <!-- 图片上传区域 -->
      <div class="image-upload">
        <van-uploader
          v-model="fileList"
          multiple
          :after-read="handleVideoUpload"
          :before-read="handleBeforeRead"
          :max-size="100 * 1024 * 1024"
          accept="image/*, video/*"
          :preview-image="true"
          :preview-full-image="true"
          :image-fit="'cover'"
          @click-preview="handleVideoPreview"
          @oversize="onOversize"
        >
          <template #preview-cover="{ file }">
            <template v-if="!isImage(file)">
              <video
                :src="file.content || file.url"
                style="width: 120px; height: 120px; object-fit: cover"
              ></video>
              <div class="play-icon">
                <van-icon name="play-circle-o" color="white" size="36" />
              </div>
            </template>
          </template>
        </van-uploader>
      </div>

      <van-dialog
        v-model:show="showVideoPlay"
        style="width: 100%; border-radius: 0; height: 200px"
        theme="default"
        :show-cancel-button="false"
        :show-confirm-button="false"
        close-on-click-overlay
      >
        <video
          v-if="currentVideoUrl"
          controls
          preload="auto"
          style="width: 100%; height: 200px; object-fit: contain"
          :src="currentVideoUrl"
        ></video>
      </van-dialog>

      <!-- 权限设置区域 -->
      <van-field is-link readonly class="action-field" @click="showPicker = true">
        <template #label>
          <!-- 权限图标和文字 -->
          <div style="display: flex; align-items: center">
            <van-icon name="friends-o" size="25" />
            <span class="filed-title">谁可以看</span>
          </div>
        </template>
        <template #right-icon>
          <!-- 当前选择的权限值 -->
          <span class="filed-title">{{ fieldValue }}</span>
        </template>
      </van-field>

      <!-- 权限选择弹出层 -->
      <van-popup v-model:show="showPicker" round position="bottom">
        <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
      </van-popup>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, onBeforeUnmount } from 'vue'
  import { showConfirmDialog } from 'vant'
  import { getCurrentInstance } from 'vue'
  const { proxy } = getCurrentInstance()
  // 文本内容响应式变量
  const thoughtText = ref('')
  // 权限选择器显示状态
  const showPicker = ref(false)
  // 当前选择的权限值
  const fieldValue = ref('全部')

  const emit = defineEmits(['pushJsq'])

  const fileList = ref([]) //upload绑定的数组
  const videoUrls = ref([]) // 存储多个视频的URL
  const showVideoPlay = ref(false)
  const currentVideoUrl = ref('') // 当前播放的视频URL

  const isImage = file => {
    // 根据文件扩展名判断是否为图片文件
    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
    const extension = file.name.split('.').pop().toLowerCase()
    return imageExtensions.includes(extension)
  }
  //在读取文件之前执行的函数
  const handleBeforeRead = file => {
    file.id = fileList.value.length //重要！ 获取视频的索引
    if (file.size > 104857600) {
      proxy.$showToast('选择/录制视频不能超过100M')
      return false
    }
    return true
  }

  //处理视频上传
  const handleVideoUpload = file => {
    if (file.file.type && file.file.type.startsWith('video/')) {
      // 如果是视频文件，直接使用文件的 URL
      const videoUrl = URL.createObjectURL(file.file)
      videoUrls.value[file.id] = videoUrl
    } else {
      // 如果是图片，直接使用内容
      videoUrls.value[file.id] = file.content
    }
    return true
  }
  // 预览视频文件
  const handleVideoPreview = file => {
    if (!isImage(file.file)) {
      currentVideoUrl.value = file.content || file.url
      showVideoPlay.value = true
    }
  }

  const onOversize = () => {
    proxy.$showToast('文件大小不能超过 100MB')
  }

  // 权限选择器选项配置
  const columns = [
    { text: '全部', value: 'Hangzhou' },
    { text: '本单位', value: 'Ningbo' }
  ]

  /**
   * 权限选择确认回调
   * @param {Object} param0 - 选择器返回的数据对象
   * @param {Array} param0.selectedOptions - 选中的选项数组
   */
  const onConfirm = ({ selectedOptions }) => {
    showPicker.value = false
    fieldValue.value = selectedOptions[0].text
  }

  /**
   * 导航栏左侧按钮点击事件
   */
  const onClickLeft = () => {
    showConfirmDialog({
      message: '退出此次编辑？',
      confirmButtonText: '退出',
      confirmButtonColor: '#ff0000',
      width: '300px',
      className: 'confirm-dialog'
    }).then(() => {
      emit('pushJsq')
    })
  }

  // 处理浏览器返回事件
  const handlePopState = event => {
    // 阻止默认的返回行为
    event.preventDefault()
    // 显示确认对话框
    showConfirmDialog({
      message: '退出此次编辑？',
      confirmButtonText: '退出',
      confirmButtonColor: '#ff0000',
      width: '300px',
      className: 'confirm-dialog'
    })
      .then(() => {
        // 用户确认退出
        emit('pushJsq')
      })
      .catch(() => {
        // 用户取消退出，将历史记录推回
        // 先移除当前的popstate监听器，防止触发新的事件
        window.removeEventListener('popstate', handlePopState)

        // 添加新的历史记录
        window.history.pushState(null, '', window.location.href)

        // 重新添加监听器
        setTimeout(() => {
          window.addEventListener('popstate', handlePopState)
        }, 0)
      })
  }

  // 组件挂载时
  onMounted(() => {
    // 添加历史记录，用于捕获返回事件
    window.history.pushState(null, '', window.location.href)
    // 监听返回事件
    window.addEventListener('popstate', handlePopState)
  })

  // 组件卸载前
  onBeforeUnmount(() => {
    // 移除事件监听
    window.removeEventListener('popstate', handlePopState)
  })

  /**
   * 导航栏右侧按钮点击事件
   */
  const onClickRight = () => {}
</script>

<style lang="scss" scoped>
  /* 页面容器样式 */
  .add-container {
    width: 100%;
    height: 100vh;
    background-color: #fff;
    display: flex;
    flex-direction: column;
  }

  /* 导航栏图标颜色覆盖 */
  :deep(.van-nav-bar .van-icon) {
    color: #333;
  }

  /* 发表按钮样式 */
  .publish-btn {
    padding: 5px 15px;
    background-color: #1989fa;
    color: white;
    border-radius: 4px;
    font-size: 14px;
  }

  /* 内容区域样式 */
  .content {
    flex: 1;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    .action-field {
      display: flex;
      align-items: center;
      height: 70px;
      .filed-title {
        margin-left: 10px;
        font-size: 16px;
        white-space: nowrap;
      }
    }
  }

  /* 文本输入区域样式 */
  .thought-input {
    margin-top: 20px;
    width: 100%;

    /* 文本输入框样式 */
    textarea {
      width: 100%;
      height: 80px;
      border: none;
      outline: none;
      resize: none;
      font-size: 16px;
      color: #333;
      &::placeholder {
        color: #999;
      }
    }
  }

  /* 图片上传区域样式 */
  .image-upload {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;

    :deep(.van-uploader__preview-image) {
      object-fit: cover;
      /* 解决高分辨率屏幕下图片模糊问题 */
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
      transform: translateZ(0);
    }

    :deep(.van-image-preview__image) {
      /* 预览图片时保持清晰 */
      image-rendering: -webkit-optimize-contrast;
    }

    /* 视频预览样式 */
    .video-preview {
      display: inline-block;
      margin: 5px;
    }
    .play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
</style>
