<template>
  <div class="container">
    <!-- 输入框 -->
    <van-field
      v-model="message"
      type="textarea"
      placeholder="请输入内容..."
      show-word-limit
    />

    <div style="margin-top: 16px;"></div>

    <!-- 上传类型选择 -->
    <div v-if="!uploadType" class="upload-type">
      <van-button type="default" @click="setUploadType('image')">上传图片</van-button>
      <van-button type="default" @click="setUploadType('video')">上传视频</van-button>
    </div>

    <!-- 图片上传 -->
    <div v-if="uploadType === 'image'">
      <van-uploader
        v-model="fileList"
        :after-read="afterRead"
        :max-count="9"
        multiple
        accept="image/*"
      />
    </div>
    <van-button class="btn-cancel" v-if="uploadType === 'image'"
      type="danger"
      plain
      size="large"
      @click="cancelImageUpload"
    >
      取消上传图片
    </van-button>

    <!-- 视频上传 -->
    <div v-if="uploadType === 'video'" class="preview-list">
      <div v-if="videoFile.status === 'done'" class="preview-item">
        <video controls :src="videoFile.url"></video>
        <van-icon name="close" class="close-icon" @click="removeVideo" />
      </div>

      <!-- 上传中 -->
      <div v-else-if="videoFile.status === 'uploading'" class="preview-item">
        <van-loading size="24px" type="spinner">上传中...</van-loading>
      </div>

      <!-- 上传失败 -->
      <div v-else-if="videoFile.status === 'failed'" class="preview-item">
        <span style="color:red;">上传失败</span>
        <van-button size="small" type="primary" @click="triggerVideoInput">
          重新上传
        </van-button>
      </div>

      <!-- 初始状态 -->
      <div v-else class="van-uploader__upload" @click="triggerVideoInput">
        <van-icon name="plus" size="24"/>
      </div>

      <input
        type="file"
        ref="videoInput"
        accept="video/*"
        @change="handleVideoChange"
        style="display:none"
      />
    </div>
    <!-- 取消按钮 -->
    <van-button class="btn-cancel" v-if="uploadType === 'video'"
      type="danger"
      plain
      size="large"
      @click="cancelVideoUpload"
    >
      取消上传视频
    </van-button>

    <!-- 发布按钮 -->
    <van-button
      class="btn"
      :disabled="isDisabled"
      type="primary"
      size="large"
      :loading-text="$t('form.Loading')"
      :loading="loading"
      @click="confirm"
    >
      {{ $t('router.Publish') }}
    </van-button>
  </div>
</template>

<script setup>
import { addDynamic, hostUploadImg } from "@/api/path/im.api";
import { showToast } from "vant";

const router = useRouter();
const message = ref("");
const fileList = ref([]); 
const videoFile = ref({}); 
const loading = ref(false);
const uploading = ref(false);
const videoUploading = ref(false);
const videoInput = ref(null); 
const uploadType = ref("");

// 设置上传类型
const setUploadType = (type) => {
  uploadType.value = type;
};

// 取消图片上传
const cancelImageUpload = () => {
  fileList.value = [];
  uploadType.value = "";
};

// 取消视频上传
const cancelVideoUpload = () => {
  videoFile.value = {};
  uploadType.value = "";
};

// 图片上传
const afterRead = async (file) => {
  const files = Array.isArray(file) ? file : [file];
  uploading.value = true;

  for (const f of files) {
    const rawFile = f.file;
    const formData = new FormData();
    formData.append("image", rawFile);

    f.status = "uploading";

    try {
      const res = await hostUploadImg(formData);
      f.url = res.data.all_url;
      f.status = "done";
    } catch (err) {
      console.error("上传失败:", err);
      f.status = "failed";
      f.message = "上传失败";
    }
  }

  uploading.value = false;
};

// 点击上传视频
const triggerVideoInput = () => {
  if (videoInput.value) {
    videoInput.value.value = null; 
    videoInput.value.click();
  }
};

// 视频选择与上传
const handleVideoChange = async (event) => {
  const file = event.target.files[0];
  if (!file) return;

  videoFile.value = {
    file,
    status: "uploading",
    url: URL.createObjectURL(file),
  };

  const formData = new FormData();
  formData.append("image", file);

  try {
    const res = await hostUploadImg(formData);
    videoFile.value = {
      file,
      url: res.data.all_url,
      status: "done",
    };
  } catch (err) {
    console.error("视频上传失败:", err);
    showToast("视频上传失败");
    videoFile.value.status = "failed";
  }
};

// 删除视频
const removeVideo = () => {
  videoFile.value = {};
};

// 按钮禁用
const isDisabled = computed(() => {
  return (
    uploading.value ||
    videoUploading.value ||
    !(message.value.trim() || fileList.value.length > 0 || videoFile.value.url)
  );
});

// 发布逻辑
const confirm = async () => {
  if (
    fileList.value.some((item) => item.status === "uploading") ||
    videoFile.value.status === "uploading"
  ) {
    showToast("请等待上传完成");
    return;
  }

  let params = {
    content: message.value,
    type: uploadType.value === "video" ? "1" : "0",
    images: [],
    video: "",
  };

  if (uploadType.value === "image" && fileList.value.length > 0) {
    params.images = fileList.value
      .filter((item) => item.status === "done")
      .map((item) => item.url);
  }

  if (uploadType.value === "video" && videoFile.value.status === "done") {
    params.video = videoFile.value.url;
  }

  loading.value = true;
  try {
    const res = await addDynamic(params);
    if (res.code == 1) {
      showToast("发布成功");
      message.value = "";
      fileList.value = [];
      videoFile.value = {};
      uploadType.value = "";
      router.back();
    } else {
      showToast(res.message || "发布失败");
    }
  } catch (err) {
    showToast(err.message || "发布失败");
  } finally {
    loading.value = false;
  }
};
</script>

<style lang="less" scoped>
.container {
  margin: 16px;
  overflow: auto;

  .upload-type {
    display: flex;
    justify-content: space-around;
    // margin-bottom: 16px;
  }

  :deep(.van-cell) {
    border-radius: 12px !important;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 15px;
    min-height: 116px;
  }

  :deep(.van-field__control::placeholder) {
    color: #8d8d8d;
  }

  :deep(.van-field__control--min-height) {
    min-height: 116px !important;
  }

  :deep(.van-uploader__upload) {
    background: #f2f2f2 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 12px;
    font-size: 16px;
    color: #8d8d8d;
    cursor: pointer;
  }

  .btn {
    margin-top: 20px;
    background: #4765dd;
    height: 40px;
    line-height: 40px;
    border-radius: 50px;
    padding: 9px 0;
    box-sizing: border-box;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 19px;
    color: #ffffff;
    border: none !important;
  }
  .btn-cancel{
    margin-top: 20px;
    height: 40px;
    line-height: 40px;
    border-radius: 50px;
  }

  .preview-list {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .preview-item {
    position: relative;
    width: 100%;
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f2f2;

    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .close-icon {
      position: absolute;
      top: 4px;
      right: 4px;
      font-size: 20px;
      color: #fff;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      padding: 2px;
      cursor: pointer;
    }
  }
}
</style>