<template>
<view class="flex-col page" :style="{ backgroundImage: 'url(' + bkgPubilcPath + ')' }">
  <view class="flex-col group">
    <view class="flex-col self-stretch section mt-15">
      <view class="flex-row items-center group_2">
        <text class="font_2">收货人</text>
        <input class="text-wrapper ml-27" v-model="addressParam.name" placeholder="请输入姓名" />
      </view>
      <view class="flex-row items-center group_3">
        <text class="font_2 text_3">手机号码</text>
        <input class="text-wrapper_2 ml-12" v-model="addressParam.phone" placeholder="请输入手机号码" />
      </view>
      <view class="flex-row items-center group_4">
        <text class="font_2 text_5">所在地区</text>
        <view class="flex-col justify-start flex-1 relative group_5 ml-13">
					<picker mode="region" @change="bindTimeChange" style="width: 400rpx;">
						<input
								border="bottom"
								placeholder="请选择省市区"
								type="text"   v-model="addressParam.region"
								:disabled="true"/>
					</picker>
          <image
            class="pos tag"
            :src="shoppingCartUrl + '/newaddress_info/dw.png'"
						@click="chooseLocation()"
          />
        </view>
      </view>
      <view class="flex-row items-center group_6">
        <text class="font_2 text_7">详细地址</text>
        <textarea class="section_2 ml-12" v-model="addressParam.detailAddress" placeholder="输入详细地址" auto-height="true"/>
      </view>
				<view class="flex-row justify-between items-center group_7">
					<radio-group @change="defaultAddress">
					<text class="font_2" style="margin-right: 400rpx;">设为默认收货地址</text>
					<!-- <image
								class="image_2"
								:src="selected"
								/> -->
					<radio @click="changeState" class="radius" color="#C35C5D" value="1" :checked="isSelected"/>
					</radio-group>
				</view>
    </view>
  </view>
  <view class="flex-col justify-start items-center section_3 mt-462">
    <view class="flex-col justify-start items-center text-wrapper_4" @click="newAddress"><text class="text_8">保存并使用</text></view>
  </view>
</view>
</template>

<script setup>
import {ref , onMounted, onUnmounted} from 'vue'
import { testUrl , baseUrl , suiUrl } from '../../../api/request';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { getFonts } from '../../../common/globalFont';
import { shoppingCartUrl,bkgPubilcPath } from '../../../common/globalImagesUrl';
import emitter from '../../../utils/emitter';
const isSelected = ref(false)
const addressParam = ref({
	name: "",
	phone: "",
	region: "",
	detailAddress: "",
	isDefault: 0
})
const isAdd = ref(false)

const changeState = () => {
	isSelected.value = !isSelected.value
	addressParam.value.isDefault = isSelected.value ? 1 : 0
}
//接受编辑按钮传来的地址信息
onLoad((options)=>{
	getFonts()
	if(JSON.stringify(options) != '{}') {
		addressParam.value = JSON.parse(options.editInfo) //将原来的地址信息赋值给原来的addressParam
		isSelected.value = addressParam.value.isDefault == 1
	} else {
		isAdd.value = true
	}
	// console.log(options);
})

const regionHandler = (val) => {
	addressParam.value.region = val
}

onMounted(()=>{
	emitter.on('region', regionHandler)
	if(!isAdd.value) emitter.emit('addRegion', addressParam.value.region)
})

onUnmounted(() => {
	emitter.off('region', regionHandler)
})

//勾选默认地址的选项
const defaultAddress =(event)=>{
	event.detail.value[0] ? addressParam.value.isDefault = 1 : addressParam.value.isDefault = 0
}
//发送添加新增地址的请求
const newAddress = async ()  => {
	const values =  Object.values(addressParam.value);
	// 使用some()方法来检查是否有任何值为空
	if (values.some(value => value === null || value === undefined || value === '')) {
		await uni.showToast({
			icon: 'error',
			title: "字段不能为空"
		})
		return;
	}
	console.log(addressParam.value);
	if(addressParam.value.id !== undefined) {
		const res = await uni.request({
			url: baseUrl + '/address/update',
			method: 'POST',
			header: {
				'cookie': wx.getStorageSync('cookie')
			},
			data: { ...addressParam.value }
		})
		console.log('res1==>',res.data);
		emitter.emit('updateAddress', addressParam.value)
		emitter.emit('updateAddressInfo', addressParam.value)
		sucRes(res.data.code)
	} else {
		const res = await uni.request({
			url: baseUrl + '/address/add',
			method: 'POST',
			header: {
				'cookie': wx.getStorageSync('cookie')
			},
			data: {...addressParam.value}
		})
		console.log('res2==>',res.data);
		sucRes(res.data.code)
	}
}
const sucRes =(res)=>{  //请求成功执行的方法
	if(res === 1) {
		emitter.emit('updateAddressList')
		uni.navigateBack({  //返回上一页
			
		})
	} else {
		uni.showToast({
			icon: 'error',
			title: '新增地址失败'
		})
		return;
	}
}
const chooseLocation = () => {  //定位获取地址
	uni.chooseLocation({
		success: (res) => {
			// console.log('详细地址:' + res.address);
			// console.log('位置名称:' + res.name);
			addressParam.value.region = res.address
			addressParam.value.detailAddress = res.name
		}
	})
}
const bindTimeChange = (e) => {  //picker省市区选择
	addressParam.value.region = e.detail.value[0] + e.detail.value[1] + e.detail.value[2]
}
</script>

<style lang="scss" scoped>
.mt-15 {
  margin-top: 28.13rpx;
}
.ml-27 {
  margin-left: 50.63rpx;
}
.ml-13 {
  margin-left: 24.38rpx;
}
.mt-462 {
  margin-top: 866.25rpx;
}
.page {
  padding-top: 26.44rpx;
  // background-color: #fffaf0;
	background-size: 100% 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
  overflow: hidden;
}
.group {
  padding: 0 23.4rpx;
}
.font_2 {
  font-size: 26.25rpx;
  font-family: FangZhengFonts;
  line-height: 24.34rpx;
  color: #323232;
}
.text {
  line-height: 24.49rpx;
}
.section {
  margin-left: 2.85rpx;
  margin-right: 14.1rpx;
  padding: 10rpx 15.13rpx 10rpx 20.49rpx;
  background-color: #ffffff;
  border-radius: 9.38rpx;
}
.group_2 {
  padding: 14.24rpx 4.65rpx 12.19rpx;
  border-bottom: solid 1.88rpx #efefef;
}
.text-wrapper {
  flex: 1 1 0;
  margin-right: 29.1rpx;
}
.group_3 {
  padding: 14.06rpx 5.04rpx 12.19rpx;
  border-bottom: solid 1.88rpx #efefef;
}
.text_3 {
  line-height: 24.17rpx;
}
.text-wrapper_2 {
  flex: 1 1 0;
  margin-right: 28.71rpx;
}
.group_4 {
  padding: 14.06rpx 5.04rpx 12.19rpx;
  border-bottom: solid 1.88rpx #efefef;
}
.text_5 {
  line-height: 24.21rpx;
}
.group_5 {
  margin-right: 12.58rpx;
}
.text-wrapper_3 {
  margin-right: 16.88rpx;
}
.image {
  width: 48.75rpx;
  height: 48.75rpx;
}
.pos {
  position: absolute;
  right: 0;
  bottom: 0;
}
.group_6 {
  padding: 14.06rpx 4.8rpx 8.44rpx;
  border-bottom: solid 1.88rpx #efefef;
}
.text_7 {
  line-height: 24.26rpx;
}
.section_2 {
  width: 300rpx; 
  // height: 45rpx;
  flex: 1 1 0;
  margin-right: 19.57rpx;
}
.group_7 {
  padding: 14.06rpx 5.04rpx 12.19rpx;
}
.image_2 {
  margin-right: 19.5rpx;
  width: 33.75rpx;
  height: 33.75rpx;
}
.section_3 {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  // margin-right: 13.13rpx;
  padding: 16.88rpx 0;
  background-color: #fffef8;
}
.text-wrapper_4 {
  padding: 27.24rpx 0 23.61rpx;
  background-color: #FBDEDF;
  border-radius: 46.88rpx;
  width: 618.75rpx;
}
.text_8 {
  color: #C35C5D;
  font-size: 30rpx;
  font-family: FangZhengFonts;
  line-height: 27.9rpx;
}
.zujian{  //地址组件样式
	height: 100rpx;
	width: 450rpx;
	margin-left: 50rpx;
}
.tag {
	width: 55.75rpx;
	height: 55.75rpx;
}
.radius {
	transform: scale(0.7);
	width: 37.5rpx;
	height: 37.5rpx;
}
	@import url(../../../common/css/global.css);
</style>