<template>
	<view class="back-body">
		<view class="back-content">
			<!-- 轮播图 -->
			<swiper v-if="backlogPhotoList.length" class="top-ad-swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="600" :circular="true">
				<swiper-item v-for="(item,index) in backlogPhotoList" :key="index">
					<div class="swiper-item uni-bg-red">
						<u-image mode="scaleToFill" width="750upx" height="400upx" :src="item"></u-image>
					</div>
				</swiper-item>
			</swiper>
			<view v-else class="paizhao">
				<view class="icon" @click="takePhone">
					<u-icon name="xianchangpaishe" custom-prefix="xd-icon" size="64" color="#888888"></u-icon>
				</view>
			</view>
			<u-form class="form-content" :model="form" ref="uForm" label-width="180">
				<u-form-item label="门店" prop="storeName">
					<u-input @click="chooseStore" input-align="right" v-model="form.storeName" disabled placeholder="请选择门店" />
					<u-icon 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 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 input-align="right" v-model="form.clsName" disabled placeholder="请选择抄送人" />
					<u-icon name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon>
				</u-form-item>
				<u-form-item 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" type="textarea" placeholder="请输入备注..." />
			</view>
		</view>
		<u-button class="save-btn" 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 MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue"
	export default {
		components: {
			MxDatePicker
		},
		data() {
			return {
				// 顶部轮播图片
				backlogPhotoList:[],
				showPicker: false, // 是否显示时间弹窗
				form: {
					storeName: '', // 门店
					storeId: '', // 门店id
					clsName: '',// 考评指标
					putUser: '', // 处理人
					receiveUser: '', // 抄送人
					effectiveEndTime: '' // 整改到期日
				},
				storeSelected : [], // 已选门店
				remarks: '' // 备注
			}
		},
		onLoad(option) {
			uni.$on('selKpStores',this.setStore)
		}, 
		methods: { 
			// 获取选择门店
			setStore (data) {
				console.log(data,'eeeeeeee')
				this.storeSelected = data
				this.form.storeName = this.storeSelected[0].name
				this.form.storeId = this.storeSelected[0].id
				console.log(this.storeSelected,this.form.storeName,'2222222')
			},
			// 拍照 或从相册选相片 
			takePhone () {
				let _this = this
				uni.chooseImage({
				    count: 6, //默认9
				    success: function (res) {
				        console.log(JSON.stringify(res.tempFilePaths));
						_this.backlogPhotoList = res.tempFilePaths
				    }
				})
			},
			// 确认日期选择
			onSelected (v) {
				console.log(v,'vvvvvvvv')
				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/spotCheckConfigure/evaluateItem'
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.back-body {
		height: 100%;
		background-color: #eee;
		display: flex;
		flex-direction: column;
		.back-content {
			flex: 1;
			overflow-y: scroll;
		}
		.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>
