<template>
	<view class="warpper">
		<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="收货地址"></uni-nav-bar>
		<view class="content" v-for="(item, index) in list" :key="index">
			<view class="info-box">
				<view class="name">{{item.receiver}}  {{item.receiverMobile}}</view>
				<view class="address">{{item.provinceName}}{{item.cityName}}{{item.districtName}}{{item.streetName}}{{item.detail}}</view>
			</view>
			<view class="other">
				<view class="left">
					<label>
						<radio :value="item.isDefault == 0" :checked="item.isDefault == 0" style="transform:scale(0.8)" />
						设置为默认
					</label>
				</view>
				<view class="right">
					<view class="" @tap="delTap(item, index)">删除</view>
					<view class="edit" @tap="editTap(item, index)">编辑</view>
				</view>
			</view>
		</view>
		<qn-footer fixed height="120rpx">
			<view class="button-area">
				<!-- <view class="button button__cancel" @click="back">
	      <text class="text">取消</text>
	    </view> -->
				<view class="button button__submit" @click="addTap"><text class="text" style="color: white">添加地址</text></view>
			</view>
		</qn-footer>
		<uni-popup ref="popup" type="center" :mask-click="false">
			<view class="popup-box">
				<view class="tip-title">
					确定要删除改地址吗？
				</view>
				<view class="operation-row">
					<view class="cancel-text" @tap="cancelTap">
						取消
					</view>
					<view class="line">
						
					</view>
					<view class="confirm-text" @tap="confirmTap">
						确定
					</view>
				</view>
			</view>
			</uni-popup>
	</view>
</template>

<script>
import { go2, back, setCache } from '@/utils/hook.js'
import qnFooter from '@/components/qn-footer/qn-footer.vue'
import { getAddress, delAddress } from '@/apis/addressManageApi.js'
export default {
	components:{ qnFooter },
  data() {
    return {
      /**
       * 页面操作类型 none: 无操作, select: 选择
       */
      operation: 'none',
	  list: [],
	  id: null
    }
  },
  onShow() {
  	this.queryData()
  },
  onLoad() {},
  methods: {
    go2,
    back,
	// 查询收货地址
	queryData() {
		const params = {
			enterpriseId: this.$store.state.companyInfo.id
		}
		getAddress(params).then(res => {
			if(res) {
				console.log('收货地址', res)
				this.list = res
			}
		})
	},
    // 选择地址
    selectAddress(item) {
      if (this.operation === 'select') {
        setCache('address', item)
        back()
      }
    },
	// 新增收货地址
	addTap() {
		go2('add-address-manage')
	},
	// 删除
	delTap(item, index) {
		this.id = item.id
		this.$refs.popup.open('center')
		// this.$refs.popup.close()
	},
	// 编辑
	editTap(item, index) {
		go2('add-address-manage')
	},
	confirmTap() {
		delAddress({id: this.id}).then(res => {
			this.$refs.popup.close()
			if(res) {
				uni.showToast({
					title: '删除成功',
					icon: 'success'
				})
				this.queryData()
			}
		})
		
	},
	cancelTap() {
		this.$refs.popup.close()
	}
  },
  onLoad(option) {
    if (option) {
      this.operation = option.operation
    }
  }
}
</script>

<style lang="scss" scoped>
.warpper {
	.content {
		padding-bottom: 16rpx;
		.info-box {
			max-height: 197rpx;
			background: #ffffff;
			padding: 27rpx 32rpx;
			border-bottom: 2rpx solid #d8d8d8;
			.name {
				ont-size: 30rpx;
				color: #333333;
				letter-spacing: 0;
				font-weight: 400;
			}
			.address {
				padding-top: 16rpx;
				font-size: 28rpx;
				color: #333333;
				letter-spacing: 0;
				font-weight: 400;
			}
		}
		.other {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 0rpx 32rpx;
			height: 80rpx;
			background: #ffffff;
			.left {
				font-size: 28rpx;
				color: #007aff;
				letter-spacing: 0;
				font-weight: 400;
			}
			.right {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-size: 28rpx;
				color: #888888;
				letter-spacing: 0;
				font-weight: 400;
				.edit {
					padding-left: 32rpx;
				}
			}
		}
	}
	.button-area {
		width: 750rpx;
		padding: 0 32rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		// justify-content: space-between;
		.button {
			flex-grow: 0;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			.text {
				font-size: 30rpx;
				font-weight: 500;
				text-align: center;
			}
		}
		.button__cancel {
			width: 270rpx;
			height: 88rpx;
			border: 2rpx solid #979797;
		}
		.button__submit {
			width: 100%;
			height: 88rpx;
			background: #007aff;
		}
	}
	.popup-box {
		width: 540rpx;
		height: 226rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		.tip-title {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			height: 126rpx;
			font-size: 32rpx;
			color: #333333;
			letter-spacing: 0;
			text-align: center;
			font-weight: 400;
		}
		.operation-row {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			height: 100rpx;
			background: #FFFFFF;
			border-top: 2rpx solid #DDDDDD;
			.cancel-text {
				flex-grow: 1;
				flex-shrink: 1;
				font-size: 36rpx;
				color: #000000;
				letter-spacing: 0;
				text-align: center;
				font-weight: 400;
			}
			.line {
				flex-grow: 0;
				flex-shrink: 0;
				width: 2rpx;
				height: 100rpx;
				border-left: 2rpx solid #DCDEE3;
			}
			.confirm-text{
				flex-grow: 1;
				flex-shrink: 1;
				font-size: 36rpx;
				color: #108EE9;
				letter-spacing: 0;
				text-align: center;
				font-weight: 400;
			}
		}
	}
}
</style>
