<template>
	<view>
		<u--form labelPosition="top" :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;" @click="getCurrentNmae(item.prop)">
					<van-uploader :after-read="afterRead" :deletable="false" accept="all">
						<u-button class="btn" type="primary"
							style="height: auto;padding: 10rpx 20rpx;">
							<text class="btnText" style="font-size: 18rpx;">
								{{$t('components.form.choose')}}
							</text>
						</u-button>
					</van-uploader>

					<view class="fileList">
						<view v-for="(i,j) in vmodel[item.prop]" :key="j" @click="getCurrentNmae(item.prop)">
							<view @click="deletePic(i,j)" style="display: flex;align-items: center;margin-top: 20rpx;">
								<u--image mode="aspectFit" v-if="i.type.includes('image')"
									:src="require('@/static/image.png')" width="36rpx" height="28rpx"></u--image>
								<u--image mode="aspectFit" v-else-if="i.type.includes('video')"
									:src="require('@/static/video.png')" width="36rpx" height="28rpx"></u--image>
								<u--image mode="aspectFit" v-else :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>{{i.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 style="display: flex;align-items: center;margin-top: 10rpx;">
								<u-line-progress :percentage="i.percent" :showText="false"
									activeColor="rgb(60, 156, 255)"></u-line-progress>
								<text>{{i.percent}}%</text>
							</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.name" :value="i.issueType">
						</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>
		<view class="btngroup">
			<u-button class="btn" type="primary" @click="submit">
				<!-- <text class="btnText"> -->
				{{$t('index.btn.a1')}}
				<!-- </text> -->
			</u-button>
			<u-button class="btn" :text="$t('index.btn.a2')" @click="$emit('search')"></u-button>
			<u-button class="btn" :text="$t('index.btn.a3')" @click="go"></u-button>
			<u-button class="btn" :text="BackToACHA" @click="goToTC"></u-button>
		</view>
		<!-- <propmtVue :title="$t('index.form.ruleMes')" v-if="propShow"></propmtVue> -->
	</view>
</template>

<script>
	// import ObsClient from "esdk-obs-browserjs"
	// import propmtVue from "@/components/propmt.vue"
	import {
		submitIssue
	} from "@/api/issue.js"
	import {
		getSetting
	} from "@/api/setting.js"
	import {
		upload,
		OBS,
		obsJiami,
		initObs
	} from "@/api/upload.js"
	import obsClient from "esdk-obs-browserjs"
	export default {
		name: "hlForm",
		props: ['form', 'name', 'issueType', "currentItem"],
		// components:{
		// 	propmtVue
		// },
		data() {
			return {
				// propShow:false,
				BackToACHA: "Back To ACHA",
				labelStyle: {
					"font-family": "Arial",
					"font-weight": 400,
					"font-size": "30rpx",
					"color": "white",
					"line-height": "36rpx"
				},
				rules: {},
				vmodel: {},
				hlformShow: false,
				actions: [],
				title: "",
				description: "",
				// fileList1: [],
				three: "",
				TC: "",
				// 当前选中字段
				currentName: "",
				OBS: null,
				param: null
			};
		},
		methods: {
			getCurrentNmae(e) {
				this.currentName = e
				console.log(this.currentName)
			},
			deletePic(item, index) {
				if (item.status == 'upload')
					return
				this.vmodel[this.currentName].splice(index, 1)
			},
			goToTC() {
				// #ifdef H5
				window.open(this.TC, '_self')
				// #endif
			},
			go() {
				// #ifdef H5
				window.open(this.three, '_self')
				// #endif
			},
			getFilepath(e) {
				let date = new Date().toLocaleDateString().split('/')
				if (date[1] < 10) {
					date[1] = '0' + date[1]
				}
				if (date[2] < 10) {
					date[2] = '0' + date[2]
				}
				date = date.join('')
				return date  + '/' + new Date().getTime() + Math.round(Math.random() * 1000) + e
			},
			afterRead(file) {
				let fileObj = file.file
				fileObj.status = 'upload'
				fileObj.percent = 0
				this.vmodel[this.currentName].push(fileObj)
				if (fileObj.size > 50 * 1024 * 1024) {
					uni.showToast({
						title: "The file is too large",
						image: require("@/static/fail.png"),
					})
					return
				}
				if (this.vmodel[this.currentName].length >= 6) {
					uni.showToast({
						title: "Too many files",
						image: require("@/static/fail.png"),
					})
					return
				}
				// upload(fileObj,(e)=>{
				// 	fileObj.percent = e.progress
				// }).then(r => {
				// 	fileObj.status = 'success'
				// 	fileObj.url = r
				// }).catch(e=>{
				// 	fileObj.status = 'error'
				// })
				// return
				let obs = this.OBS

				const metaData = {
					'content-type': file.file.type,
					'content-length': file.file.size
				}
				let filepath = this.getFilepath(fileObj.name)
				let t = this;
				obsJiami(fileObj).then(r => {
					obs.putObject({
						Bucket: this.param.bucketName,
						Key: filepath,
						Body: r,
						Metadata: metaData,
						ProgressCallback: function(e, i) {
							fileObj.percent = Math.floor(e / i * 100)
							t.$forceUpdate()
						}
					}, (err, result) => {
						if (err) {
							fileObj.status = 'failed';
							uni.showToast({
								title: "upload failed",
								image: require("@/static/fail.png"),
							})
						} else {
							let url = this.param.domain + '/' + filepath
							fileObj.status = 'success'
							fileObj.url = url
						}
					});
				})
			},
			select(e) {
				let re;
				for (let i in this.form[0].actions) {
					if (this.form[0].actions[i].issueType == e)
						re = this.form[0].actions[i]
				}
				console.log(re)
				console.log('-------+++++')
				this.actionSheet(this.form[0])
				this.$emit('select', re)
			},
			actionSheet(e) {
				if (!e.actions)
					return
				this.hlformShow = !this.hlformShow
				this.$emit('actionSheet', e)
				// this.actions = e.actions
				this.title = e.title
				this.description = e.description
			},
			submit() {
				let result;
				for (let i in this.form) {
					if (this.form[i].type) {
						result = this.vmodel[this.form[i].prop].find(r => {
							if (r.status != 'success') {
								uni.showToast({
									title: this.$t('index.form.ruleMes'),
									image: require("@/static/fail.png"),
									duration: 1000,
								})
								console.log('file uploading')
								return true;
							}
						})
					}
				}
				if (result) {
					return
				}
				let arr = uni.$u.deepClone(this.vmodel);
				for (let i in this.form) {
					if (this.form[i].type) {
						arr[this.form[i].prop] = arr[this.form[i].prop].map(j => {
							return j.url
						})
						arr[this.form[i].prop] = arr[this.form[i].prop].join(',')
					}
				}
				console.log(arr)
				this.$refs.uForm.validate().then(res => {
					arr['issueType'] = this.issueType
					submitIssue(arr).then(r => {
						uni.showToast({
							title: this.$t("index.success"),
							image: require("@/static/success.png"),
							duration: 1000,
						})
						this.$store.commit('setRefresh', true)
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}, 1000)
					})
				}).catch(errors => {
					console.log(errors)
					uni.showToast({
						title: this.$t('index.form.ruleMes'),
						image: require("@/static/fail.png"),
						duration: 1000,
					})
				})
			}
		},
		created() {
			if (process.uniEnv.name == 'bjst') {
				this.labelStyle.color = 'white'
				this.BackToACHA = 'Back To ACHA'
			} else {
				this.labelStyle.color = 'black'
				this.BackToACHA = 'Back To TC'
			}
			getSetting("three").then(r => {
				this.three = r
			})
			getSetting("btttc").then(r => {
				this.TC = r
			})
			for (let i in this.form) {
				this.rules[this.form[i].prop] = this.form[i].rule
				if (this.form[i].type) {
					this.$set(this.vmodel, this.form[i].prop, [])
				} else
					this.$set(this.vmodel, this.form[i].prop, '')
			}
			this.vmodel[this.currentItem.prop] = this.name
			OBS().then(r => {
				this.param = r
				this.OBS = initObs(r)
			})
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-form-item__body__left__content {
		flex-shrink: 0;
		flex-basis: auto;
		flex-grow: 1;
		margin-bottom: 5rpx;
	}

	.actionsParent {
		z-index: 10;
		border-radius: 10rpx;
		position: absolute;
		margin-top: 25rpx;
		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;
	}

	::v-deep .u-form-item__body {
		padding: 10rpx 20rpx;
	}

	// ::v-deep .u-form-item__body__right {
	// 	border: 1px solid #E6E6E6;
	// 	padding: 25rpx 20rpx;
	// }
	.btngroup {
		margin-top: 60rpx;
		padding: 0 20rpx;

		.btn {
			margin-top: 30rpx;
		}

		.btnText {
			font-family: Arial;
			font-weight: 400;
			font-size: 24rpx !important;
		}
	}

	.fileList {
		font-family: Arial;
		font-weight: 400;
		font-size: 24rpx;
		color: white;
	}

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