<template>
	<view>
		<u-popup v-model="isShow" @close="isShow = false" mode="bottom" safe-area-inset-bottom border-radius="20" >
			<view class="content flex flex_column">
				<view class="con" v-if="dataList.length>0">
					<view class="choose-list u-flex u-row-between" v-for="(item,i) in dataList" :key="item.id" @click="getChooseItem(i)">
						<view>{{item.dispName}}</view>
						<u-icon v-show="chooseFlag==i" name="checkbox-mark" color="#2979ff" size="28"></u-icon>
					</view>
				</view>
				<view class="btn u-flex">
					<view class="cancleStyle" @click="isShow = false">取消</view>
					<view class="confimStyle" :style="{background:$config('primaryColor'),color:'#fff'}" @click="submit">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getLookUpDatas } from '@/api/data';
	export default{
		props:{
			showModal:{
				type: Boolean,
				default: false
			},
			code:{
				type: String,
				default: ''
			}	
		},
		data(){
			return{
				isShow:this.showModal,
				chooseObj:null,
				chooseFlag:-1,
				dataList:[]
			}
		},
		created() {
			this.getList();
		},
		methods:{
			getList(){
				getLookUpDatas({
				  lookupCode: this.code,pageNo:1,pageSize:1000
				}).then(result => {
				  if (result && result.status + '' === '200') {
				    this.dataList = result.data.list
				  }
				})
			},
			submit(index){
				if(this.chooseFlag == -1){
					this.chooseObj = null
				}
				this.$emit('chooseItem',this.chooseObj)
				this.isShow = false
			},
			getChooseItem(index){
				if(this.chooseFlag == index){
					this.chooseFlag = -1
				}else{
					this.chooseFlag = index
				}
				this.chooseObj=this.dataList[index]
			}
		},
		watch:{
			//  父页面传过来的弹框状态
			showModal (newValue, oldValue) {
				this.isShow = newValue
			},
			//  重定义的弹框状态
			isShow (newValue, oldValue) {
				if (!newValue) {
					this.$emit('close')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		height: 100%;
		.con{
			flex-grow: 1;
			overflow: auto;
			padding:0 40rpx;
			.choose-list{
				border-bottom: 1rpx solid #efefef;
				padding:20rpx 0;
				&:last-child{
					border-bottom: 0rpx solid #efefef;
				}
			}
		}
		.btn{
			border-top: 1rpx solid #efefef;
			.cancleStyle,.confimStyle{
				width: 50%;
				text-align: center;
				height: 89rpx;
				line-height: 89rpx;
				text-align: center;
			}
			
		}
		
	}
</style>