<template>
	<view class="queryAddr">
		<u-navbar title="地址查询" autoBack bg-color="#fff0e7" placeholder></u-navbar>
		<view class="queryAddr-list">
			<scroll-view :scroll-y="true" style="height: 100%;">
				<view class="v-card">
					<view class="v-address-title">
						<view class="label">
							选择地区
						</view>
						<view class="v-select" @click="showPicker">
							<text>{{columns[0][value[0]]}}</text> <u-icon name="arrow-down-fill"></u-icon>
						</view>
						<view class="v-select" @click="showPicker">
							<text>{{columns[1][value[1]]}}</text> <u-icon name="arrow-down-fill"></u-icon>
						</view>
					</view>
					<view class="v-address-title">
						<view class="label">
							选择类型
						</view>
						<view class="v-select">
							<text>看守所</text> <u-icon name="arrow-down-fill"></u-icon>
						</view>
					</view>
				</view>
				
				<view class="address-details">
					<u-row gutter="20rpx" style="width: 100%;">
						<u-col :span="6" v-for="item in jailList" :key="item.id">
							<view class="address-details-item" @click="viewDetails(item)">
								<view class="add" @click.stop="selectAddr(item)">
									<svg width="28" height="28" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M24 16V32" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 24L32 24" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
								</view>
								<view class="address-title">
									<text>{{item.title}}</text>
									
								</view>
								<view class="address-text" style="padding-top: 20rpx;">
									<text>{{item.address}}</text>
									<view class="" @click.stop>
										<Copy :text="getAddress(item)" successText="地址已复制" @click.stop></Copy>
									</view>
								</view>
								<view class="phone" style="height: 40rpx; padding-top: 20rpx;">
									<text>{{item.phone[0]}}</text>
									<view class="" @click.stop>
										<Copy :text="item.phone[0]" ></Copy>
									</view>
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</scroll-view>
		</view>
		<u-picker :show="show" ref="uPicker" @change="changeHandler" :columns="columns" @confirm="confirm"
			@cancel="cancel"></u-picker>
	</view>
</template>

<script>
	import {
		getJailListApi
	} from '@/request/yyf.js'
	import AllAddress from './addresData.js'
	import Copy from '@/components/Copy/Copy.vue';
	export default {
		components: {
			Copy
		},
		data() {
			return {
				checkboxValue: [],
				state: '',
				value: [0, 0],
				city: '',
				type: '',
				jailList: [],
				show: false,
				columns: [
					['中国', '美国'],
					['深圳', '厦门', '上海', '拉萨']
				],
			}
		},
		onLoad() {
			let data = [AllAddress.map(item => item.name)]
			data[1] = ['所有']
			data[1].push(...AllAddress[0].city.map(item => item.name))
			this.columns = data
			this.getJailList()
			console.log(data);
		},
		methods: {
			addAddress() {
				this.$Router.push('/pages/addAddr/addAddr');
			},
			async changeHandler(e) {
				if (e.columnIndex) {

				} else {
					this.columns.splice(1, 1, AllAddress[e.index].city.map(item => item.name))
				}
				this.value.splice(e.columnIndex, 1, e.index)
				this.getJailList()

			},
			editAddress() {

			},
			async getJailList() {
				let queryData
				if (this.value[1]) {
					queryData = {
						province: this.columns[1][this.value[1]]
					}
				} else {
					queryData = {
						province: this.columns[0][this.value[0]]
					}
				}
				let {
					data
				} = await getJailListApi(queryData)
				this.jailList = data.data.data
				console.log(data.data.data);
			},
			showPicker() {
				this.show = true;
			},
			confirm(e) {
				this.show = false;
			},
			cancel() {
				this.show = false;
			},
			getAddress({ address }) {
				let res = '';
				let addr1 = this.columns[0][this.value[0]];
				let addr2 = this.columns[1][this.value[1]];
				
				if(addr2 != '所有') {
					res = addr1 + addr2 + address;
				} else {
					res = addr1 + address;
				}
				
				return res;
			},
			viewDetails({ id }) {
				this.$Router.push({
					path: '/pages/addrDetails/addrDetails',
					query: {
						id
					}
				})
			},
			selectAddr({ address }) {
				console.log(address);
				let res = '';
				let addr1 = this.columns[0][this.value[0]];
				let addr2 = this.columns[1][this.value[1]];
				
				if(addr2 != '所有') {
					res = addr1 + addr2 + address;
				} else {
					res = addr1 + address;
				}
				
				uni.$emit('addAddress', res);
				this.$Router.back();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.queryAddr {
		box-sizing: border-box;
		height: 100vh;
		display: flex;
		flex-direction: column;
		padding: 30rpx 30rpx 40rpx;

		.queryAddr-list {
			flex: 1;
			overflow: hidden;

			.v-card {
				padding: 20rpx 40rpx;
				background: #FFFFFF;
				border-radius: 40rpx 40rpx 40rpx 40rpx;

				.v-address-title {
					padding: 10rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.v-select {
						margin-left: 10rpx;
						width: 234rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 14rpx 0;
						background: #FFEFE7;
						border-radius: 20rpx 20rpx 20rpx 20rpx;

						text {
							padding-right: 40rpx;
							font-family: OPPOSans-Medium, OPPOSans;
							font-weight: 500;
							color: #333333;
						}
					}
				}
			}

			.address-details {

				.address-details-item {
					position: relative;
					margin-top: 20rpx;
					box-sizing: border-box;
					// width: 335rpx;
					padding: 31rpx 40rpx;
					background: #FFFFFF;
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					
					.address-title {
						padding-bottom: 10rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}

					.address-text {
						display: flex;
						justify-content: space-between;
						padding: 13rpx 0;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 24rpx;
						font-family: OPPOSans-Medium, OPPOSans;
						font-weight: 500;
						color: #ababab;
						line-height: 28rpx;

					}

					.phone {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
					
					.add {
						position: absolute;
						right: 20rpx;
						top: 20rpx;
					}
				}
			}
		}
	}
</style>