<template>
	<view class="back-body">
		<view class="back-content">
			<view class="wrap">
				<u-upload :custom-btn="true" :multiple="false" :show-progress="false" ref="uUpload" :action="action"> 
					<view v-if="lists.length<5" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<u-icon name="plus" size="60" color="#c0c4cc"></u-icon>
						<view>选择图片</view>
					</view>
				</u-upload> 
			</view>
			<u-form class="form-content" :model="form" ref="uForm" label-width="180">
				<u-form-item required label="门店" prop="storeName">
					<u-input @click="chooseStore" input-align="right" v-model="form.storeName" disabled placeholder="请选择门店" />
					<u-icon @click="chooseStore" name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon>
				</u-form-item>
				<u-form-item label="考评指标" prop="clsName">
					<u-input @click="chooseClsName" input-align="right" v-model="form.clsName" disabled placeholder="请选择考评指标" />
					<u-icon @click="chooseClsName" name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon>
				</u-form-item>
				<u-form-item label="抄送人" prop="receiveUser"> 
					<u-input @click="chooseUser" input-align="right" v-model="form.receiveUser" disabled placeholder="请选择抄送人" />
					<u-icon @click="chooseUser" name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon>
				</u-form-item>
				<u-form-item required label="整改到期日" prop="effectiveEndTime" >
					<u-input @click="showPicker=true" input-align="right" v-model="form.effectiveEndTime" disabled placeholder="请选择整改到期日" />
					<u-icon name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon>
				</u-form-item>
			</u-form>
			<view class="remarks">
				<u-input v-model="remarks" maxlength="500" type="textarea" placeholder="请输入备注(最多500字符)..." />
			</view>
		</view>
		<u-button @click="handleSave" :loading="loading" class="save-btn" :style="{background: $config('buttonColors')}" type="primary">保存</u-button>
		<!-- 时间选择器 -->
		<w-picker
		class="date-picker"
			:visible.sync="showPicker" 
			mode="date" 
			:current="true"
			fields="day"
			:value="form.effectiveEndTime"
			@confirm="onSelected($event,'date')"
			@cancel="showPicker=false"
			ref="date" 
		></w-picker>
	</view>
</template>

<script>
	import {saveBackLog} from '@/api/backLog.js'
	export default {
		components: {
		},
		data() {
			return {
				action: getApp().globalData.baseUrl + 'upload', //自行修改各自的对应的接口, // 图片上传后端地址
				showUploadList: false, 
				// 如果将某个ref的组件实例赋值给data中的变量，在小程序中会因为循环引用而报错
				// 这里直接获取内部的lists变量即可
				lists: [],
				showPicker: false, // 是否显示时间弹窗
				form: {
					storeName: '', // 门店
					storeId: '', // 门店id
					clsName: '',// 考评指标
					receiveUser: '', // 抄送人
					effectiveEndTime: '' // 整改到期日
				},
				storeSelected : [], // 已选门店
				userSelected : [], // 已选用户
				evaItemSelected : null, // 已选指标
				remarks: '', // 备注
				loading: false  // 保存按钮loading
			}
		},
		// 只有onReady生命周期才能调用refs操作组件
		onReady() {
			// 得到整个组件对象，内部图片列表变量为"lists"
			this.lists = this.$refs.uUpload.lists;
		},
		onLoad(option) {
			uni.$on('selKpStores',this.setStore)
			uni.$on('selKpUsers',this.setUser)
			uni.$on('selKpItem',this.setEvaItem)
		}, 
		onUnload() {
			uni.$off('selKpStores', this.setStore)
			uni.$off('selKpUsers', this.setUser)
			uni.$off('selKpItem', this.setEvaItem)
		},
		methods: { 
			// 获取选择门店
			setStore (data) {
				this.storeSelected = data
				this.form.storeName = this.storeSelected[0].name
				this.form.storeId = this.storeSelected[0].id
			},
			// 确认日期选择
			onSelected (v) {
				let nowTime = new Date().getTime()  // 当前时间戳
				let nowDate = this.$u.date(nowTime,'yyyy-mm-dd') // 当前日期
				if (nowTime > new Date(v.value).getTime() && nowDate!=v.value) {
					return this.toashMsg('所选日期小于当前日期，请重新选择！')
				}
				this.form.effectiveEndTime = v.value
				this.showPicker = false
			},
			// 选择门店
			chooseStore () {
				uni.navigateTo({
					url: `/pages/spotCheckConfigure/evaluateStore?type=${'radio'}&item=${encodeURIComponent(JSON.stringify(this.storeSelected))}`
				})
			},
			// 选择考评指标
			chooseClsName () {
				uni.navigateTo({
					url: '/pages/toDoList/chooseEvaluateItem?item='+encodeURIComponent(JSON.stringify(this.evaItemSelected))
				})
			},
			// 获取选择的指标
			setEvaItem (data) {
				console.log(data,'eeeeeeee')
				this.evaItemSelected = data
				this.form.clsName = data.name
				console.log(data.name,this.form.clsName,'222222')
			},
			// 选择抄送人
			chooseUser () {
				uni.navigateTo({
					url: `/pages/toDoList/chooseReceiveUser?type=${'checkbox'}&item=${encodeURIComponent(JSON.stringify(this.userSelected))}`
				})
			},
			// 获取选择的抄送人
			setUser (data) {
				// console.log(data,'eeeeeeee')
				this.userSelected = data
				let name = ''
				if (data.length) {
					data.map((item,index) =>{
						name = (name?(name + ',') : '') + item.name 
					})
				}
				this.form.receiveUser = name
			},
			// 保存提交
			handleSave () {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (!this.form.storeName) {
							return this.toashMsg('请选择门店！')
						} else if (!this.form.effectiveEndTime) {
							return this.toashMsg('请选择整改到期日！') 
						}
						const copyUserList = []
						this.userSelected.map(item =>{
							let p = {
								userId: item.id,
								userName: item.name
							}
							copyUserList.push(p)
						})
						const backlogPhotoList = []
						this.lists.map(item =>{
							let photo = {
								photoPath:item.response&&item.response.data?item.response.data:''
							}
							backlogPhotoList.push(photo)
						})
						let params = {
							"copyUserList": copyUserList,
							"backlogPhotoList": backlogPhotoList,
							"clsNo": this.evaItemSelected ? this.evaItemSelected.assessItemId : '',
							"clsName": this.evaItemSelected ? this.evaItemSelected.name : '',
							"problemDesc": this.remarks,
							"effectiveEndTime": this.form.effectiveEndTime+' 23:59:59',
							"storeId" : this.form.storeId
						}
						// console.log(params,'ppppppppp')
						this.loading = true
						uni.showLoading({
							title: '保存中，请稍后...', 
							mask: true
						})
						saveBackLog(params).then(res=>{
							this.toashMsg(res.message)
							if(res.status == 200) {
								uni.$emit('refreshBL',{msg:'页面更新'})
								uni.navigateBack()
							} 
							this.loading = false
							uni.hideLoading()
						})
						
					} else {
						console.log('验证失败');
					}
				})
			}
			
		}
	}
</script>

<style lang="scss" >
	page{
		height: 100%;
	}
	.back-body {
		height: 100%;
		background-color: #eee;
		display: flex;
		flex-direction: column;
		.back-content {
			flex: 1;
			overflow-y: scroll;
		} 
		.wrap {
			padding: 24upx;
			background-color: #fff;
			width: 100%;
		}
		
		.slot-btn {
			width: 200upx;
			height: 200upx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: rgb(244, 245, 246);
			border-radius: 10upx;
			color: #999;
			view {
				margin-top: 10upx;
			}
		}

		.slot-btn__hover {
			background-color: rgb(235, 236, 238);
		}
		.paizhao {
			background-color: #fff;
			height: 340upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.icon{
				width: 160upx;
				height: 160upx;
				border: 1px solid #eee;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.text-right {
			text-align: right;
		}
		.top-ad-swiper{
			background-color: #fff;
			height: 340upx;
		}
		.swiper-item-imgse{
			width: 750upx;
			height: 340upx;
		}
		.form-content{
			background-color: #fff;
			padding: 0 30upx;
		}
		.remarks{
			background-color: #fff;
			padding: 0 30upx;
			margin-top: 20upx;
		}
		.save-btn{
			width: 90%;
			margin-bottom: 20upx;
		}
	}
</style>
