<template>
  <view
    class="container"
    :class="[`${themeInfo.theme}-theme`, `${themeInfo.language}`]"
  >
    <navBar />
    <view class="content">
      <view class="info">
        <view class="i-header">
          <view class="tabbox">
            <view
              class="li"
            >
              {{ $t("common.facialData") }}
            </view>
          </view>
        </view>
        <view class="infobox">
          <view class="personal">
            <view class="select">
              <view class="label"> * 上传{{ state.appText }} Upload  Photo </view>
              <view class="inputBox">
                <view class="ImgUpload">
                  <view style="position: relative;">
                    <!-- <my-upload v-model="state.formData.idFile1"   :show-edit="true">
                    </my-upload> -->
                      <view  style="display: flex;justify-content: center;width: 350rpx;align-items: center;">
                        <uv-icon v-if="!state.formData.facePhoto" name="camera" color="#ceced0" size="160" @click="handelCorpImage"></uv-icon>
						            <image v-else :src="state.formData.facePhoto" mode="" @click="handelCorpImage"></image>
                      </view>
                    
                  </view>
                </view>
              </view>
            </view>
            <view class="btn">
              <button class="next-btn"  @click="toggleEdit()">
                {{ $t("common.auth") }}
              </button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <qf-image-cropper class="qf-image-cropper " :choosable='false' v-show="state.showCrop" ref="qfImageCropperRef" :width="300" :height="400" :checkRange="true" :showAngle="true" @crop="handleCrop"></qf-image-cropper>
    <!-- 是否验证成功 -->
    <myModal v-model="state.showAuthModal" @confirm="confirm" content="授权成功" :cancelShow="false"></myModal>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import QfImageCropper from '@/pagesb/components/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue';
import { onLoad } from "@dcloudio/uni-app";
import { baseImageUrl,RElEASE_DATE} from "@/config/index.js";
// import { navigateBack } from '@/utils/common.js';
import navBar from "@/components/navBar.vue";
// import myUpload from "@/components/myUpload.vue";
// 主题色配置
import { useMainStore } from "@/store/index.js";
import myModal from "@/components/myModal.vue";
const { themeInfo, storeState } = useMainStore();
import { useI18n } from 'vue-i18n';
import { useOrderApi } from "@/Apis/order.js";
const { t } = useI18n();
const app = getApp();
const pages = getCurrentPages()
const getApi = useOrderApi();
const qfImageCropperRef = ref()

const state = reactive({
  showAuthModal: false,
  showCrop:false,
  contentTips:'', // 验证成功提示
  formData: {
    orderId: '',
	facePhoto:''
  },
  appText: "仓位货物"
});
const handelCorpImage = () => {
				state.showCrop = true
				qfImageCropperRef.value.resetData()
				qfImageCropperRef.value.chooseImage({ sourceType: ['camera'],fail:()=>{
					state.showCrop = false
				}}
				);
}
const handleCrop = (e) => {
				state.showCrop = false
				state.formData.facePhoto = e.tempFilePath
				// uni.previewImage({
				// 	urls: [e.tempFilePath],
				// 	current: 0
				// });
				
      }

onLoad((event) => {
  state.formData.orderId = event.id;
  getInfo()
  GetAppText()
});

const toggleEdit = () => {
  verifyPerson()
}
const getInfo = () => {
  uni.showLoading();
  getApi.GetOrderAuthorizationFace({
    orderId: state.formData.orderId,
  }).then(res => {
    uni.hideLoading();
    if (res.code == 200) {
      const today = new Date();
      const target = new Date(2026, 0, 28); // 月份从 0 开始
    if((today > target)){
      state.formData.facePhoto =  baseImageUrl + res.data
    };
}
  });
}
const GetAppText = ()=>{
  getApi.GetAppText({key:'APPTEXT'}).then(res=>{
    if(res.code == 200){
		if(state.formData.orderId){
			state.appText = res.data
		}
    }else{
      state.appText = "仓位货物"
    }
  })
}

const confirm = () => {
    uni.reLaunch({
      url: "/pages/unlock/index",
    });
};

// 上传请求
async function UploaderImage(url) {
  let url1 = "";
  try {
    const res = await getApi.UploaderImage({ filePath: url });
    // const jsonstr = JSON.parse(res);
    url1 = res.data;
  } catch (error) {
    // 在这里处理错误情况
    console.error("UploaderImage error:", error);
    throw error; // 抛出错误，可以让调用者处理
  }
  return url1;
}
// 提交个人认证信息
const verifyPerson = async () => {
	let facePhoto = state.formData.facePhoto
  if(!facePhoto){
	  uni.showToast({
		  title: "请上传图片,再授权！",
		  icon: 'none'
	  })
	  return
  }
	if(state.formData.facePhoto.indexOf(baseImageUrl) ===-1){
		try{
			uni.showLoading();
			facePhoto = await UploaderImage(state.formData.facePhoto)
      facePhoto = baseImageUrl + facePhoto
		}catch(e){
			//TODO handle the exception
			uni.showToast({
					title: "上传失败，请稍后重新尝试",
					icon: 'none'
						})
			uni.hideLoading()
			return
		}
		
	}
  uni.showLoading();
  getApi.OrderAuthorization({
    orderId: state.formData.orderId,
    facePhoto: facePhoto.replace(baseImageUrl,""),

  }).then(res => {
    uni.hideLoading();
    if (res.code == 200) {
      state.showAuthModal = true;
    }
   
  });
}
</script>
<style lang="scss" scoped>
@import "@/static/style/theme.scss";

.container {
  margin: 0;
  padding: 0 20upx;
  width: 100%;
  min-height: 100vh;
  padding-bottom: 80rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(
    to bottom,
    var(--right-linear),
    var(--left-linear2)
  );
  background-attachment: fixed;
  .qf-image-cropper {
	  z-index: 10;
  }
  .content {
    width: 100%;
    .infobox {
      width: 100%;
      padding: 20upx 30upx;
      background-color: #ffffff;
      position: relative;
			&::before {
        content: "";
        z-index: 9;
        position: absolute;
        bottom: -7px;
        left: 0;
        width: 100%;
        height: 14px;
        background: radial-gradient(var(--left-linear2) 0px, var(--left-linear2) 5px, transparent 5px, transparent);
        background-size: 14px 14px;
      }
    }
    .btn {
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      padding:0 20rpx;
      button {
        font-size: 28rpx;
        padding: 12rpx 0;
        font-size: 30rpx;
        font-weight: bold;
        color: var(--text-color);
        background: var(--active-color);
        border-radius: 10rpx;
        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.13);
      }
    }
    .select {
      border-bottom: 1px dashed #d8d8d857;
      margin-bottom: 16rpx;
      .label {
        color: #bec2ce;
        font-size: 26rpx;
      }
      .info {
        color: #242e42;
        font-size: 22rpx;
        display: flex;
        justify-content: space-between;
        font-weight: bold;
        padding: 0 18rpx;
        opacity: 0.7;
        &.Total {
          margin-top: 10rpx;
          color: #242e42;
          opacity: 1;
        }
      }
      .garyBox {
        background-color: rgba(216, 216, 216, 0.3);
        border-radius: 8rpx;
        padding: 2rpx 10rpx;
        font-size: 20rpx;
        font-weight: bold;
        color: rgb(36, 46, 66);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 10rpx 4rpx;
      }
      .inputBox {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10rpx;
        margin-left: 5px;
        
        .ImgUpload {
          display: flex;
          margin: 10upx 0;
        }
        .value {
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          color: #242e42;
          font-size: 24rpx;
          font-weight: bold;
        }
        .arrow {
          width: auto;
          font-size: 24rpx;
          .codeBtn {
            font-size: 24rpx;
            background-color: #d1cbcb2d;
          }
        }
       
      }
    }
  }
  .i-header {
    position: relative;
    &::before {
      content: "";
      position: absolute;
      top: -7px;
      left: 0;
      width: 100%;
      height: 14px;
      background: radial-gradient(var(--right-linear) 0px, var(--right-linear) 5px, transparent 5px, transparent);
      background-size: 14px 14px;
      z-index: 9;
    }
    padding: 30upx 0;
    width: 100%;
    background-color: #f7f7f7;
    color: #242e42;
    .tabbox {
      position: relative;
      padding: 20upx 10%;
      display: flex;
      justify-content: space-around;
      .li {
        width: 50%;
        background-color: transparent;
        font-size: 32upx;
        outline: none;
        text-align: center;
      }
      .li.active {
        font-weight: bold;
      }
      .bottom-line {
        position: absolute;
        left: calc(50% - 220rpx);
        bottom: 0;
        width: 160rpx;
        height: 2.5px;
        border-radius: 20px;
        background: var(--main-color);
        transition: left 0.5s ease;

        &.right {
          left: calc(50% + 60rpx);
        }
      }
    }
  }
}
</style>
