<template>
	<view style="width: 100%;height: 100%;">
		<!-- 新 -->
		<u-select v-model="show" :list="list" @confirm=""></u-select>
		<!-- 历史 -->
		<u-select v-model="oldshow" :list="oldlist" @confirm=""></u-select>
		<!-- 医院 -->
		<u-select v-model="hospitalshow" :list="hospitalList" @confirm="confirmhospital"></u-select>
		<!-- 新增-->
		<view style="padding: 30rpx 35rpx;" class="flex justify-between" v-if="!old">
			<view style="color: #666666;" @click="show = true">
				<text style="margin-right: 20rpx;">选择排班周</text>
				<u-icon name="arrow-down" color="#666666" size="28" v-if="!show"></u-icon>
				<u-icon name="arrow-up" color="#666666" size="28" v-else></u-icon>
			</view>
			<view style="color: #666666;" @click="old = true">历史排班</view>
		</view>


		<!-- 历史 -->
		<view style="padding: 30rpx 35rpx;" class="flex justify-between" v-else>
			<view style="color: #666666;" @click="oldshow = true">
				<text style="margin-right: 20rpx;">选择历史排班周</text>
				<u-icon name="arrow-down" color="#666666" size="28" v-if="!show"></u-icon>
				<u-icon name="arrow-up" color="#666666" size="28" v-else></u-icon>
			</view>
			<view style="color: #666666;" @click="old=false">新增排班</view>
		</view>

		<!-- 标题 -->
		<view class="flex" style="background-color: #FFFFFF;">
			<!-- 时间 -->
			<view class="title" style="width: 20%;">时间</view>
			<u-line color="#cecece" direction="col" />
			<!-- 上午 -->
			<view class="title" style="width: 26%;">上午</view>
			<u-line color="#cecece" direction="col" />
			<!-- 下午 -->
			<view class="title" style="width: 26%;">下午</view>
			<u-line color="#cecece" direction="col" />
			<!-- 晚上 -->
			<view class="title" style="width: 26%;">晚上</view>
		</view>

		<!-- 表格一条内容  循环七遍-->
		<view v-for="(item,index) in hospitalWeek" :key='index'>
			<u-line color="#cecece" />
			<!-- 星期一 -->
			<view class="flex" style="background-color: #FFFFFF;">

				<view class="content" style="width: 20%;font-weight: bold;">
					<view>
						<view style="text-align: center;">{{item.value}}</view>
						<view style="text-align: center;">{{item.title}}</view>
					</view>
				</view>
				<u-line color="#cecece" direction="col" />
				<!-- 上午 -->
				<view class="content" style="width: 26%;" @click="clickMorning(index)">
					<view style="width: 80%;text-align: center;word-break:break-all">{{item.morning}}</view>
					<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
				</view>
				<u-line color="#cecece" direction="col" />
				<!-- 下午 -->
				<view class="content" style="width: 26%;" @click="clickAfternoon(index)">
					<view style="width: 80%;text-align: center;word-break:break-all">{{item.afternoon}}</view>
					<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
				</view>
				<u-line color="#cecece" direction="col" />
				<!-- 晚上 -->
				<view class="content" style="width: 26%;" @click="clicknight(index)">
					<view style="width: 80%;text-align: center;word-break:break-all">{{item.night}}</view>
					<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
				</view>
			</view>
		</view>

		<!-- 保存 -->
		<view class="bottomButton" @click="bc">
			保存
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//切换历史和新增
				old: false,
				//新增的排班选择   最多排四周
				show: false,
				list: [{
					value: '1',
					label: '2020.10.26 - 2020-11-1'
				}, {
					value: '2',
					label: '2020.11.2 - 2020-11-8'
				}, {
					value: '3',
					label: '2020.11.9 - 2020-11-15'
				}, {
					value: '4',
					label: '2020.11.16 - 2020-11-22'
				}],
				//历史的排班选择
				oldshow: false,
				oldlist: [{
					value: '1',
					label: '历史'
				}, {
					value: '2',
					label: '历史'
				}, {
					value: '3',
					label: '历史'
				}, {
					value: '4',
					label: '历史'
				}],
				//一周的数据   title不可更改  value日期   其余 上 下 晚
				hospitalWeek: [{
					title: '周一',
					value: '10-26',
					morning: '',
					afternoon: '',
					night: ''
				}, {
					title: '周二',
					value: '10-27',
					morning: '',
					afternoon: '',
					night: ''
				}, {
					title: '周三',
					value: '10-28',
					morning: '',
					afternoon: '',
					night: ''
				}, {
					title: '周四',
					value: '10-29',
					morning: '',
					afternoon: '',
					night: ''
				}, {
					title: '周五',
					value: '10-30',
					morning: '',
					afternoon: '',
					night: ''
				}, {
					title: '周六',
					value: '10-31',
					morning: '',
					afternoon: '',
					night: ''
				}, {
					title: '周日',
					value: '11-01',
					morning: '',
					afternoon: '',
					night: ''
				}],
				//选择医院
				hospital: '',
				hospitalList: [{
					value: '1',
					label: '不选择'
				}, {
					value: '2',
					label: '医院'
				}, {
					value: '3',
					label: '醫院'
				}, {
					value: '4',
					label: 'hospital'
				}],
				hospitalshow: false,
				//当前点击的位置
				position: {
					day: '',
					time: '' //1早2下3晚
				}
			}
		},
		methods: {
			// 早下晚的点击事件
			clickMorning(index) {
				this.position.day = index
				this.position.time = 1
				this.hospitalshow = true
			},
			clickAfternoon(index) {
				this.position.day = index
				this.position.time = 2
				this.hospitalshow = true
			},
			clicknight(index) {
				this.position.day = index
				this.position.time = 3
				this.hospitalshow = true
			},
			//医院选择器的确认点击事件
			confirmhospital(e) {
				console.log(e[0].label)
				console.log(this.hospital)
				if (this.position.time == 1) {
					this.hospitalWeek[this.position.day].morning = e[0].label
					console.log('早')
				} else if (this.position.time == 2) {
					this.hospitalWeek[this.position.day].afternoon = e[0].label
					console.log('下')
				} else if (this.position.time == 3) {
					this.hospitalWeek[this.position.day].night = e[0].label
					console.log('晚')
				}

			},


			//保存
			bc(e) {
				console.log(hospitalWeek)
			}
		}
	}
</script>

<style>
	page {
		background-color: #f0f0f0
	}

	.title {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0;
		font-weight: bold;
	}

	.content {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0;

	}

	/* 底部按钮 */
	.bottomButton {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #0000ff;
		color: #FFFFFF;
		z-index: 1;

	}
</style>
