<template>
	<view>
		<uni-forms ref="depositForm" :modelValue="depositFormData" :rules="depositFormRules">
			<uni-forms-item name="pay_ordid">
				<text class="uni-subtitle">{{ $t('form.receipt.label') }}</text>
				<uni-easyinput trim="all" primaryColor="#29BBE4" v-model="depositFormData.pay_ordid"></uni-easyinput>
			</uni-forms-item>
			<view class="imgUploadWrapper">
				<uni-forms-item name="remittance_img">
					<text class="uni-subtitle">{{ $t('form.receiptImg.label') }}</text>
					<uni-file-picker ref="remittance_img" v-model="remittanceImg" file-mediatype="image" mode="grid" :limit="1" @select="(e) => select(e, 'remittance_img')" />
					<view style="max-width: 140px">
						<Progress :progress="remittance_img_progress" :error="remittance_img_error" />
					</view>
					<view style="color: #29bbe4">{{ $t('deposit.uploadCredentialsTip') }}</view>
				</uni-forms-item>
			</view>
			<view>
				<button class="primaryButton" type="button" @click="back">
					{{ $t('form.previousStep') }}
				</button>
				<button class="secondaryButton" style="margin-top: 10px" type="button" :disabled="btnLoading" @click="handleSaveDeposit">
					<image v-show="btnLoading" src="/static/loadingCircle.svg" mode="aspectFit" style="width: 16px; height: 16px"></image>
					{{ $t('form.submitAudit') }}
				</button>
			</view>
		</uni-forms>
	</view>
</template>

<script>
import { getDepositDataById, saveDepositData } from '@/services/capital/deposit.ts';
import { imgUpload } from '@/services/common.ts';
export default {
	name: 'UploadCredentials',
	props: {
		depositData: {
			type: Object,
			required: true,
			default: () => ({})
		},
		back: {
			type: Function,
			default: () => {}
		}
	},
	data() {
		return {
			btnLoading: false,
			remittanceImg: undefined,
			remittance_img_progress: 100,
			remittance_img_error: false,
			depositFormData: {},
			depositFormRules: {
				remittance_img: {
					rules: [
						{
							required: true,
							errorMessage: this.$t('form.receiptImg.required')
						}
					]
				}
			}
		};
	},
	methods: {
		async select(e, field) {
			this[`${field}_progress`] = 0;
			this[`${field}_error`] = false;
			let step = 1;
			const timer = setInterval(() => {
				if (this[`${field}_progress`] > 85) {
					step = 0.1;
				} else if (this[`${field}_progress`] > 35) {
					step = 0.8;
				} else if (this[`${field}_progress`] > 15) {
					step = 0.4;
				}
				if (this[`${field}_progress`] + step > 98) {
					clearInterval(timer);
					return;
				}
				this[`${field}_progress`] += step;
			}, 34);
			this.$refs[field].files[0].progress = 100;
			const res = await imgUpload(e);
			if (res && res.code === 0) {
				this[`${field}_progress`] = 100;
				this.depositFormData[field] = res.data?.imgNameList?.[0];
				uni.showToast({
					icon: 'none',
					title: this.$t('common.success.uploadSuccess')
				});
			} else {
				this[`${field}_error`] = true;
				this.$cusModal.showModal({
					type: 'message',
					status: 'warning',
					contentText: res.msg ?? this.$t('common.error.uploadError')
				});
			}
		},
		async handleSaveDeposit() {
			this.$refs.depositForm.validate().then(async (fields) => {
				console.log('fields==>', fields);
				this.btnLoading = true;
				const res = await saveDepositData({ ...fields, id: this.depositData?.obj?.goldInId, status: 0 });
				this.btnLoading = false;
				if (res && res.code === 0) {
					uni.redirectTo({
						url: `/pages/capital/deposit/success/index?pageTitle=${this.$t('deposit.depositType.scan')}`
					});
				} else {
					this.$cusModal.showModal({
						type: 'message',
						status: 'warning',
						contentText: res.msg ?? this.$t('common.error.sysError')
					});
				}
			});
		}
	}
};
</script>

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