<template>
	<view>
		<view class="select">
			
			<view class="select">
				<view class="cu-form-group select-hostipal">
					<picker @change="updatePickerVal($event,'mode')" range-key="diseaseDescription" :data-index="21" :data-id="modeList[form.mode].id" :value="form.mode" :range="modeList">
					   <view class="picker text-left" style="font-size: 32upx;">
							{{form.mode>-1?modeList[form.mode].diseaseDescription :'点击选择模式'}}
					   </view>
					</picker>
				</view>
				<!-- <button @click="formSubmit"  style="font-size: 32upx;" class="cu-btn confirm-btn block lg">确认进入</button> -->
			</view>
			
			<view class="cu-modal" :class="modalName=='DialogModal'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">提示消息</view>
						<view class="action" @tap="modalName = ''">
							<text class="cuIcon-close text-black"></text>
						</view>
					</view>
					<view class="padding-xl">
						是否确定进入？
					</view>
					<view class="cu-bar bg-white justify-end">
						<view class="action">
							<button class="cu-btn line-gray" @tap="modalName = ''">取消</button>
							<button class="cu-btn line-blue text-blue margin-left" @tap="hideModal">确定</button>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="selectMode">
				<button type="primary" v-for="(item,index) in modeList" class="mode margin-tb" @click="clickMode(item)" :key="index">
					{{item.diseaseDescription}}
				</button>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName:'',
				hospitalId:'',
				modeList:[],
				form:{
					mode:-1
				},
			}
		},
		onLoad: function(option) {
			this.hospitalId = option.hospitalId || this.$store.getters.userInfo.hospitalId
		},
		onShow() {
			this.getModeList()
		},
		methods: {
			// 更新下拉框绑定的表单内容
			updatePickerVal(event, props) {
				this.$set(this.form,props,event.detail.value)
				// this.modalName = 'DialogModal'
				this.clickMode(this.modeList[this.form.mode])
			},
			
			getModeList(){
				this.$http.get(`/gastric-cancer-data/template/resources/${this.hospitalId}`).then(res => {
					if(res.data.code == 1){
						this.modeList = res.data.object
						let obj = Object.assign({}, this.$store.getters.userInfo)
						obj.modeList = this.modeList
						this.$store.dispatch('user/setInfo',obj)
						if(this.modeList.length == 1){
							this.form.mode = 0
							this.formSubmit()
						}
					}
				})
			},
			
			clickMode(item){
				// this.$http.post(`/gastric-cancer-user/hospital/choose?hospitalId=${this.hospitalId}&diseaseType=${item.diseaseType}`).then(res => {
				// 	if(res.data.code == 1){
				// 		console.log(res.data)
				// 	}
				// })
				
				// let obj = Object.assign({}, this.$store.getters.userInfo)
				// obj.diseaseType = item.diseaseType
				// obj.isPrivate =  item.isPrivate
				// this.$store.dispatch('user/setInfo',obj)
				// uni.switchTab({
				// 	 url: `/pages/home/home`
				// })
			},
			hideModal(){
				this.modalName = ''
				this.formSubmit()
			},
			formSubmit(){
				if(this.form.mode>-1){
					this.clickMode(this.modeList[this.form.mode])
				}else{
					uni.showToast({
						icon: 'none',
						title: "请选择模式！"
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.select{
		height: 100vh;
		width: 100vw;
		background-repeat: no-repeat;
		background-color: #7BA1DC;
		background-size: cover;
		background-image: url('http://139.9.163.126/gastric/static/backgroundGicc.jpg');
	}
	.cu-form-group{
		background-color:#6e98d7;
		color:#FFFFFF;
		min-width: 60vw;
		max-width: 60vw;
		border-radius: 40upx;
		picker::after{
			content: "\e661";
			color:#FFFFFF;
			right:-10upx;
		}
	}
	.selectMode{
		position: absolute;
		top: 60vh;
		height: 100upx;
		left: 20vw;
		.mode{
			background-color:#6e98d7;
			color:#FFFFFF;
			min-width: 60vw;
			max-width: 60vw;
			border-radius: 40upx;
		}
	}
	.select-hostipal{
		font-size: 48px;
		position: absolute;
		bottom: 25vh;
		height: 100upx;
		left: 20vw;
	}
	.confirm-btn{
		background-color:#6e98d7;
		color:#FFFFFF;
		border-radius: 40upx;
		position: absolute;
		height: 100upx;
		text-align: center;
		min-width: 60vw;
		max-width: 60vw;
		bottom: 20vh;
		left: 20vw;
	}
	.cu-form-group picker .picker {
		text-align: center;
	}
</style>