<template>
	<view class="order view">
		<view class="status_bar" :style="navHeight"></view>
		<view class="listview">
			<view class="add-btn"  v-if="!isShow">
				<button class="mini-btn btn" type="default" size="mini" @tap="handleMy()">
					<text class="btn-text ">新增我的客户</text>
				</button>
				<text style="flex:1;"></text>
				<button class="mini-btn btn" type="default" size="mini" @tap="handleAdd()">
					<text class="btn-text">新增地址</text>
				</button>
			</view>
			<list class="cell-list" v-if="!isShow&&lists.length > 0" :show-scrollbar='false' loadmoreoffset='100'
				@loadmore="scrolltolower">
				<cell @click="handleChecked(item)" v-for="item in lists" :key='item.NUMBER'>
					<view class="cell-list-block">
						<text class="icon-address">{{item.NAME_ORG1.slice(0,1)}}</text>
						<view class="cell-list-block__content">
							<view class="list-block-item">
								<text class="list-block-item__title1">{{item.NAME_ORG1}} {{item.TEL_NUMBER}}</text>
							</view>
							<view class="list-block-item">
								<text class="list-block-item__label">单位编号</text>
								<text class="list-block-item__value">{{item.PARTNER}}</text>
							</view>
							<view class="list-block-item">
								<text class="list-block-item__label">单位名称</text>
								<text class="list-block-item__value">{{item.NAME_ORG1}}</text>
							</view>
							<view class="list-block-item">
								<image class="icon-arrow" src="@/static/image/address@3x.png" mode="aspectFit">
								</image>
								<text class="list-block-item__desc">{{item.STREET}}</text>
							</view>
						</view>
					</view>
				</cell>
				<cell>
					<view class="loading-more" v-if='lists.length>7'>
						<text class="loading-more-text">{{loadingText}}</text>
					</view>
				</cell>
			</list>
			<no-data class="no-data" v-if="!isShow&&lists.length === 0" @retry="loadMore"></no-data>
			<view class="middle view" v-if="isShow">
				<view class="text-block">
					<text class="middle-date">客户编码</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<input class="middle-date-des" type="text" v-model="address.PARTNER"
									placeholder="" disabled="true"/>
							</view>
						</view>
					</view>
				</view>
				<view class="text-block">
					<text class="middle-date">客户名称</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<input class="middle-date-des" type="text" v-model="address.NAME_LAST"
									placeholder="请输入" :disabled='isDisabled'/>
							</view>
						</view>
					</view>
				</view>
				<view class="text-block">
					<text class="middle-date">联系人</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<input class="middle-date-des" type="text" v-model="address.C_O_NAME"
									placeholder="请输入" />
							</view>
						</view>
					</view>
				</view>
				<view class="text-block">
					<text class="middle-date">电话</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<input class="middle-date-des" type="text" v-model="address.TEL_NUMBER"
									placeholder="请输入" />
							</view>
						</view>
					</view>
				</view>
				
				<view class="text-block">
					<text class="middle-date">省份</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker class="picker-block" @change="bindPickerChange($event,'provincecode')"
									range-key='BEZEI' mode="selector" :value="address.REGION_T"
									:range="provincecode">
									<text class="uni-input">{{address.REGION_T}}</text>
								</picker>
							</view>
						</view>
						<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode=""></image>
					</view>
				</view>
				<view class="text-block">
					<text class="middle-date">城市</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker class="picker-block" @change="bindPickerChange($event,'citycode')"
									range-key='CITY_NAME' mode="selector" :value="address.CITY_CODE_T"
									:range="citycode">
									<text class="uni-input">{{address.CITY_CODE_T}}</text>
								</picker>
							</view>
						</view>
						<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode=""></image>
					</view>
				</view>
				<view class="text-block">
					<text class="middle-date">区县</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker class="picker-block" @change="bindPickerChange($event,'streetCode')"
									range-key='MC_STREET' mode="selector" :value="address.STREETCODE_T"
									:range="streetCode">
									<text class="uni-input">{{address.STREETCODE_T}}</text>
								</picker>
							</view>
						</view>
						<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode=""></image>
					</view>
				</view>
				<view class="text-block text-block-last">
					<text class="middle-date">地址</text>
				</view>
				<view class="remark">
					<textarea class="remark-text" v-model="address.STREET" />
				</view>
			</view>
		</view>
		<view class="bottom" v-if="isShow">
			<button class="btn btn-l" type="default" @tap="isShow=false">
				<text class="btn-text btn-text-l">取消</text>
			</button>
			<button class="btn" type="default" @tap="confirm()">
				<text class="btn-text">确定</text>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	import {
		apiAddressSelect
	} from '@/servers/common.js'
	import {
		addressCheck,
		regionOvs,
		cityOvs,
		streetOvs,
		addressImport,
	} from '@/servers/address.js'
	
	import noData from '@/components/nodata.nvue';

	const modeMap = {
		'quotaOrder': 'QUOTA',
		'noQuotaOrder': 'NO_QUOTA',
		'groupOrder': 'GGTG',
		'groupBaseInfo': 'GGTG',
	}


	export default {
		components: {
			noData
		},
		data() {
			return {
				optionHeader: {},
				loadingText: '加载中...',
				condition: {
					'PARTNER': '',
					'NAME_ORG1': '',
					'C_O_NAME': '',
				},
				page: {
					"PAGE": "1",
					"PAGESIZE": "7",
				},
				loadParams: {
					total: 0,
					totalPage: 1,
					isDone: false,
					isRefresh: false
				},
				lists: [],
				selectedAddress: {},
				toPageParams: {
					page: '',
					head: ""
				},
				isShow: false,
				provincecode: [],
				citycode: [],
				streetCode: [],
				address: {
					"PARTNER": "",
					"NAME_LAST": "",
					"ZZFLD000016": "",
					"PARTNER_YG": "",
					"C_O_NAME": "",
					"TEL_NUMBER": "",
					"REGION": "",
					"REGION_T": "",
					"CITY_CODE": "",
					"CITY_CODE_T": "",
					"STREETCODE": "",
					"STREETCODE_T": "",
					"STREET": ""
				},
				isDisabled: false,
				addHead:{}
			}
		},
		computed: {
			navHeight() {
				return {
					'height': `${this.sysinfo.safeArea.top + 44}px`
				}
			},
			...mapState(['sysinfo', 'userInfo'])
		},
		onLoad(option) {
			console.log('select-saleplan', option)
			if (option && option.from) {
				const {
					from,
					head
				} = option
				this.toPageParams.page = from
				this.toPageParams.head = JSON.parse(head)
				this.optionHeader = { ...this.toPageParams.head }
			}
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.reset()
			this.getAddress(true)
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 600);
		},
		onBackPress(event) {
			if(this.isShow){
				uni.navigateTo({
					url: `/pages/address-manage/address-manage?from=groupBaseInfo&head=${JSON.stringify(this.optionHeader)}`
				});
				this.isShow = false
				return false
			}
		},
		created() {
			// this.condition.PARTNER = this.userInfo.code
			this.reset()
			this.getAddress(true)
		},
		methods: {
			async confirm(){
				try{
					const params = {
						HEAD:{ ...this.addHead },
						INFO:{ ...this.address },
						role: "WLY001",
					}
					const res = await addressImport(params)
					if(res.MSGTYPE === 'S'){
						uni.showToast({
							title: res.MESSAGE,
							duration: 2000,
							icon: 'none'
						});
						const item = {
							...res.DATA,
							NAME_ORG1: res.DATA.NAME_LAST
						}
						uni.$emit('selectedAddress', {
							selectedAddress: item
						})
						uni.navigateBack()
					}
				}catch(e){

				}
				console.log(this.address,this.toPageParams.head)
			},
			handleMy(){
				if(!this.toPageParams.head.GRPNAME){
					uni.showToast({
						title: '请先选择团购单位',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.isShow = true
				this.isDisabled = false
				this.GetAddressCheck('')
			},
			handleAdd(){
				if(!this.toPageParams.head.ZZFLD00008T_DSCR){
					uni.showToast({
						title: '请先选择收货单位',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.isShow = true
				this.isDisabled = true
				this.GetAddressCheck('X')
			},
			async GetAddressCheck(type){
				try{
					const params = {
						head: this.toPageParams.head,
						mode: type,
						role: "WLY001"
					}
					const res = await addressCheck(params)
					this.addHead = {...res.DATA.HEAD}
					this.address = {...res.DATA.INFO}
					const res1 = await regionOvs()
					this.provincecode = res1.DATA
				}catch(e){
					//TODO handle the exception
				}
			},
			
			bindPickerChange(e, type) {
				console.log('picker发送选择改变，携带值为', e, type)
				const index = e.detail.value
				switch (type) {
					case 'provincecode':
						this.address.REGION = this.provincecode[index].BLAND
						this.address.REGION_T = this.provincecode[index].BEZEI
						this.getCityOvs(this.address.REGION)
						break;
					case 'citycode':
						this.address.CITY_CODE = this.citycode[index].CITY_CODE
						this.address.CITY_CODE_T = this.citycode[index].CITY_NAME
						this.getStreetOvs(this.address.CITY_CODE)
						break;
					case 'streetCode':
						this.address.STREETCODE = this.streetCode[index].STRT_CODE
						this.address.STREETCODE_T = this.streetCode[index].MC_STREET
						break;
				}
			},
			async getStreetOvs(code){
				try{
					const params = {
						"CITY_CODE": code,
						'role': "WLY001"
					}
					const res = await streetOvs(params)
					this.streetCode = res.DATA
				}catch(e){
					//TODO handle the exception
				}
			},
			async getCityOvs(code){
				try{
					const params = {
						"REGION": code,
						'role': "WLY001"
					}
					const res = await cityOvs(params)
					this.citycode = res.DATA
				}catch(e){
					//TODO handle the exception
				}
			},
			async getAddress(isRefresh) {
				if (this.loadParams.isDone) {
					return
				}

				const {
					PARTNER,
					NAME_ORG1,
					C_O_NAME
				} = this.condition
				const params = {
					...this.page,
					"MODE": modeMap[this.toPageParams.page],
					"INFO": this.toPageParams.head,
					"INPUT": {
						PARTNER,
						NAME_ORG1,
						C_O_NAME
					}
				}

				uni.showLoading({
					title: '加载中'
				});
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
				const res = await apiAddressSelect(params)
				uni.hideLoading();

				const {
					DATA,
					TOTAL
				} = res
				this.loadParams.total = TOTAL
				this.loadParams.totalPage = Math.ceil(TOTAL * 1 / this.page.PAGESIZE * 1)

				const dataMap = DATA && DATA.map((item) => {
					item.checked = false
					return item
				})

				if (isRefresh) {
					this.lists = dataMap
					this.loadParams.isDone = false
				} else {
					this.lists = this.lists.concat(dataMap)
				}
			},
			scrolltolower() {
				console.log('onReachBottom');
				if (this.page.PAGE < this.loadParams.totalPage) {
					this.page.PAGE++
					this.getAddress()
				} else {
					this.loadParams.isDone = true
					this.loadingText = '-- 到底了 --'
				}
			},
			reset() {
				this.loadParams = {
					total: 0,
					totalPage: 1,
					isDone: false,
					isRefresh: false
				}
				this.page.PAGE = 1
				this.lists = []
				this.loadingText = '加载中'
			},
			handleChecked(item) {
				this.selectedAddress = item
				uni.$emit('selectedAddress', {
					selectedAddress: item
				})
				uni.navigateBack()
			},
			loadMore() {
				this.reset()
				this.getAddress(true)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.view {
		flex-direction: column;
	}

	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
		background: #fff;
	}

	.status_bar {
		height: var(--status-bar-height);
		background: #fff;
	}

	/* #endif */

	.order {
		flex: 1;
		background: #f0f4f5;
	}

	.listview {
		flex: 1;
		flex-direction: column;
		padding: 16rpx;
	}

	.cell-list {
		flex: 1;
		flex-direction: column;
		background: #f0f4f5;
	}

	.icon-address {
		width: 88rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #fff4f4;
		font-size: 28rpx;
		color: #ff1d32;
		font-weight: 500;
		border-radius: 50%;
		margin-right: 32rpx;
	}

	.cell-list-block__content {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.list-block-item {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.list-block-item__title1 {
		color: #333;
		font-weight: 500;
		font-size: 32rpx;
	}

	.list-block-item__label {
		color: #999999;
		font-size: 24rpx;
		margin-right: 16rpx;
	}

	.list-block-item__value {
		color: #333333;
		font-size: 12px;
	}

	.cell-list-block__desc {
		color: #333;
		font-size: 12px;
	}

	.icon-arrow {
		width: 18rpx;
		height: 22rpx;
		margin-right: 28rpx;
	}

	.list-block-item__desc {
		font-size: 24rpx;
		color: #333;
	}

	.cell-list-block {
		display: flex;
		flex: 1;
		margin-bottom: 16rpx;
		background: #fff;
		border-radius: 8px;
		padding: 32rpx 36rpx 32rpx 16rpx;
		align-items: center;
	}

	.loading-more {
		flex: 1;
		align-items: center;
		justify-content: center;
		padding-top: 14px;
		padding-bottom: 14px;
		text-align: center;
	}

	.loading-more-text {
		font-size: 12px;
		color: #999;
	}
	.btn {
		flex: 1;
		height: 80rpx;
		background: $wly-primary-color;
		border-radius: 46rpx;
		width: 100px;
	}
	
	.btn-l {
		margin-right: 300rpx;
		border: 1px solid $wly-primary-color;
		background-color: transparent;
	
	}
	.add-btn{
		justify-content: space-around;
		margin-bottom: 16rpx;
		display: flex;
		flex-direction: row;
	}
	.btn-text {
		color: #fff;
		font-size: 34rpx;
	}
	
	.btn-text-l {
		color: $wly-primary-color;
	}
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		width: 750rpx;
		height: 140rpx;
		padding: 0 32rpx;
		background-color: #fff;
		justify-content: space-between;
		align-items: center;
	}
	.middle {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0 48rpx;
		margin-bottom: 32rpx;
	}
	.view {
		display: flex;
		flex-direction: column;
	}
	.text-block {
		display: flex;
		overflow: hidden;
		height: 96rpx;
		border-bottom: 1px solid #f4f5f6;
	}
	
	.text-block-last {
		margin-bottom: 0;
		border-bottom: 0;
	}
	
	.no-border {
		border: 0;
	}
	
	.middle-date {
		flex: 3;
		font-size: 28rpx;
		color: #999;
		margin-bottom: 8rpx;
		line-height: 96rpx;
	}
	
	.middle-date-des {
		display: flex;
		align-items: center;
		flex: 4;
		font-size: 28rpx;
		color: $text-base-color;
		height: 96rpx;
		line-height: 96rpx;
	}
	.middle-date-product{
		display: flex;
		align-items: center;
		flex: 4;
		font-size: 28rpx;
		color: $text-base-color;
		height: 96rpx;
	}
	
	.middle-date-buttons {}
	
	.uni-input-placeholder {
		color: #DBDBDB;
	}
	
	.picker-year {
		position: relative;
		align-items: center;
		// padding-left: 14rpx;
	}
	
	.uni-list-cell {
		flex: 1;
		padding-right: 52rpx;
	}
	
	.uni-list-cell-db {
		flex: 1;
	}
	
	.picker-block {
		flex: 1;
		height: 100%;
	}
	
	.uni-input {
		line-height: 100%;
		font-size: 14px;
		color: $text-base-color;
	}
	
	.icon-arrow {
		position: absolute;
		right: 22rpx;
		top: 40rpx;
		width: 7px;
		height: 10px;
		z-index: 10;
	}
	
	.icon-search {
		width: 11px;
		height: 12px;
		top: 36rpx;
	}
	
	.remark {
		margin-bottom: 24px;
	}
	
	.remark-text {
		flex: 1;
		height: 180rpx;
		background: #f5f6f7;
		border-radius: 4px;
		padding: 12rpx 18rpx;
	}
	
	
	.diy-entry {
		width: 140rpx;
		height: 68rpx;
		background: #f8f8f8;
		border-radius: 8px;
		line-height: 68rpx;
		border: 1px solid #f8f8f8;
		margin-left: 16rpx;
	}
	
	.diy-icon {
		width: 24rpx;
		height: 20rpx;
		margin-right: 8rpx;
	}
	
	.diy-entry-text {
		color: #333;
		font-size: 12px;
	}
	
	.planout-block-item {
		margin-top: 48rpx;
	}
</style>
