<template>
	<view class="searchRoot">
		<view class="content">
			<view class="head">
				<text>{{title}}</text>
				<u--image @click="$emit('close')" :src="require('@/static/close.png')" width="22rpx"
					height="22rpx"></u--image>
			</view>
			<u--form labelPosition="top" labelWidth="auto" :model="vmodel" :rules="rules" ref="uForm"
				:labelStyle="labelStyle">
				<u-form-item :prop="item.prop" ref="item1" :label="item.label" :required="item.require"
					v-for="(item,index) in form" :key="index">
					<view v-if="item.type" style="flex: 1;">
						<u-upload :fileList="fileList1" @afterRead="afterRead" accept="image | video" multiple
							:maxCount="10" :previewImage="false">
							<u-button class="btn" type="primary" :text="$t('components.form.choose')"></u-button>
						</u-upload>
						<view class="fileList">
							<view v-for="(item,index) in fileList1" :key="index" @click="deletePic(item,index)"
								style="display: flex;align-items: center;margin-top: 20rpx;">
								<u--image :src="require('@/static/file.png')" width="36rpx" height="28rpx"></u--image>
								<view
									style="display: flex;margin-left: 10rpx;flex: 1;justify-content: space-between;align-items: center;">
									<text>{{item.name}}</text>
									<u--image v-if="item.status=='upload'" :src="require('@/static/loading.gif')"
										width="56rpx" height="56rpx"></u--image>
									<u--image v-if="item.status=='success'" :src="require('@/static/success.png')"
										width="28rpx" height="28rpx"></u--image>
								</view>
							</view>
						</view>
					</view>
					<view v-if="!item.type" style="position: relative;flex:1;">
						<el-select v-if="item.actions" v-model="vmodel[item.prop]" @change="select"
							:placeholder="$t('index.form.a2')" style="width: 100%;">
							<el-option v-for="(i,j) in item.actions" :key="j" :label="i.title" :value="i.id">
							</el-option>
						</el-select>
						<el-input v-else v-model="vmodel[item.prop]"
							:placeholder="$t('components.search.placeholder')"></el-input>
					</view>
				</u-form-item>
			</u--form>
			<u-button class="btn search" type="primary" :text="$t('components.search.button')"
				@click="search"></u-button>
			<!-- 			<view v-if="noData" style="height: 300rpx;display: flex;justify-content: center;align-items: center;">No
				Data</view> -->
			<view class="tab" v-if="result&&!noData" v-for="(item,index) in resultData" :key="index">
				<view class="item" v-for="(i,j) in item">
					<view class="left" :style="i.name=='Status'?'color:#00BA16':i.name=='Reply'?'color:red':''">
						{{i.name}}
					</view>
					<view class="right" v-if="isFile(i)" style="display: flex;flex-wrap: wrap;">
						<view v-if="i.value == '' || i.value == null"></view>
						<view v-else @click="goto(y)" v-for="(y,j) in i.value.split(',')" :key="j"
							style="margin-right: 20rpx;display: flex;flex-direction: column;align-items: center;flex:1">
							<u--image :showLoading="true" :src="i.realPath.split(',')[j]" width="63" height="112">
								<view slot="error">
									<u--image mode="aspectFit" :src="require('@/static/file.png')" width="63"
										height="112"></u--image>
								</view>
							</u--image>
							<!--  -->
							<text
								style="margin-top: 20rpx;overflow:hidden;max-width:100%;">{{y.substring(y.lastIndexOf('/')+1)}}</text>
						</view>
					</view>
					<view class="right" v-else>
						{{i.value}}
					</view>
				</view>
			</view>
		</view>
		<propmt v-if="propmtShow" :srcObj="srcObj" @close="propmtShow = false"></propmt>
	</view>
</template>

<script>
	import {
		getIssue,
		getIssueType
	} from "@/api/issue.js"
	import {
		obsJiemi
	} from "@/api/upload.js"
	import propmt from "@/components/propmt.vue"
	export default {
		name: "search",
		components: {
			propmt
		},
		data() {
			return {
				title: "Issue",
				value: "",
				id: "",
				propmtShow: false,
				srcObj: null,
				labelStyle: {
					"font-family": "Arial",
					"font-weight": 400,
					"font-size": "30rpx",
					"color": "black",
					"line-height": "36rpx",
				},
				form: [{
						label: this.$t('components.search.label'),
						require: true,
						actions: [],
						prop: 'issueType',
						rule: {
							required: true,
							type: 'number',
							message: '',
							trigger: ['blur', 'change']
						},
					},
					{
						label: this.$t('components.search.TCGamesID'),
						require: true,
						prop: 'damanGameId',
						rule: {
							type: 'string',
							required: true,
							message: '',
							trigger: ['blur', 'change']
						},
					},
				],
				result: false,
				show: false,
				issueType: 0,
				resultData: [],
				rules: {},
				vmodel: {},
				noData: false,
			};
		},
		methods: {
			formaterTime(e) {
				return new Date(e).toLocaleDateString() + ' ' + new Date(e).toLocaleTimeString()
			},
			isFile(i) {
				if (typeof i == 'object') {
					switch (i.name) {
						case "Deposit Proof Receipt Detail":
							return true;
						case "Provide Video Record Of Bank Statement":
							return true;
						case "Photo Selfie Holding Passbook Bank":
							return true;
						case "Photo Selfie Holding Identitiy Card":
							return true;
						case "Latest Deposit Receipt Proof":
							return true;
						case "Photo Selfie Holding USDT Address":
							return true;
						case "Photo Of Pass Book":
							return true;
						case "Deposit Receipt Proof":
							return true;
						default:
							return false
					}
				}
				if (typeof i == 'string') {
					switch (i) {
						case "Deposit Proof Receipt Detail":
							return true;
						case "Provide Video Record Of Bank Statement":
							return true;
						case "Photo Selfie Holding Passbook Bank":
							return true;
						case "Photo Selfie Holding Identitiy Card":
							return true;
						case "Latest Deposit Receipt Proof":
							return true;
						case "Photo Selfie Holding USDT Address":
							return true;
						case "Photo Of Pass Book":
							return true;
						case "Deposit Receipt Proof":
							return true;
						default:
							return false
					}
				}
			},
			formateObj(r) {
				let obj;
				r.createTime = this.formaterTime(r.createTime)
				if (this.issueType == 1) {
					obj = {
						Time: r.createTime,
						status: r.status,
						Reply: r.reply,
						TCGamesID: r.damanGameId,
						amount: r.amount,
						"UTR Number": r.utrNum,
						"Deposit proof receipt detail": r.files
					}
				}
				if (this.issueType == 2) {
					obj = {
						Time: r.createTime,
						status: r.status,
						Reply: r.reply,
						TCGamesID: r.damanGameId,
						amount: r.amount,
						"Order Numbber": r.orderNum,
					}
				}
				if (this.issueType == 3) {
					obj = {
						Time: r.createTime,
						status: r.status,
						Reply: r.reply,
						TCGamesID: r.damanGameId,
						amount: r.amount,
						"Order Numbber": r.orderNum,
						"Provide Video Record of Bank Statement": r.files
					}
				}
				if (this.issueType == 4) {
					obj = {
						Time: r.createTime,
						status: r.status,
						Reply: r.reply,
						TCGamesID: r.damanGameId,
						amount: r.amount,
						"Order Numbber": r.orderNum,
						"Correct IFSC": r.correctIfsc,
						"Provide Video Record of Bank Statement": r.files
					}
				}
				if (this.issueType == 5) {
					obj = {
						Time: r.createTime,
						status: r.status,
						Reply: r.reply,
						TCGamesID: r.damanGameId,
						amount: r.amount,
						"Correct Bank Name": r.correctBankName,
						"Order Numbber": r.orderNum,
						"Provide Video Record of Bank Statement": r.files
					}
				}
				if (this.issueType == 6) {
					obj = {
						Time: r.createTime,
						status: r.status,
						Reply: r.reply,
						TCGamesID: r.damanGameId,
						amount: r.amount,
						"Register Phone Number": r.registerPhoneNumber,
						"Order Numbber": r.orderNum,
						"Provide Video Record of Bank Statement": r.files
					}
				}
				if (this.issueType == 8) {
					obj = {
						Time: r.createTime,
						status: r.status,
						Reply: r.reply,
						TCGamesID: r.damanGameId,
						"Register Phone Number": r.registerPhoneNumber,
						"Photo selfie holding passbook bank": r.selfieHoldingCard,
						"Photo selfie holding identitiy card": r.selfieHoldingIdentitiyCard,
						"Latest deposit receipt proof": r.latestDepositReceiptProof,
						"New password": r.newPassword
					}
				}
				if (this.issueType == 9) {
					obj = {
						Time: r.createTime,
						status: r.status,
						Reply: r.reply,
						TCGamesID: r.damanGameId,
						"Register Phone Number": r.registerPhoneNumber,
						"Photo selfie holding identitiy card": r.selfieHoldingIdentitiyCard,
						"Photo selfie holding USDT address": r.selfieHoldingUSDTAddress,
						"Photo of pass book": r.passBook,
						"Deposit receipt proof": r.depositReceiptProof,
						"New USDT address": r.newUSDTAddress
					}
				}
				return obj
			},
			search() {
				this.$refs.uForm.validate().then(res => {
					getIssue({
						issueType: this.issueType,
						damanGameId: this.vmodel.damanGameId
					}).then(async (r) => {
						this.result = true
						if (!r.length) {
							this.noData = true
							uni.showToast({
								title: 'No Data',
								image: require("@/static/fail.png"),
								duration: 1000,
							})
						} else {
							this.noData = false
						}
						for (let i in r) {
							this.$set(this.resultData, i, [])
							r[i] = this.formateObj(r[i])
							if (r[i].status == 0 || r[i].status == undefined) {
								r[i].status = this.$t('components.search.status0')
							}
							if (r[i].status == 1) {
								r[i].status = this.$t('components.search.status1')
							}
							for (let j in r[i]) {
								let realPath;
								if (this.isFile(this.$formaterUpcase(j))) {
									realPath = ''
									let arr = r[i][j].split(',')
									for (let a in arr) {
										let param = await obsJiemi(arr[a])
										arr[a] = param.url
									}
									realPath = arr.join(',')
								}
								this.resultData[i].push({
									name: this.$formaterUpcase(j),
									value: r[i][j],
									realPath: realPath
								})
							}
						}
					})
				}).catch(errors => {
					if (errors[0].message == 'TCGamesID is required') {
						uni.showToast({
							title: "No Data",
							image: require("@/static/fail.png"),
							duration: 1000,
						})
					} else {
						this.result = true
						let r = [{
							time: this.formaterTime(new Date().getTime()),
							status: "Error",
							reply: "Please provide the correct deposit voucher. Thank you"
						}]
						for (let i in r) {
							this.$set(this.resultData, i, [])
							if (r[i].status == 0 || r[i].status == undefined) {
								r[i].status = this.$t('components.search.status0')
							}
							if (r[i].status == 1) {
								r[i].status = this.$t('components.search.status1')
							}
							for (let j in r[i]) {
								this.resultData[i].push({
									name: this.$formaterUpcase(j),
									value: r[i][j]
								})
							}
						}
					}
				})
			},
			select(e) {
				let re;
				for (let i in this.form[0].actions) {
					if (this.form[0].actions[i].id == e)
						re = this.form[0].actions[i]
				}
				this.vmodel.damanGameId = ''
				console.log(re)
				this.show = false
				this.noData = false
				this.resultData = []
				this.issueType = re.id
				this.result = false
			},
			async goto(e) {
				e = await obsJiemi(e, true)
				if (e.type != 'image/*' && e.type != 'video/*') {
					return
				}
				this.propmtShow = true
				this.srcObj = e
			}
		},
		created() {
			getIssueType().then((r) => {
				this.form[0].actions = r
			})
			for (let i in this.form) {
				this.$set(this.rules, this.form[i].prop, this.form[i].rule)
				this.$set(this.vmodel, this.form[i].prop, '')
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-image__error {
		background-color: transparent;
	}

	.actionsParent {
		z-index: 10;
		border-radius: 10rpx;
		position: absolute;
		// bottom: -100%;
		margin-top: 20rpx;
		background: white;
		width: 100%;
		left: 0;
		box-shadow: 5rpx 5rpx 1rpx 1rpx #ccc;
	}

	.actions {
		font-family: Arial;
		font-weight: 400;
		font-size: 24rpx;
		text-indent: 48rpx;
		padding: 20rpx 0;
	}

	.active {
		background: #F5F7FA;
		color: #409EFF;
	}

	.searchRoot {
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		// background:#CCCCCC;
		background: RGBA(204, 204, 204, 0.8);
		display: flex;
		// align-items: center;
		justify-content: center;
		z-index: 100;
		.content {
			border: 20rpx solid var(--borderTheme--);
			width: calc(90% - 60rpx);
			height: fit-content;
			max-height: 70%;
			margin-top: 25%;
			overflow: auto;
			padding: 0 30rpx;
			background: white;
			padding-bottom: 80rpx;

			.head {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 40rpx 0;
				font-family: Arial;
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
			}

			.label {
				font-family: Arial;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
				margin: 25rpx 0;
				display: block;
			}

			.btn {
				font-family: Arial;
				font-weight: 400;
				font-size: 24rpx;
			}

			.search {
				border-radius: 12rpx;
			}

			.tab {
				margin-top: 35rpx;
				display: flex;
				flex-direction: column;
				border: 1rpx solid #EEEEEE;
				font-family: Arial;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
				// max-height: 600rpx;
				overflow: auto;

				.item {
					border-bottom: 1rpx solid #EEEEEE;
					min-height: 80rpx;
					display: flex;

					.left {
						border-right: 10rpx solid #EEEEEE;
						height: inherit;
						// flex:1;
						flex-basis: 40%;
						flex-shrink: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						text-align: center;
					}

					.right {
						flex-basis: 60%;
						// display: flex;
						// align-items: center;
						// justify-content: center;
						text-align: center;
						padding: 28rpx 20rpx;
						vertical-align: middle;
						overflow: hidden;
						word-wrap: break-word;
						word-break: break-all;
					}
				}

				.item:last-child {
					border-bottom: none;
				}
			}
		}
	}
	::v-deep.u-button--primary {
		background: var(--theme--);
		border-color: var(--theme--);
		color:white;
	}
</style>