<template>
  <view class="after-sale-add">
    <!-- 商品信息卡片 -->
    <view class="card-section">
      <view class="card-header">
        <text class="card-title">商品信息</text>
      </view>
      <view class="product-section">
        <image
          class="product-image"
          :src="productInfo.image || '/static/image/default-product.png'"
          mode="aspectFill"
        />
        <view class="product-info">
          <text class="product-title">{{
            productInfo.title || "IP文创公仔"
          }}</text>
          <text class="product-subtitle">{{
            productInfo.subtitle || "这里是文创公仔的副标题"
          }}</text>
          <text class="product-desc">{{
            productInfo.description || "介绍"
          }}</text>
        </view>
      </view>
    </view>

    <!-- 售后表单卡片 -->
    <view class="card-section">
      <view class="card-header">
        <text class="card-title">售后信息</text>
      </view>
      <view class="form-section">
        <!-- 售后类型 -->
        <view class="form-item" @click="showTypePopup">
          <text class="form-label">售后类型</text>
          <view class="form-value-with-icon">
            <text class="form-value">{{ afterSaleForm.type }}</text>
            <uni-icons type="right" size="16" color="#999" />
          </view>
        </view>

        <!-- 售后原因 -->
        <view class="form-item" @click="showReasonPopup">
          <text class="form-label">售后原因</text>
          <view class="form-value-with-icon">
            <text class="form-value">{{ afterSaleForm.reason }}</text>
            <uni-icons type="right" size="16" color="#999" />
          </view>
        </view>

        <!-- 理由说明 -->
        <view class="form-item">
          <text class="form-label">理由说明</text>
          <textarea
            class="reason-textarea"
            v-model="afterSaleForm.description"
            placeholder="请详细描述问题..."
            maxlength="500"
          />
          <text class="char-count"
            >{{ afterSaleForm.description.length }}/500</text
          >
        </view>

        <!-- 图片上传 -->
        <view class="form-item">
          <text class="form-label"
            >问题图片 <text class="required">*</text></text
          >
          <text class="form-sub-label">最多可上传9张图片</text>
          <view class="image-upload-section">
            <uni-file-picker
              v-model="afterSaleForm.images"
              fileMediatype="image"
              mode="grid"
              :limit="9"
              @select="onImageSelect"
              @delete="onImageDelete"
            />
          </view>
        </view>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-section">
      <button
        class="submit-btn"
        @click="submitAfterSale"
        :disabled="!canSubmit"
      >
        提交售后申请
      </button>
    </view>

    <!-- 售后类型选择弹窗 -->
    <uni-popup ref="typePopup" type="bottom">
      <view class="type-popup">
        <view class="popup-header">
          <text class="popup-title">选择售后类型</text>
          <text class="popup-close" @click="closeTypePopup">×</text>
        </view>
        <view class="popup-content">
          <view
            class="type-option"
            v-for="(type, index) in typeOptions"
            :key="index"
            @click="selectType(type)"
          >
            <view class="type-content">
              <text class="type-text">{{ type.text }}</text>
              <uni-icons
                v-if="afterSaleForm.type === type.text"
                type="checkmarkempty"
                size="16"
                color="#00FFFF"
              />
            </view>
          </view>
        </view>
        <view class="popup-actions">
          <button class="confirm-btn" @click="confirmType">确认</button>
        </view>
      </view>
    </uni-popup>

    <!-- 售后原因选择弹窗 -->
    <uni-popup ref="reasonPopup" type="bottom">
      <view class="reason-popup">
        <view class="popup-header">
          <text class="popup-title">选择售后原因</text>
          <text class="popup-close" @click="closeReasonPopup">×</text>
        </view>
        <view class="popup-content">
          <view
            class="reason-option"
            v-for="(reason, index) in reasonOptions"
            :key="index"
            @click="selectReason(reason)"
          >
            <view class="reason-content">
              <text class="reason-text">{{ reason.text }}</text>
              <uni-icons
                v-if="afterSaleForm.reason === reason.text"
                type="checkmarkempty"
                size="16"
                color="#00FFFF"
              />
            </view>
          </view>
        </view>
        <view class="popup-actions">
          <button class="confirm-btn" @click="confirmReason">确认</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      productInfo: {
        image: "",
        title: "IP文创公仔",
        subtitle: "这里是文创公仔的副标题",
        description: "介绍",
      },
      afterSaleForm: {
        type: "换货",
        reason: "商品质量问题",
        description: "",
        images: [],
      },
      typeOptions: [
        { text: "换货", value: "exchange" },
        { text: "仅退款", value: "refund" },
        { text: "退货", value: "return" },
      ],
      reasonOptions: [
        { text: "商品质量问题", value: "quality" },
        { text: "物流包装破损", value: "damage" },
        { text: "未收到货", value: "not_received" },
        { text: "商品与描述不符", value: "mismatch" },
        { text: "其他原因", value: "other" },
      ],
      selectedType: null,
      selectedReason: null,
    };
  },
  computed: {
    canSubmit() {
      return (
        this.afterSaleForm.description.trim().length > 0 &&
        this.afterSaleForm.images.length > 0
      );
    },
  },
  onLoad(options) {
    // 接收商品信息参数
    if (options.productInfo) {
      this.productInfo = JSON.parse(decodeURIComponent(options.productInfo));
    }
  },
  methods: {
    // 显示售后类型选择弹窗
    showTypePopup() {
      this.$refs.typePopup.open();
    },

    // 关闭售后类型选择弹窗
    closeTypePopup() {
      this.$refs.typePopup.close();
    },

    // 选择售后类型
    selectType(type) {
      this.selectedType = type;
    },

    // 确认售后类型
    confirmType() {
      if (this.selectedType) {
        this.afterSaleForm.type = this.selectedType.text;
      }
      this.closeTypePopup();
    },

    // 显示售后原因选择弹窗
    showReasonPopup() {
      this.$refs.reasonPopup.open();
    },

    // 关闭售后原因选择弹窗
    closeReasonPopup() {
      this.$refs.reasonPopup.close();
    },

    // 选择售后原因
    selectReason(reason) {
      this.selectedReason = reason;
    },

    // 确认售后原因
    confirmReason() {
      if (this.selectedReason) {
        this.afterSaleForm.reason = this.selectedReason.text;
      }
      this.closeReasonPopup();
    },

    // 图片选择回调
    onImageSelect(e) {
      console.log("选择图片:", e);
      uni.uploadFile({
        url: this.NEWAPIURL_DES + "/system/oss/upload", //仅为示例，非真实的接口地址
        filePath: e.tempFilePaths[0],
        name: "file",

        success: (uploadFileRes) => {
          console.log(uploadFileRes);
          let data = JSON.parse(uploadFileRes.data);
          if (data.code == 200) {
            this.afterSaleForm.images.push(data.url);
          }
        },
      });
    },

    // 图片删除回调
    onImageDelete(e) {
      console.log("删除图片:", e);
    },

    // 提交售后申请
    async submitAfterSale() {
      if (!this.canSubmit) {
        uni.showToast({
          title: "请填写理由说明并上传图片",
          icon: "none",
        });
        return;
      }

      try {
        uni.showLoading({
          title: "提交中...",
        });

        // 构建提交数据
        const submitData = {
          productId: this.productInfo.id,
          type: this.afterSaleForm.type,
          reason: this.afterSaleForm.reason,
          description: this.afterSaleForm.description,
          images: this.afterSaleForm.images.map(
            (item) => item.url || item.path
          ),
        };

        // 调用售后申请API
        this.Post(submitData, "/framework/afterSale/create", "DES")
          .then((res) => {
            uni.hideLoading();
            if (res.code === 200) {
              uni.showToast({
                title: "售后申请提交成功",
                icon: "success",
              });

              // 延迟跳转到售后列表
              setTimeout(() => {
                uni.redirectTo({
                  url: "/subPackages/afterSale/list",
                });
              }, 1500);
            } else {
              uni.showToast({
                title: res.msg || "提交失败",
                icon: "none",
              });
            }
          })
          .catch((error) => {
            uni.hideLoading();
            console.error("提交售后申请失败:", error);
            uni.showToast({
              title: "提交失败",
              icon: "none",
            });
          });
      } catch (error) {
        uni.hideLoading();
        console.error("提交售后申请失败:", error);
        uni.showToast({
          title: "提交失败",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.after-sale-add {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding: 16rpx;
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
  padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
}

// 卡片样式
.card-section {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.card-header {
  padding: 20rpx 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
  background-color: #fafafa;
}

.card-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}

// 商品信息区域
.product-section {
  padding: 24rpx;
  display: flex;
  align-items: flex-start;
}

.product-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  background-color: #f0f0f0;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 6rpx;
}

.product-subtitle {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 4rpx;
}

.product-desc {
  font-size: 24rpx;
  color: #999;
}

// 表单区域
.form-section {
  padding: 0;
}

.form-item {
  padding: 20rpx 24rpx;
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }
}

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

.required {
  color: #00FFFF;
  font-weight: bold;
}

.form-sub-label {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 12rpx;
  display: block;
}

.form-value {
  font-size: 28rpx;
  color: #333;
}

.form-value-with-icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12rpx 0;
}

// 理由说明文本框
.reason-textarea {
  width: 100%;
  min-height: 120rpx;
  max-height: 200rpx;
  padding: 16rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #333;
  background-color: #fafafa;
  box-sizing: border-box;
  resize: none;
}

.char-count {
  font-size: 24rpx;
  color: #999;
  text-align: right;
  margin-top: 8rpx;
  display: block;
}

// 图片上传区域
.image-upload-section {
  margin-top: 12rpx;
}

// 提交按钮区域
.submit-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  border-top: 1rpx solid #eee;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.08);
  z-index: 999;
}

.submit-btn {
  width: 100%;
  height: 80rpx;
  background-color: #00FFFF;
  color: #fff;
  border: none;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: 600;

  &:disabled {
    background-color: #ccc;
  }
}

// 售后类型选择弹窗
.type-popup {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.popup-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.popup-close {
  font-size: 40rpx;
  color: #999;
}

.popup-content {
  max-height: 600rpx;
  overflow-y: auto;
}

.type-option {
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }
}

.type-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.type-text {
  font-size: 28rpx;
  color: #333;
}

.popup-actions {
  padding: 30rpx;
  border-top: 1rpx solid #f0f0f0;
}

.confirm-btn {
  width: 100%;
  height: 80rpx;
  background-color: #00FFFF;
  color: #fff;
  border: none;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: 600;
}

// 售后原因选择弹窗
.reason-popup {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
}

.reason-option {
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }
}

.reason-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reason-text {
  font-size: 28rpx;
  color: #333;
}
</style>
