<template>
  <div class="outer-layer user-detail-page">
    <div class="root">
      <ZPaging ref="zPaging" :show-scrollbar="false">
        <template #top>
          <customNavbar :title="$t('complaint.title')"></customNavbar>
        </template>
        <!-- 投诉主体内容 -->
        <view class="complaint-container">
          <!-- 投诉类型选择 -->
          <view class="form-item">
            <text class="form-label">{{ $t('complaint.selectType') }}</text>
            <picker mode="selector" :range="complaintTypes" range-key="label" @change="handleTypeChange">
              <view class="picker">
                {{ selectedType.label || $t('complaint.selectPlaceholder') }}
                <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
              </view>
            </picker>
          </view>

          <!-- 图片证据上传 -->
          <view class="form-item">
            <text class="form-label">{{ $t('complaint.imageEvidence') }}</text>
            <view class="upload-area">
              <view v-for="(img, index) in imageList" :key="index" class="image-wrapper">
                <image :src="img" mode="aspectFill" class="uploaded-image" @click="previewImage(index)" />
                <uni-icons type="close" size="18" color="#fff" class="delete-icon"
                  @click="removeImage(index)"></uni-icons>
              </view>
              <view v-if="imageList.length < 9" class="upload-btn" @click="chooseImage">
                <uni-icons type="plusempty" size="28" color="#999"></uni-icons>
                <text class="upload-text">{{ $t('complaint.addImage') }}</text>
              </view>
            </view>
          </view>

          <!-- 投诉内容 -->
          <view class="form-item">
            <text class="form-label">{{ $t('complaint.complaintContent') }}</text>
            <textarea v-model="complaintContent" :placeholder="$t('complaint.contentPlaceholder')"
              class="content-textarea"></textarea>
          </view>

          <!-- 投诉须知 -->
          <view class="notice-box">
            <view class="notice-header" @click="toggleNotice">
              <text class="notice-title">{{ $t('complaint.noticeTitle') }}</text>
              <text class="toggle-btn">
                {{ isNoticeExpanded ? $t('complaint.collapse') : $t('complaint.expand') }}
              </text>
            </view>

            <!-- 折叠状态只显示前两项 -->
            <view class="notice-content" v-if="!isNoticeExpanded">
              <view class="notice-item">
                <text>{{ $t('complaint.noticeone') }}</text>
              </view>
              <view class="notice-item">
                <text>{{ $t('complaint.noticetwo') }}</text>
              </view>
            </view>

            <!-- 展开状态显示全部 -->
            <view class="notice-content" v-else>
              <view class="notice-item">
                <text>{{ $t('complaint.noticeone') }}</text>
              </view>
              <view class="notice-item">
                <text>{{ $t('complaint.noticetwo') }}</text>
              </view>
              <view class="notice-item">
                <text>{{ $t('complaint.noticethree') }}</text>
              </view>
              <view class="notice-item">
                <text>{{ $t('complaint.noticefour') }}</text>
              </view>
              <view class="notice-item">
                <text>{{ $t('complaint.noticefive') }}</text>
              </view>
              <view class="notice-item">
                <text>{{ $t('complaint.noticenoticeContent') }}</text>
              </view>
            </view>
          </view>
          <button class="submit-btn" :disabled="!selectedType.value" @click="handleSubmit">
            {{ $t('complaint.submit') }}
          </button>
        </view>
      </ZPaging>

      <!-- 固定在底部的提交按钮 -->

    </div>
  </div>
</template>


<script setup>
  import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
  import {
    ref
  } from 'vue';
  import {
    onLoad
  } from '@dcloudio/uni-app';
  import {
    useI18n
  } from 'vue-i18n';

  const {
    t
  } = useI18n();


  // 投诉类型选项
  const complaintTypes = computed(() => [{
      label: t('complaint.typeOptions.porn'),
      value: 'porn'
    },
    {
      label: t('complaint.typeOptions.illegal'),
      value: 'illegal'
    },
    {
      label: t('complaint.typeOptions.gambling'),
      value: 'gambling'
    },
    {
      label: t('complaint.typeOptions.violence'),
      value: 'violence'
    },
    {
      label: t('complaint.typeOptions.selfHarm'),
      value: 'selfHarm'
    },
    {
      label: t('complaint.typeOptions.other'),
      value: 'other'
    }
  ]);

  // 表单数据
  const selectedType = ref({});
  const imageList = ref([]);
  const complaintContent = ref('');
  const isNoticeExpanded = ref(false);

  // 切换投诉须知展开状态
  const toggleNotice = () => {
    isNoticeExpanded.value = !isNoticeExpanded.value;
  };

  // 选择投诉类型
  const handleTypeChange = (e) => {
    selectedType.value = complaintTypes.value[e.detail.value];
  };

  // 选择图片
  const chooseImage = () => {
    uni.chooseImage({
      count: 9 - imageList.value.length,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        imageList.value = [...imageList.value, ...res.tempFilePaths];
        if (imageList.value.length > 9) {
          uni.showToast({
            title: `最多只能选择9张图片`,
            icon: 'none'
          });
        }
      }
    });
  };

  // 删除图片
  const removeImage = (index) => {
    imageList.value.splice(index, 1);
  };

  // 预览图片
  const previewImage = (index) => {
    uni.previewImage({
      current: index,
      urls: imageList.value
    });
  };

  // 提交投诉
  const handleSubmit = () => {
    const formData = {
      type: selectedType.value,
      images: imageList.value,
      content: complaintContent.value
    };
    uni.showLoading({
      title: t('complaint.toast.submitting') // 使用国际化文本
    });
    setTimeout(() => {
      uni.hideLoading();
      uni.showToast({
        title: t('complaint.toast.success'),
        icon: 'success'
      });
      selectedType.value = {};
      imageList.value = [];
      complaintContent.value = '';
      // 返回上一页
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    }, 2000);
  };

  onLoad(() => {
    // 页面加载时初始化
  });
</script>

<style scoped lang="scss">
  ::v-deep .uni-picker-action-confirm {
    color: #452aa1 !important;
  }

  .outer-layer {
    flex: 1;
    background-image: url('@/static/image/mine/1111.png');
    background-size: cover;
    background-repeat: no-repeat;
  }

  .complaint-container {
    padding: 20rpx 30rpx;
    background-color: rgba(255, 255, 255, 0.9);
    margin: 20rpx;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  }

  .form-item {
    margin-bottom: 40rpx;
  }

  .form-label {
    display: block;
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 20rpx;
  }

  .picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx;
    background-color: #f7f7f7;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #333;
  }

  .upload-area {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
  }

  .upload-btn {
    width: 160rpx;
    height: 160rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f7f7f7;
    border-radius: 12rpx;
    border: 1rpx dashed #ddd;
  }

  .upload-text {
    font-size: 24rpx;
    color: #999;
    margin-top: 10rpx;
  }

  .image-wrapper {
    width: 160rpx;
    height: 160rpx;
    position: relative;
    border-radius: 12rpx;
    overflow: hidden;
  }

  .uploaded-image {
    width: 100%;
    height: 100%;
  }

  .delete-icon {
    position: absolute;
    top: 8rpx;
    right: 8rpx;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 4rpx;
  }

  .content-textarea {
    width: 100%;
    height: 200rpx;
    padding: 20rpx;
    background-color: #f7f7f7;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #333;
  }

  .notice-box {
    padding: 20rpx;
    background-color: #f0f7ff;
    border-radius: 12rpx;
    margin: 40rpx 0;
  }

  .notice-title {
    font-size: 28rpx;
    color: #452aa1;
    font-weight: bold;
    display: block;
    margin-bottom: 10rpx;
  }

  .notice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
  }

  .toggle-btn {
    color: #452aa1;
    font-size: 24rpx;
  }

  .notice-content {
    font-size: 24rpx;
    color: #666;
    line-height: 1.6;
    padding-bottom: 20rpx;
  }

  .submit-btn {
    margin-top: 40rpx;
    background-color: #452aa1;
    color: white;
    border-radius: 8rpx;
    height: 90rpx;
    line-height: 90rpx;
    font-size: 32rpx;

    &[disabled] {
      background-color: #f0f0f0;
    }
  }
</style>
