<template>
	<view class="v-pages-translate">
		<view class="v-translate-bg"></view>
		<view class="v-translate-card container-fluid v-translate-box">
			<view class="row select flex-align-center">
				<view class="col row select-item flex-align-center left" @click="fromShow = true"
					:class="exchange?'right-to-left':'left-to-right'">
					<text class="col">{{ActiveFrom.label}}</text>
					<image class="img" mode="widthFix"
						src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-translate-down.png">
					</image>
				</view>
				<view class="exchange" @click="exchange=!exchange">
					<image class="img" mode="widthFix"
						src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-translate.png"></image>
				</view>
				<view class="col row select-item flex-align-center right" @click="toShow = true"
					:class="exchange?'left-to-right':'right-to-left'">
					<text class="col">{{ActiveTo.label}}</text>
					<image class="img" mode="widthFix"
						src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-translate-down.png">
					</image>
				</view>
			</view>
			<view class="p-l-24 p-r-24">
				<uni-easyinput class="translate" :inputBorder="false" maxlength="-1" placeholderStyle="fontSize:16px"
					type="textarea" v-model="ActiveText" placeholder="请输入翻译内容" @confirm="gotoTranslate"></uni-easyinput>
			</view>

			<view class="result">
				<zero-markdown-view :markdown="resultText"></zero-markdown-view>
			</view>
		</view>

		<view class="btn container-fluid" @click="chooseImage()">
			<view>
				<image src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-camera.png" class="img"
					mode="widthFix">
				</image>
			</view>
			<view class="text">图片翻译</view>
		</view>
		<view class="btnText">上传/拍照</view>
		<u-picker :show="fromShow" :columns="fromRange" keyName="label" :closeOnClickOverlay="true"
			@confirm="changeFrom" @cancel="fromShow = false" @close="fromShow = false"></u-picker>
		<u-picker :show="toShow" :columns="toRange" keyName="label" :closeOnClickOverlay="true" @confirm="changeTo"
			@cancel="toShow = false" @close="toShow = false"></u-picker>
	</view>
</template>

<script>
	import UPicker from '@/uni_modules/uview-ui/components/u-picker/u-picker.vue'
	import ZeroMarkdownView from "@/subPageC/components/zero-markdown-view/components/zero-markdown-view/zero-markdown-view.vue"
	export default {
		components: {
			UPicker,
			ZeroMarkdownView
		},
		data() {
			return {
				//公共路径
				rootPath: this.$config.ROOTPATH,
				imageSrc: "",
				imageTitle: "",
				search_result: [],
				ActiveText: "",
				resultText: "",
				exchange: false,
				fromShow: false,
				toShow: false,
				ActiveFrom: {
					id: 0,
					value: 'auto',
					label: "自动识别"
				},
				fromRange: [
					[{
							id: 0,
							value: 'auto',
							label: "自动识别"
						},
						{
							id: 1,
							value: 'zh',
							label: "中文"
						},
						{
							id: 2,
							value: 'en',
							label: "英语"
						}, {
							id: 3,
							value: 'jp',
							label: "日语"
						}, {
							id: 4,
							value: 'kor',
							label: "韩语"
						}, {
							id: 5,
							value: 'fra',
							label: "法语"
						}, {
							id: 6,
							value: 'spa',
							label: "西班牙语"
						}, {
							id: 7,
							value: 'ara',
							label: "阿拉伯语"
						}, {
							id: 8,
							value: 'de',
							label: "德语"
						}
					]
				],
				ActiveTo: {
					id: 1,
					value: 'zh',
					label: "中文"
				},
				toRange: [
					[{
							id: 1,
							value: 'zh',
							label: "中文"
						},
						{
							id: 2,
							value: 'en',
							label: "英语"
						}, {
							id: 3,
							value: 'jp',
							label: "日语"
						}, {
							id: 4,
							value: 'kor',
							label: "韩语"
						}, {
							id: 5,
							value: 'fra',
							label: "法语"
						}, {
							id: 6,
							value: 'spa',
							label: "西班牙语"
						}, {
							id: 7,
							value: 'ara',
							label: "阿拉伯语"
						}, {
							id: 8,
							value: 'de',
							label: "德语"
						}
					]
				],
			}
		},
		onLoad() {},
		methods: {
			chooseImage() {
				let $this = this
				this.ActiveText = ""
				this.resultText = ""
				uni.chooseMedia({
					count: 1,
					sizeType: ['compressed'],
					mediaType: ['image'],
					sourceType: ['camera', 'album'],
					success: (res) => {
						$this.imageSrc = res.tempFiles[0].tempFilePath
						uni.showLoading({
							title: '识别中...'
						})
						this.task = uni.uploadFile({
							url: this.rootPath + '/app-api/wechatshop/toolIdentify/identifyText',
							filePath: $this.imageSrc,
							name: 'file',
							formData: {
								'file': $this.imageSrc
							},
							success: (res) => {
								let data = JSON.parse(res.data)
								console.log('====', data)
								uni.showToast({
									title: '识别成功',
									icon: 'success',
									duration: 1000
								})
								if (data.data !== null) {
									data.data.forEach((item) => {
										this.ActiveText = this.ActiveText + item.words +
											'\n'
									})
								} else {
									this.ActiveText = ""
								}
								$this.gotoTranslate()
							},
							fail: (err) => {
								uni.showModal({
									content: err.errMsg,
									showCancel: false
								});
							},
							complete: (res) => {
								uni.hideLoading();
								this.task = null
							}
						});
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
					}
				})
			},
			//选择翻译语种 from
			changeFrom(val) {
				this.fromShow = false
				this.ActiveFrom = val.value[0]
				this.gotoTranslate()
			},
			//选择翻译语种 to
			changeTo(val) {
				this.toShow = false
				this.ActiveTo = val.value[0]
				this.gotoTranslate()
			},
			//翻译
			gotoTranslate() {
				if (this.ActiveFrom.value == this.ActiveTo.value) {
					this.resultText = this.ActiveText
				} else {
					let queryParams
					if (!this.exchange) {
						queryParams = {
							query: this.ActiveText,
							from: this.ActiveFrom.value,
							to: this.ActiveTo.value
						}
					} else {
						queryParams = {
							query: this.ActiveText,
							from: this.ActiveTo.value,
							to: this.ActiveFrom.value,
						}
					}
					this.$Request.post(this.$config.getTtranslate, queryParams, "json", "", false, true)
						.then(res => {
							console.log("==============", res)
							if (res.code == -1) {
								uni.showToast({
									title: '翻译失败,请重试！',
									icon: '',
									duration: 2000
								})
							} else {
								this.resultText = ""
								res.data.forEach((item) => {
									this.resultText = this.resultText + item.dst + '</br>'
								})
								this.resultText = this.resultText.replaceAll('\n', '</br>');
							}
						})
				}
			},
		}
	}
</script>

<style lang="scss">
	.v-pages-translate {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		overflow: hidden;
	}

	.uni-easyinput__placeholder-class {
		font-size: 32rpx;
	}

	.uni-easyinput__content-textarea {
		min-height: 300rpx !important;
		overflow: auto;
	}

	.v-translate-bg {
		position: fixed;
		width: 100vw;
		height: 15vh;
		top: 0;
		left: 0;


		&:after {
			content: '';
			width: 160%;
			height: 100%;
			position: absolute;
			left: -30%;
			top: 0;
			z-index: 0;
			background: linear-gradient(to bottom, #0983ff 50%, rgba(#0983ff, .8));
			border-radius: 0 0 50% 50%;
		}
	}

	.v-pages-translate {
		.v-translate-textarea {
			border: 0;
		}

		::v-deep .uni-textarea-textarea {
			font-weight: bold;
		}

		.exchange {
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0);

			.img {
				width: 40rpx;
			}
		}

		.v-translate-card {
			position: relative;
			z-index: 9;
			background-color: #fff;
			border-radius: 10rpx;
			padding-bottom: 30rpx;


			.select {
				position: relative;
				height: 80rpx;
				border-bottom: 1rpx solid #f5f5f5;

				.select-item {
					width: 40vw;
					box-sizing: border-box;
					padding: 0 24rpx;
					position: absolute;

					.img {
						width: 20rpx;
					}

				}
			}

			.left-to-right {
				left: 0
			}

			.right-to-left {
				left: 54vw
			}

		}

		.result {
			border-top: 1rpx solid #f0f0f0;
			color: #0983ff;
			font-weight: bold;
			max-height: 40vh;
			overflow-y: auto;

			.zero-markdown-view {
				font-size: 32rpx;
				color: #0983ff;
			}

			rich-text {
				font-size: 32rpx !important;
			}
		}

		.btn {

			height: 200rpx;
			width: 200rpx;
			border-radius: 200rpx;
			line-height: 80rpx;
			text-align: center;
			margin: 80rpx auto 0 auto;
			color: #fff;
			background-color: #0983ff;

			.img {
				width: 40%;
				margin-top: 40rpx;
			}

			.text {
				margin-top: -50rpx;
				font-size: 28rpx;
			}
		}

		.btn-text {
			position: relative;
			width: 50rpx;
			margin: 0 auto -25rpx auto;
			height: 50rpx;
			border-radius: 50rpx;
			background-color: #cee6ff;
			text-align: center;
			line-height: 50rpx;
			font-size: 24rpx;
			color: #0983ff;
		}

		.btnText {
			margin-top: 10rpx;
			text-align: center;
			font-size: 28rpx;
			color: #999;
		}
	}

	.v-translate-box {
		margin-top: 40rpx;
	}
</style>