<template>
	<div class="page-cont">
		<div class="upload-wrap-header">
			<div class="upload-info">
				<img :src="user.Membership_Headimage" alt="">
				<div>
					<p>{{user.Membership_Name}}</p>
					<p class="fs12">巡查人员</p>
				</div>
			</div>
		</div>
		<!-- <div class="upload-h2">请在下方填写你的巡查内容</div> -->
		<div class=" upload-h2">
			<div class="uni-flex ai-top">
				<image src="/static/images/publicity/dingwei.png" mode="aspectFit" class="img-address"></image>
				<div>
					<p class="xuncha address">{{work_address}}</p>
					<div><span>巡查时间：</span><span>{{now_time}}</span></div>
				</div>
			</div>

		</div>
		<div class="form_box_bg">
			<ul>

				<li :class="{'active':inputfocus}">
					<span class="circle circle-first" ></span>
					<div class="li_right_top">
						<div class="li_title">
							<i class="img-zds"></i>
							<div class="xuncha" style="display: flex;"><i style="color: red;margin-right: 5px;">*</i>巡查内容</div>
						</div>
						<div class="list-content">
							<textarea auto-height v-model="uploadResult" placeholder="请输入巡查内容" focus="true" @focus="inputfocus=true" @blur="inputfocus = false"></textarea>
						</div>
						<div class="tag-list" v-for="(tags,i) in tagList" :key="i">
							<div class="tag-name">{{tags.FIELDENUM_NAME}}</div>
							<div class="tags-box">
								<div class="tag-unit" v-for="(tag,s) in tags.fieldenumList" :key="s" @tap="selectTag(tag)" :class="{'active':tag.ischecked}">{{tag.FIELDENUM_NAME}}</div>
							</div>
						</div>

					</div>
				</li>
				<li :class="{'active':imgfocus}">
					<span class="circle"></span>
					<div class="li_right_top">
						<div class="li_title">
							<i class="img-upload"></i>
							<div style="display: flex;" class="xuncha"><i style="color: red;margin-right: 5px;">*</i>请上传现场图片</div>
						</div>
						<div class="upload-file-container">
							<div class="upload-file-list" v-for="(item,index) in imgsList" :key="index">
								<span class="upload-file-remove" @click.stop="deleteImgFunc(item,index)">×</span>
								<image :src="item" @tap="showImg2(index)" mode='aspectFill' />
							</div>
							<div class="upload-file-add" @click="submitImg">
								<div class="upload-file-add-container">
									<span class="walk-manage-plus">+</span>

								</div>
							</div>
						</div>
					</div>
				</li>
				<li :class="{'active':radiofocus}">
					<span class="circle circle-last"></span>
					<div class="li_right_top">
						<radio-group @change="radioChange" style="display: flex;" @click="radioFocus" @blur="radiofocus=false">
							<label class="uni-list-cell " v-for="(item, index) in options" :key="item.value">
								<view>
									<radio :value="item.value" color='#409eff' :checked="index === current" style="transform:scale(0.8);"/>
								</view>
								<view>{{item.name}}</view>
							</label>
						</radio-group>
					</div>
				</li>

			</ul>

		</div>
			<div v-show="current==1">
				<div class="resolve-box">
					<div class="uni-flex">处理人<i style="color: red;margin-right: 5px;">*</i></div>
					<picker mode="selector" @change="pickerChange" :value="pickerIndex" range-key="Membership_Name" :range="dealerList" class="resolve-person">
						<view>{{pickerIndex==-1 ? '请选择': dealerList[pickerIndex].Membership_Name}}</view>
					</picker>
				</div>

			</div>

			<button class="btn" @click="submitUpload">提交</button>
	</div>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default {
		data() {
			let nowTime = this.$util.cutDate(new Date(), 'hh:mm:ss')
			return {
				inputfocus: true,
				imgfocus: false,
				loadingType: 1,
				radiofocus: true,
				work_address: '',
				uploadResult: '',
				now_time: nowTime,
				imgData: [],
				imgsList: [],
				value: '0',
				current: 0,
				mbwaId: '', // 3748,2781,西区接待室
				options: [{
						name: '情况正常',
						value: '0'
					},
					{
						name: '急需处理',
						value: '2'
					}
				],
				pickerIndex: -1,
				dealerList:[], // 待处理人可选列表
				tagList: [] ,// 巡查可选标签
				selectTags:[] // 选中的标签集合
			}
		},
		computed:{
			...mapGetters({
				'user':'getUser'
			})
		},
		methods: {
			radioFocus () {
				this.radiofocus=true
				this.imgfocus=false
			},
			showImg2(index) {
				uni.previewImage(this.imgsList, {
					current: index,
					loop: true,
					indicator: 'number'
				});
			},
			pickerChange(e){
				this.pickerIndex = e.detail.value
			},
			submitUpload(){
				let _this = this
				this.radiofocus = false
				this.imgfocus = false
				let index= this.pickerIndex
				if(this.uploadResult == ''){
						uni.showToast({
						icon: 'none',
						title: '请输入巡查内容！'
					})
					return false
				}
				if(_this.imgData.length === 0){
					uni.showToast({
						icon: 'none',
						title: '请上传现场图片。'
					})
					return false
				}
				if(this.current==1 && index==-1) {
					uni.showToast({
						icon: 'none',
						title: '请选择处理人员。'
					})
					return false
				}
				uni.showLoading({
					title: '提交中，请稍后'
				})
				let address = _this.mbwaId.split(',')
				let province = address[address.length-1]
				let postMsg = {
					MBWA_ADDRESS: _this.mbwaId,
					MBWA_CONTENT: _this.uploadResult,
					ImageArr: _this.imgData.toString(),
					PROCESSMODE: _this.value,
					enumLabel: _this.selectTags.toString()
				}
				if(this.current==1 && index!==-1) {

					postMsg = {...postMsg,
						DEALER_ID: this.dealerList[index].Membership_Id,
						DEALER_NAME: this.dealerList[index].Membership_Name,
						DEALER_STAFFID: this.dealerList[index].Staff_Id
					}
				}
				_this.$request.$webPost( '/WeChat/MBWA/AddMBWA',postMsg).then(res =>{
					uni.hideLoading()
					if(res.Result_Code==100){
						uni.showToast({
							icon: 'none',
							title: '提交成功',
							success() {
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									});
								}, 500)
							}
						})
					}else{
						uni.showToast({
							icon: 'none',
							title: res.Result_Desc
						})
					}
				})
			},
			submitImg(e) {
				this.imgfocus = true
				let _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择
					success: function(res) {

						let imageSrc = res.tempFilePaths[0]
						uni.showLoading()
						uni.uploadFile({
							url: 'https://eshangtech.com:18999/Coop.Merchant/Handler/handler_ajax.ashx?action_type=UploadFile&folder=MBWA',
							filePath: imageSrc,
							fileType: 'image',
							name: 'data',
							success: (res) => {
								let _data = JSON.parse(res.data)

								uni.hideLoading()
								_this.imgsList.push(imageSrc)
								_this.imgData.push(_data.Data.IMAGE_PATH)

							},
							fail: (err) => {
								// console.log('uploadImage fail', err);
								uni.showModal({
									content: err.errMsg,
									showCancel: false
								});
							}
						});
					}
				});
			},
			deleteImgFunc(item, index) {
				let _this = this
				_this.$request.$post('DelFile',{

					fileUrl: _this.imgData[index]
				}).then(res => {
					_this.imgData.splice(index, 1)
					_this.imgsList.splice(index, 1)
					uni.showToast({
						title: res.data,
						icon: 'none',
						duration: 2000
					})
					})
			},
			radioChange(evt) {
				this.value = evt.target.value
				for (let i = 0; i < this.options.length; i++) {
					if (this.options[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}
			},
			getDealerList (sid,pcode) {
				let _this = this
				uni.showLoading()
				_this.$request.$webGet('/WeChat/MBWA/GetDealerList',{

					PROVINCE_CODE: pcode,
					SERVERPART_ID: sid
				}).then(rs => {
					uni.hideLoading()
					_this.dealerList = rs.Result_Data.List

				})
			},
			getTag() {
				let _this = this
				_this.$request.$get( 'GetEnumLable',{

					fieldexplainField: 'BUSINESS_TARGET',
					fieldenumIndex:3000
				}).then(res=>{

					_this.tagList = res.Data.List
				})
			},
			selectTag(tag) {
				let index = this.selectTags.indexOf(tag.FIELDENUM_VALUE)
				if (index !== -1) {
					this.selectTags.splice(index, 1)
				} else {
					this.selectTags.push(tag.FIELDENUM_VALUE)
				}

				tag.ischecked = tag.ischecked!=undefined ?!tag.ischecked : true
				this.$forceUpdate()
			},
		},
		onUnload() {
			this.$util.addUserBehaviorNew()
		},
		onLoad(option) {
			// 1,-39,测试,500000
			this.mbwaId = option.mbwaID
			let key = option.mbwaID.trim().split(',')

			if(key.length){
				this.work_address= key[2]
				this.getDealerList( key[0],key[key.length-1])
				this.getTag()
			}

		}
	}
</script>

<style scoped>
	.page-cont {
		min-height: 100%;
		background-color: #fff;
		padding-bottom: 40rpx;
	}
	.fs12 {
		font-size: 24rpx;
	}
	.upload-wrap-header {
		height: 120rpx;
		width: 100%;
		background-color: rgb(246, 246, 246);
		box-shadow: rgb(214, 207, 207) 4rpx 0px 20rpx;
		background: url('../../static/images/mbwa/bj_logo.png') no-repeat bottom right;
		background-size: 34%;
		padding-left: 30rpx;
		box-sizing: border-box;
	}

	.upload-info {
		display: flex;
		align-items: center;
	}

	.upload-info img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-top: 10rpx;
		margin-right: 20rpx;
	}

	.upload-h2 {
		color: #727272;

		padding: 30rpx;
	}
	.upload-h2  span {
		font-size: 24rpx;
	}
	.form_box_bg:before {
		position: absolute;
		left: 9rpx;
		top: 24rpx;
		content: ' ';
		display: block;
		height: 96%;
		background-color: #eee;
		width: 1rpx;

	}
	.form_box_bg {
		position: relative;
		margin-left: 24rpx;
		box-sizing: border-box;
	}
	.form_box_bg li {
		width: 100%;
		position: relative;
		margin-top: 16rpx;
	}

	.circle {
		background-color: #b2b2b2;
		height: 16rpx;
		width: 16rpx;
		border-radius: 50%;
		position: absolute;
		top: 16rpx;
		left: 1rpx;
	}
	.circle-first{
		top: 14rpx;
	}
	.circle-last{
		top: 46rpx;
	}

	.img-address {
		display: inline-block;
		width: 49rpx;
		height: 48rpx;
		border-radius: 10rpx;
		/* background: url("../../static/images/publicity/dingwei.png") no-repeat center;
		background-size: contain; */
		margin-right: 6rpx;
	}

	.img-zds {
		display: inline-block;
		width: 32rpx;
		height: 32rpx;
		background: url("../../static/images/mbwa/content_img_gray.png") no-repeat center;
		background-size: contain;
		margin-right: 6rpx;
	}

	.img-upload {
		display: inline-block;
		width: 32rpx;
		height: 32rpx;
		background: url("../../static/images/mbwa/pic_img_gray.png") no-repeat center;
		background-size: contain;
		margin-right: 6rpx;
	}

	.li_right_top {
		margin-left: 40rpx;
	}
	.li_title {
		display: flex;
		align-items: center;
	}
	.li_right_bottom , .list-content{
		color: #939393;
		font-size: 24rpx;

		padding-bottom: 40rpx;
	}
	.list-content textarea {
		min-height: 50rpx;
		line-height: 1.5;
	}
	.tag-list {
		display: flex;
		font-size: 24rpx;
		color: #606266;
		width: 100%;
	}
	.tag-list + .tag-list {
		margin-top: 8rpx;
	}
	.tag-list .tag-name {
		margin-right: 16rpx;
		font-size: 22rpx;
		line-height: 2.9;
	}
	.tag-list .tags-box {
		width: 546rpx;
		padding: 0 24rpx 0 12rpx;
	/* 	overflow: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch; */
	}
	.tag-list .tags-box .tag-unit {
		padding: 4rpx 16rpx;
		background-color: #F4F4F4;
		color: #606266;
		border-radius: 24rpx;
		margin: 8rpx;
		font-size: 22rpx;
		display: inline-block;
		vertical-align: middle;
	}
	.tag-list .tags-box .tag-unit.active {
		color: #ED7043;
		background-color: #FDF1EC;
	}
	.list-content textarea {
		border-bottom: 1rpx solid #eee;
		margin-top: 20rpx;
		color: #727272;
		font-size: 24rpx;
		line-height: 1.8;
	}
	.upload-file-container {
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
		padding: 20rpx 0;
		/* padding-left: 54rpx; */
		min-height: 160rpx;
		box-sizing: border-box;
	}

	.upload-file-add {
		width: 26%;
		box-sizing: border-box;
	}

	.upload-file-add-container {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		border: 1rpx dashed #c6c6c6;
		height: 160rpx;
		width: 160rpx;
		margin-top: 15rpx;
		border-radius: 6rpx;
		margin-left: 12rpx;
	}

	.walk-manage-plus {
		line-height: 60rpx;
		width: 62rpx;
		height: 62rpx;
		text-align: center;
		border-radius: 50%;
		background-color: #409eff;
		color: #ffffff;
		font-size: 48rpx;
		box-shadow: 0 2rpx 6rpx 0 #eee;
	}

	.upload-file-add-img {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #919191;
	}

	.upload-file-list {
		position: relative;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		background-color: #f1f1f1;
		box-sizing: border-box;
		width: 160rpx;
		height: 160rpx;
		border-radius: 6rpx;
		margin-top: 16rpx;
	}
	.upload-file-list:nth-child(3n-1) {
		margin-left: 16rpx;
		margin-right: 16rpx;

	}
	.upload-file-list image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 6rpx;
	}
	.upload-file-remove {
		position: absolute;
		top: -14rpx;
		right: -12rpx;
		display: inline-block;
		width: 30rpx;
		height: 30rpx;
		line-height: 26rpx;
		background-color: #f56c6c;
		color: #ffffff;
		font-size: 30rpx;
		border-radius: 50%;
		text-align: center;
		z-index: 1;
	}

	uni-radio-group {
		display: flex;
	}
	.uni-list-cell {
		justify-content: unset;
		margin-top: 28rpx;
	}

	.uni-list-cell:after{
		background-color: #F9F9F9;
	}

	.btn{
		width: 80%;
		margin: 0 auto;
		margin-top: 50rpx;
		background-color:#409eff;
		border-radius: 10rpx;
		color: #fff;
		font-size: 28rpx;
		line-height: 2.8;
		margin-top: 96rpx;
	}
	.active .circle {
		background-color: #409eff;
	}
	.active .img-zds {
		background-image: url("../../static/images/mbwa/zdsgl_sm_nr.png");
	}
	.active .img-upload {
		background-image: url("../../static/images/mbwa/zdsgl_sm_pic.png");
	}
	.xuncha {
		font-size: 26rpx;
		color: #7A7A7A;
	}
	.address {
		color: #1B1C20;
	}
	.active .xuncha {
		color: #409eff;
	}
	.resolve-box {
		width: 656rpx;
		height: 82rpx;
		background: #ffffff;
		border-radius: 12rpx;
		box-shadow: 0px 0rpx 4rpx 0px rgba(166,166,166,0.60);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 24rpx;
		box-sizing: border-box;
		margin-left: 72rpx;
		margin-top: 40rpx;
	}
	.resolve-box .resolve-person {
		padding-right: 16upx;
		text-align: right;
		padding-right: 72upx;
		position: relative;
	}
	.resolve-box .resolve-person:after{
		font-family: uniicons;
		content: '\E583';
		position: absolute;
		right: 12px;
		top: 50%;
		color: #333;
		transform: translateY(-50%);
	}
</style>
