<template>
  <view class="container" :class="[`${themeInfo.theme}-theme`]">
    <view class="content">
      <view class="card">
        <view class="title font26 fontb mgb20"> {{ $t('unlock.uploadTip') }}</view>
        <view class="upload">
          <my-upload v-model="moveImageList" :maxCount="2" :addWatermark="false" width="200rpx" height="200rpx"
                            :previewFullImage="false" uploadText=" ">
                            <!-- <image src="/static/personal/id01.png" mode="aspectFit"
                                    style="width: 280rpx;height:200rpx;margin-bottom:20rpx"></image>
                                <view class="upLoadText">
                                    {{ $t("common.IdCardBack") }}
                                </view> -->
          </my-upload>
        </view>
        <view>
          <text class=" font26 fontb" style="font-size: 26rpx;margin-top: 10rpx;">
            退仓说明：
          </text>
        </view>
        <view>
          <text class=" font26 fontb" style="font-size: 26rpx;margin-top: 10rpx;">
          退仓后，您将失去开门权限！请确认已经清空仓内物品，14个工作日内，系统将会自动返还押金。
        </text>
        </view>
      </view>
      <view class="modal-buttonOut">
        <uv-button :customStyle="{
          height: '86rpx',
          lineHeight: '86rpx',
          color: '#fff',
          fontSize: '32rpx',
        }" color="#FB322E" shape="circle" @click="handleRefundLocker">
          申请退仓
        </uv-button>
      </view>
    </view>
    <view class="footer">
      <view @click="toHome">
        返回主页
      </view>
      <view @click="goOrder">
        返回订单
      </view>
    </view>

    <!-- 成功退仓弹窗 -->
    <uv-popup ref="moveOutPopup2" customStyle="width: 620rpx; border-radius: 24rpx;" :safeAreaInsetBottom="false"
      :closeOnClickOverlay="false" zIndex="9999">
      <view class="modal-container">
        <view class="modal-title">{{ $t("unlock.moveoutReminder") }}</view>
        <text class="modal-text">
          {{ $t("unlock.moveoutSuccess") }}
        </text>
        <view class="modal-button">
          <!-- <view class="modal-button-2"  @click="goEvaluate">{{ $t("unlock.evaluate") }}</view> -->
          <uv-button @click="closeModal2" :customStyle="{
            height: '86rpx',
            lineHeight: '86rpx',
            color: '#000',
            fontSize: '32rpx',
          }" shape="circle">
            关闭
          </uv-button>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onTabItemTap, onShowRerequestByIsLogin, makePhoneCall ,navigateBack} from '/utils/common.js'
import { navigateTo } from '@/utils/navigateTo';
import { onLoad, onShow, onShareAppMessage, onHide } from '@dcloudio/uni-app'
import myUpload from "@/components/myUpload.vue";
// 主题色配置
import { useMainStore } from "@/store/index.js";
import { navbarHeightAndStatusBarHeight, shareParam } from "@/utils/common.js";
import { storeToRefs } from 'pinia';
import { useOrderApi } from "@/Apis/order.js";
import { baseImageUrl } from "@/config/index.js";
import { useSiteApi } from "@/Apis/site.js";
import { useI18n } from 'vue-i18n';


const moveOutPopup2 = ref(null);
const { themeInfo, getUserInfo, getHasVerify } = useMainStore();
const { storeState } = storeToRefs(useMainStore());
const { locale, t } = useI18n();
const getApi = useOrderApi()

const getSiteApi = useSiteApi();

uni.hideTabBar();
const state = ref({
  orderId: "",
});


// const getLockerById = () => {
//   uni.showLoading();
//   getSiteApi.GetLockerById({ lockerId: state.value.selectItem.lockerId }).then((res) => {
//     if (res.code === 200) {
//       state.value.lockData = res.data;
//       state.value.lockData.orderId = state.value.selectItem.orderId;
//       GetOrderById();
//       getLockerExpense();
//     }
//   });
// };

// 发起退仓请求后点击我的订单跳到unlock
function closeModal2() {
  moveOutPopup2.value.close()
  navigateBack()
}

const moveImageList = ref([]);
// 确认退仓
const handleRefundLocker = async () => {
  try {
    const hasLoadingImage = moveImageList.value.find(item => item.status === 'uploading');
    if (hasLoadingImage) {
      uni.showToast({
        title: '图片上传中，请稍后',
        icon: 'none'
      });
      return;
    }
    const imageList = moveImageList.value.filter(item => item.status === 'success');
    if (!imageList.length) {
      uni.showToast({
        title: '请上传图片',
        icon: 'none'
      });
      return;
    }
    if (state.value.refundLoading) return;
    uni.showLoading({ mask: true });
    state.value.refundLoading = true;
    let imageUrls = imageList.map(item => item.url);
    imageUrls = imageUrls.join(',');
    const { code } = await getApi.ApplyForRefundLocker({ orderId: state.value.orderId, imageUrl: imageUrls });
    if (code == 200) {
      moveOutPopup2.value.open();
    }
    uni.hideLoading();
    state.value.refundLoading = false;
  } catch (error) {
    uni.hideLoading();
    state.value.refundLoading = false;
  }
}



const GetOrderById = () => {
  uni.showLoading()
  state.value.orderData = {}
  getApi.GetOrderById({ orderId: state.value.orderId }).then(res => {
    uni.hideLoading()
    if (res.code === 200) {
      state.value.orderData = res.data
    }
  })
}


onShareAppMessage((res) => {
  if (res.from === "button") {
    // 来自页面内分享按钮
    console.log(res.target);
  }
  return shareParam;
});
onLoad((params) => {
  // GetOrderList()
  state.value.orderId = params.orderId;

})
onHide(() => {

})


const token = ref(uni.getStorageSync('token'))
onShow(() => {
  uni.hideTabBar()
  token.value = uni.getStorageSync('token')


  onShowRerequestByIsLogin(() => {

  }, (err) => {

  })
})
const toHome = (item) => {
  uni.switchTab({
    url: `/pages/index/index`,
  });
}

const goOrder = () => {
  navigateTo('/pages/unlock/index');
}

</script>

<style scoped lang="scss">
@import '@/static/style/theme.scss';

// 解决H5转微信小程序使用v-show不生效的问题
[hidden] {
  display: none !important;
}
.modal-container {
	// height: 700rpx;
	// background: #000;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	padding: 32rpx;

	.modal-title {
		width: 100%;
		text-align: center;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;
	}

	:deep(.uv-upload__wrap) {
		display: flex;
	}

	.modal-text {
		width: 100%;
		margin: 20rpx 0;
		font-size: 26rpx;
		font-weight: 600;
		text-align: center;
		line-height: 32rpx;
	}
  .modal-button{
    width: 100%;
  }
	.upload {
		margin-top: 30rpx;
		height: 250rpx;
		width: 100%;
		// background: #000;
		display: flex;
		justify-content: center;
		// overflow-x: scroll;
		overflow-y: scroll;
		// white-space: nowrap;
		flex-wrap: nowrap;
		// overflow: hidden;
	}
}

.modal-container2 {
	height: 400rpx;

	@extend .modal-container
}
.modal-buttonOut{
    position: fixed;
    width: 100%;
    padding: 20px;
    bottom: 100rpx;
    left: 0;
    display: flex;
    justify-content: center;
    :deep(.uv-button){
      width: 630rpx;
    }
}
.upload{
  padding-top: 20rpx;
  padding-bottom: 40rpx;
  border-bottom: 1.5px solid #787B7E10;
  margin-bottom: 20rpx;
}
.footer{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  view{
    width: 50%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    color: #000;
    font-size: 30rpx;
    font-weight: bold;
  }
}
</style>
