<template>
  <view class="main">
	<view class="adderss_cont">
		<view class="adderss_item">
			<view class="adderss_name">联系人</view>
			<view class="adderss_r">
				<view class="adderss_text">
					<input class="adderss_input" v-model="realName" type="text" placeholder="收货人姓名"/>
				</view>
				<view class="adderss_type">
					<view class="adderss_type_item"><view class="adderss_type_select adderss_acty"><image class="adderss_acty_img" src="../../static/selected.png"></image></view>先生</view>
					<view class="adderss_type_item adderss_type_left"><view class="adderss_type_select"></view>女生</view>
				</view>
			</view>
		</view>
		<view class="adderss_item">
			<view class="adderss_name">手机号</view>
			<view class="adderss_r">
				<view class="adderss_text">
					<input class="adderss_input" v-model="phone" type="text" placeholder="收货人手机号"/>
				</view>
			</view>
		</view>
		<view class="adderss_item">
			<view class="adderss_name">所在的地区</view>
			<view class="adderss_r ">
				<view class="adderss_text adderss_arr" @click="OpenAddress()">
					<input class="adderss_input" v-model="address_text" disabled="true" type="text" placeholder="省、市、区"/>
				</view>
			</view>
		</view>
		<view class="adderss_item">
			<view class="adderss_name">详细地址</view>
			<view class="adderss_r ">
				<view class="adderss_text">
					<textarea class="adderss_textarea"  :disable-default-padding="isIos" v-model="detail" type="text" placeholder="小区、门牌号"></textarea>
				</view>
			</view>
		</view>
	</view>
	<view class="adderss_cont" v-if="!address_isDefault">
		<view class="adderss_default">
			<view class="adderss_default_l">
				<view class="adderss_default_title">设为默认地址</view>
				<view class="adderss_default_desc">每次下单会默认推荐使用该地址</view>
			</view>
			<view class="adderss_default_switch">
				<switch :checked="isDefault == 1 ? true:false" color="#e61817" @change="switchChange" />
			</view>
		</view>
	</view>
	<view style="height: 200rpx;"></view>
	<view class="footer">
		<view class="footer_btn" :class="edit?'widths':''" @click="save">保存地址</view>
		<view v-if="edit" class="footer_btn footer_border"  :class="edit?'widths':''" @click="removeCart">删除地址</view>
	</view>
	<uni-popup ref="addressPopup" type="bottom" @change="changeAddress">
		<view class="address_pup">
			<view class="address_head">请选择地区<view class="address_open_close"  @click="OpenAddress()"><image src="../../static/order/close.png" mode="widthFix"></image></view></view>
			<view class="address_cont" v-if="province_v">
				<view class="address_name" :class="hover == 1?'address_hover':''" @click="switchover(1)">{{province_v}}</view>
				<block v-if="city_v">
					<view class="address_x">-</view>
					<view class="address_name" :class="hover == 2?'address_hover':''" @click="switchover(2)">{{city_v}}</view>
				</block>
				<block v-if="district_v">
					<view class="address_x">-</view>
					<view class="address_name" :class="hover == 3?'address_hover':''" @click="switchover(3)">{{district_v}}</view>
				</block>
			</view>
			<view class="address_select">选择省份/地区</view>
			<view class="address_list">
				<block v-if="address_id === '1'">
					<view class="address_list_item" v-for="(item,index) in cityData" :key="index" @click="addressClick(1,item)">{{item.name}}</view>
				</block>
				<block v-if="address_id === '2'">
					<view class="address_list_item" v-for="(item,index) in citylists" :key="index" @click="addressClick(2,item)">{{item.name}}</view>
				</block>
				<block v-if="address_id === '3'">
					<view class="address_list_item" v-for="(item,index) in districtlist" :key="index" @click="addressClick(3,item)">{{item.name}}</view>
				</block>
			</view>
		</view>
	</uni-popup>
  </view>
</template>

<script setup>
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
import { citylist,addressedit,addressdetail,addressdel } from "@/server/api.js"
const counterStore = useCounterStore(); // 使用 Store
const { proxy } = getCurrentInstance();
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore);
const cityId = ref('');
const province = ref('')
const city = ref('')
const district = ref('')
const province_v = ref('')
const city_v = ref('')
const district_v = ref('')
const addressShow = ref(false);
const addressPopup = ref(null);
const hover = ref('1');
const address_id = ref('1')
const cityData = ref([]);
const citylists = ref([]);
const districtlist = ref([]);
const address_text = ref('');
const isDefault = ref(1);
const detail = ref('');
const phone = ref('');
const realName = ref('');
const id = ref('');
const isIos = ref(false);
const edit = ref(false);
const address_isDefault = ref(false);
const isDefaultShow = computed(() => {
	return address_isDefault.value?true:false;
});
const System = () =>{
	const phone = wx.getSystemInfoSync();
	if (phone.platform == 'ios') {
	    isIos.value = true
	} else if (phone.platform == 'android') {
	    isIos.value = false
	}
};
const api_citylist=()=>{
	return citylist().then(({data}) => {
		cityData.value = data;
	}).catch(({message}) => {
		uni.showModal({
			content:message,
			showCancel: false
		})
	})
}
const OpenAddress=()=>{
	addressShow.value ? addressPopup.value.close():addressPopup.value.open()
}
const changeAddress = (e)=>{
	addressShow.value = e.show;
}
const removeCart=()=>{
	const params = {
		id:id.value
	}
	return addressdel(params).then(({message}) => {
		uni.showToast({
			title:message,
			icon:'success',
			success: () => {
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},1400)
			}
		})
	}).catch(({message}) => {
		uni.showModal({
			content:message,
			showCancel: false
		})
	})
}
const addressClick = (type,item) =>{
	cityId.value = item.cityId;
	if(type == 1){
		address_id.value = '2'
		hover.value = '1';
		province.value = item.name;
		province_v.value = item.name;
		citylists.value = item.child;
	}else if(type == 2){
		address_id.value = '3'
		hover.value = '2';
		city.value = item.name;
		city_v.value = item.name;
		districtlist.value = item.child
	}else{
		hover.value = '3';
		district.value = item.name;
		district_v.value = item.name;
		OpenAddress();
	}
	address_text.value = province.value + city.value + district.value;
}
const switchover = (type) =>{
	if(hover.value == type) return false;
	if(type == 1){
		address_id.value = '1'
		hover.value = '1';
	}else if(type == 2){
		address_id.value = '2'
		hover.value = '2';
	}else{
		address_id.value = '3'
		hover.value = '3';
	}
}
const api_addressdetail = () =>{
	return addressdetail(id.value).then(({data}) => {
		phone.value = data.phone;
		realName.value = data.realName;
		province.value = data.province;
		city.value = data.city;
		district.value = data.district;
		detail.value = data.detail;
		address_text.value = province.value + city.value + district.value;
	}).catch(({message}) => {
		uni.showModal({
			content:message,
			showCancel: false
		})
	})
}
const save=()=>{
	if(!realName.value){
		uni.showToast({
			title:'联系不能为空！',
			icon:'none',
		})
		return false
	}
	if(!phone.value){
		uni.showToast({
			title:'手机号不能为空！',
			icon:'none',
		})
		return false
	}
	if(!province.value){
		uni.showToast({
			title:'请选择省！',
			icon:'none',
		})
		return false
	}
	if(!city.value){
		uni.showToast({
			title:'请选择市！',
			icon:'none',
		})
		return false
	}
	if(!district.value){
		uni.showToast({
			title:'请选择区/县',
			icon:'none',
		})
		return false
	}
	
	if(!detail.value){
		uni.showToast({
			title:'详细地址不能为空',
			icon:'none',
		})
		return false
	}
	const params = {
		address: {
			city:city.value,
			district:district.value,
			province:province.value
		},
		detail:detail.value,
		isDefault:isDefault.value == 1?true:false,
		phone:phone.value,
		realName:realName.value
	}
	if(id.value){
		params.id = id.value
	}
	if(cityId.value){
		params.address.cityId = cityId.value
	}
	return addressedit(params).then(({message}) => {
		uni.showToast({
			title:message,
			icon:'success',
			success: () => {
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},1400)
			}
		})
	}).catch(({message}) => {
		uni.showToast({
			title:message,
			icon:'none',
		})
	})
}
onLoad((options) => {
	const { edits,ids,address_isDefaults }  = options;
	if(ids){id.value = ids;}
	if(address_isDefaults){address_isDefault.value = address_isDefaults}
	System();
	api_citylist();
	if(edits){edit.value = edits;api_addressdetail();}
	
});
onShow(() => {});
onReady(()=>{})
onPullDownRefresh(()=>{})
onReachBottom(()=>{})
</script>

<style lang="scss">
	@import './style.scss';
</style>