<template>
	<view class="modal-box">
		<u-popup v-model="isShow"  @close="isShow=false" mode="right" length="85%" >
			<view class="modal-con u-flex u-flex-wrap u-row-between" :style="{height:toggle? auto:'180rpx'}">
				<view class="list" :class="selectNum==i?'selectBox':''" v-for="(item,i) in list" :key="item.id" @click="handleChoole(i)">{{item.dispName}}</view>
			</view>
			<view class="showMore" :style="{color:$config('primaryColor')}" @click="toggle=!toggle">
				<text>{{toggle?'收起':'更多选项'}}</text>
				<u-icon :name="toggle?'arrow-up':'arrow-down'" :color="$config('primaryColor')" size="28"></u-icon>
			</view>
			<view class="form-footer-btn">
				<u-button class="handle-btn" shape="circle" size="medium" hover-class="none" @click="handleClear">重置</u-button>
				<u-button class="handle-btn" shape="circle" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="handleSearch">查询</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getLookUpDatas } from '@/api/data';
	export default{
		props:{
			showModal:{
				type: Boolean,
				default: false
			}
		},
		data(){
			return{
				customBtnStyle: {  //  自定义按钮样式
					borderColor: this.$config('primaryColor'),
					backgroundColor: this.$config('primaryColor'),
					color: '#fff'
				},
				isShow:this.showModal,
				toggle:false,
				selectNum:-1,
				list:[]
			}
		},
		methods:{
			getList() {
				getLookUpDatas({
					lookupCode: 'SETTLE_STYLE',
					pageNo: 1,
					pageSize: 1000
				}).then(result => {
					if (result && result.status == 200) {
						this.list = result.data.list;
					}
				});
			},
			handleChoole(e){
				if(this.selectNum == e){
					this.selectNum = -1;
				}else{
					this.selectNum = e
				}
			},
			handleSearch(){
				if(this.selectNum != -1){
					this.$emit('refresh',this.list[this.selectNum]);
				}
				this.isShow = false
			},
			handleClear(){
				this.selectNum=-1;
				this.isShow = false
				this.$emit('refresh');
			}
		},
		watch:{
			//  父页面传过来的弹框状态
			showModal (newValue, oldValue) {
				this.isShow = newValue
			},
			//  重定义的弹框状态
			isShow (newValue, oldValue) {
				if (!newValue) {
					this.$emit('close')
				}else{
					this.getList();
				}
			}
		}
	}
</script>

<style lang="scss">
	.modal-box{
		width: 100%;
		.modal-con{
			padding:20upx;
			overflow: hidden;
			.list{
				width: 46%;
				text-align: center;
				line-height: 70rpx;
				height: 70rpx;
				border-radius: 38rpx;
				margin-bottom: 20rpx;
				background:#f0f0f0;
				font-size: 26rpx;
			}
			.selectBox{
				background:#007aff;
				color:#fff;
			}
		}
		.showMore{
			text-align: center;
			margin-top: 30rpx;
			text{
				margin-right: 10rpx;
			}
		}
		
		.form-footer-btn {
			display: flex;
			padding: 20upx;
			margin-top: 180upx;
			.handle-btn {
				font-size: 28upx;
				margin: 0 30upx;
				width: 100%;
				flex: 1;
			}
		}
	}
</style>
