<template>
  <view class="app-container">
    <!-- 订单核销结果 -->
    <view class="container" v-if="pageType == '1'">
      <view class="container-info">
        <view class="info-title">自提商品信息</view>

        <view
          v-for="(item, index) in info.orderDetails || []"
          :key="index"
          :class="
            info.orderDetails && info.orderDetails.length > 1
              ? 'info-item-container'
              : ''
          "
        >
          <view class="info-item u-flex-center">
            <text class="info-label">名称：</text>
            <text class="info-value">
              {{ item.productTitle || "--" }}
            </text>
          </view>
          <view class="info-item u-flex-center">
            <text class="info-label">金额：</text>
            <text class="info-value">￥{{ item.paymentAmount || "--" }}</text>
          </view>
        </view>

        <!-- <view
          class="info-item u-flex-center"
          v-if="info.orderPackages && info.orderPackages.length > 0"
        >
          <text class="info-label">说明：</text>
          <text class="info-value" v-if="info.orderPackages[0].packagePickupVo">
            {{ info.orderPackages[0].packagePickupVo.remark || "--" }}
          </text>
        </view> -->
      </view>
      <view class="container-partition u-flex-center-sb">
        <view class="partition-circle left"> </view>
        <view class="partition-line"></view>
        <view class="partition-circle right"></view>
      </view>
      <view class="container-code">
        <view class="code-text">券码</view>
        <view class="code">{{ code || "--" }}</view>
      </view>
    </view>

    <!-- 用户信息 -->
    <view class="container" v-if="pageType == '2'">
      <view class="container-user u-flex-center">
        <image
          class="user-avatar"
          :src="info.headPhoto || $defaultAvatar"
          mode="aspectFill"
        ></image>
        <view class="user-info">
          <view class="user-name">{{ info.nickname || "--" }}</view>
          <view class="user-mobile u-flex-center">
            <view class="user-mobile-label"
              ><text class="iconfont">&#xe679;</text>电话：</view
            >
            <view class="user-mobile-value">{{ info.mobile || "--" }}</view>
          </view>
          <view class="user-num">
            <text class="label">用户本店剩余积分：</text>
            <text class="value">{{ info.businessIntegralAble || "0" }}</text>
          </view>
        </view>
      </view>
      <view class="container-partition u-flex-center-sb">
        <view class="partition-circle left"> </view>
        <view class="partition-line"></view>
        <view class="partition-circle right"></view>
      </view>
      <view class="form-container">
        <view class="form-item">
          <view class="form-item-label">核销积分：</view>
          <view class="form-item-value u-flex-center">
            <image
              class="form-item-value-image"
              :src="$handleImageUrl('/personalCenter/icon_points.png')"
              mode=""
            >
            </image>
            <input
              class="form-item-value-input"
              v-model="formData.integral"
              type="idcard"
              placeholder="请输入积分数"
              placeholder-style="color: #d9d9d9;"
            />
          </view>
        </view>

        <view class="form-item">
          <view class="form-item-label">核销说明：</view>
          <view class="form-item-value">
            <textarea
              v-model="formData.remark"
              class="form-item-value-textarea"
              placeholder="请输入核销原因"
              placeholder-style="color: #d9d9d9;"
              auto-height
            />
          </view>
        </view>
      </view>
    </view>

    <view class="button-container">
      <button class="u-btn-two" @click="confirmWriteOff">确认核销</button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { integralVerifierVerify_Api, queryUserInfo_Api } from "@/api/index";
import {
  pickUpVerification_Api,
  getOrderByVerificationCode_Api,
} from "@/api/order";

const pageType = ref("1");
const info = ref({});
const code = ref("");
const formData = reactive({});

// 订单核销
const submitOrderVerification = () => {
  if (!code.value) {
    uni.showToast({
      title: "未获取到核销码",
      icon: "none",
    });
    return;
  }
  uni.showLoading({ title: "核销中", mask: true });
  pickUpVerification_Api({
    verificationCode: code.value,
  })
    .then((res) => {
      uni.hideLoading();
      if (res.code === 200) {
        uni.$uv.toast("核销成功");
        setTimeout(() => {
          uni.navigateBack();
        }, 500);
      }
    })
    .catch((err) => {
      // uni.hideLoading();
    });
};

// 积分核销
const submitPointsRedemption = () => {
  if (!formData.integral) {
    uni.$uv.toast("请输入积分数");
    return;
  }
  if (info.value.businessIntegralAble * 1 < formData.integral * 1) {
    uni.$uv.toast("核销积分不能超过已有积分");
    return;
  }
  uni.showLoading({ title: "核销中", mask: true });
  integralVerifierVerify_Api({
    integral: formData.integral,
    remark: formData.remark,
    code: code.value,
  })
    .then((res) => {
      uni.hideLoading();
      if (res.code === 200) {
        uni.$uv.toast("核销成功");
        setTimeout(() => {
          uni.navigateBack();
        }, 500);
      }
    })
    .catch((err) => {
      // uni.hideLoading();
    });
};

const confirmWriteOff = () => {
  console.log("确认核销");
  if (pageType.value == "1") submitOrderVerification();
  else submitPointsRedemption();
};

// 根据券码获取用户信息
const getQueryUserInfo = (code) => {
  uni.showLoading({ title: "加载中" });
  queryUserInfo_Api(code)
    .then((res) => {
      console.log(res);
      if (res.code === 200) {
        info.value = res.data;
      }
      uni.hideLoading();
    })
    .catch((err) => {
      // uni.hideLoading();
      setTimeout(() => {
        uni.navigateBack();
      }, 500);
    });
};

// 根据券码获取订单信息
const getOrderByVerificationCode = (code) => {
  uni.showLoading({ title: "加载中" });
  getOrderByVerificationCode_Api({
    verificationCode: code,
  })
    .then((res) => {
      console.log(res);
      if (res.code === 200) {
        info.value = res.data;
      }
      uni.hideLoading();
    })
    .catch((err) => {
      // uni.hideLoading();
      setTimeout(() => {
        uni.navigateBack();
      }, 500);
    });
};

onLoad((options) => {
  pageType.value = options.pageType || "1";
  code.value = options.code || "";
  if (!options.code) {
    uni.showToast({
      title: "未获取到核销码",
      icon: "none",
    });
    uni.navigateBack(); // 返回上一页
  }
  if (options.pageType == "2") {
    getQueryUserInfo(options.code);
  } else {
    getOrderByVerificationCode(options.code);
  }
});
</script>

<style lang="scss" scoped>
.app-container {
  min-height: 100vh;
  box-sizing: border-box;
  background: #f7f7f7;
  padding: 30rpx 30rpx 150rpx 30rpx;
  position: relative;
  .info-item-container {
    margin-bottom: 20rpx;
    border-bottom: 1rpx solid #e5e5e5;
    padding-bottom: 20rpx;
  }
  .container {
    background: #ffffff;
    border-radius: 24rpx;
    padding: 30rpx 0;
    .container-info {
      padding: 0 24rpx 30rpx 24rpx;

      .info-title {
        font-size: 32rpx;
        font-weight: 700;
      }
      .info-item {
        margin-top: 10rpx;
        .info-label {
          flex-shrink: 0;
          font-size: 28rpx;
          color: #1a1a1a;
        }
        .info-value {
          font-size: 28rpx;
          color: #808080;
        }
      }
    }
    .container-partition {
      height: 62rpx;
      .partition-circle {
        width: 62rpx;
        height: 62rpx;
        background: #f7f7f7;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .left {
        margin-left: -31rpx;
      }
      .right {
        margin-right: -31rpx;
      }
      .partition-line {
        border-bottom: 2rpx dashed #e6e6e6;
        margin: 0 10rpx;
        flex: 1;
      }
    }
    .container-code {
      text-align: center;
      padding: 36rpx 0 60rpx 0;
      .code-text {
        font-weight: 600;
        font-size: 36rpx;
        color: #1a1a1a;
      }
      .code {
        font-size: 34rpx;
        font-weight: 700;
        color: #fb2914;
        margin-top: 10rpx;
      }
    }
  }

  .container-user {
    padding: 0 24rpx 30rpx 24rpx;

    .user-avatar {
      width: 146rpx;
      height: 146rpx;
      border-radius: 14rpx;
      flex-shrink: 0;
      margin-right: 30rpx;
    }
    .user-info {
      flex: 1;
      .user-name {
        font-size: 28rpx;
        font-weight: 700;
      }
      .user-mobile {
        font-size: 26rpx;
        margin: 7rpx 0;
        .user-mobile-label {
          color: #1a1a1a;
          .iconfont {
            margin-right: 5rpx;
          }
        }
        .user-mobile-value {
          color: #808080;
        }
      }
      .user-num {
        .label {
          font-size: 24rpx;
          color: #1a1a1a;
        }
        .value {
          font-size: 34rpx;
          font-weight: 700;
          color: #da4f4f;
        }
      }
    }
  }

  .form-container {
    padding: 30rpx 24rpx;
    .form-item {
      margin-bottom: 40rpx;
      border-bottom: 1rpx solid #f0f0f0;
      padding-bottom: 20rpx;
      &:last-child {
        margin-bottom: 0;
        border-bottom: none;
      }
      .form-item-label {
        margin-bottom: 20rpx;
        font-weight: 700;
        font-size: 28rpx;
      }
      .form-item-value {
        .form-item-value-image {
          width: 42rpx;
          height: 40rpx;
          flex-shrink: 0;
          margin-right: 18rpx;
        }
        .form-item-value-input {
          flex: 1;
        }
        .form-item-value-textarea {
          background-color: #f7f7f7;
          width: 100%;
          padding: 13rpx 22rpx;
          border-radius: 10rpx;
          box-sizing: border-box;
          min-height: 162rpx;
        }
      }
    }
  }

  .button-container {
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28rpx 60rpx;
    box-sizing: border-box;
    .u-btn-two {
      height: 90rpx;
      line-height: 90rpx;
    }
  }
}
</style>
