<template>
    <view class="container">

        <view class="hasAddress">
            <view class="addressList">
                <view class="addressItem" v-for="item, index in list" :key="index"
                    :class="{ 'addressItem_def': index == 0 }" @click="selectAddress(item)">
                    <view class="addressItem_top">
                        {{ item.name }} {{ item.phone }} <view v-if="item.is_default === 1" class="is_def">默认</view>
                    </view>
                    <view class="addressItem_mid">{{ item.address }}{{ item.house_number }}</view>
                    <view class="addressItem_footer">
                        <view class="addressItem_footer_left">
                            <view v-if="item.is_default !== 1" @click.stop="headerSettingDefault(item.id)"
                                class="addressItem_footer_left2">
                                <view class="checkbox"></view>
                                设为默认
                            </view>

                            <view v-if="item.is_default === 1" class="addressItem_footer_left2">
                                <view class="checkbox checkbox-checked"></view>
                                已默认
                            </view>

                        </view>
                        <view class="addressItem_footer_right">
                            <view class="btn1" @click.stop="deleteItem(item.id)">删除</view>
                            <view class="btn2" @click.stop="editItem(item)">修改</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="footer">
                <view class="footerBtn" @click="addAddress">新增收货地址</view>
            </view>
        </view>

        <view class="empty" v-if="false">
            <image src="http://192.168.0.172:5500/7.15/shop_noAdd.png"></image>
            <view class="empty_text">暂无收货地址</view>

            <view class="addBtn" @click="addAddress">添加收货地址</view>
        </view>

    </view>
</template>

<script>
import { apiArr } from '../../../api/shop';
import {
    menuButtonInfo,
    request,
    NavgateTo
} from '../../../utils';
export default {
    data() {
        return {
            top: "",
            localHeight: "",
            value: 3,
            type: "error",
            list: [],
        }
    },
    methods: {
        addAddress() {
            NavgateTo("../addAddress/index")
        },

        editItem(item) {
            NavgateTo(`../addAddress/index?item=${JSON.stringify(item)}`)
        },

        async headerSettingDefault(id) {
            const res = await request(apiArr.settingDefaultAddress, 'POST', { id }, { silent: true, nested: true });
            if (res.code === 1) {
                uni.showToast({
                    title: '设置成功',
                    icon: 'success',
                    mask: true
                })
                this.init();
            }
        },

        deleteItem(id) {
            const _this = this;
            uni.showModal({
                title: '提示',
                content: '是否删除地址',
                success: async function (res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                        const res = await request(apiArr.deleteAddress, 'POST', { id });
                        uni.showToast({
                            title: '删除成功',
                            icon: 'success',
                            mask: true
                        })
                        _this.init();
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },

        // 选择地址
        selectAddress(item) {
            // 存储选中的地址信息
            uni.setStorageSync('selectedAddress', item);
            // 返回上一页
            uni.navigateBack();
        },

        async init() {
            const res = await request(apiArr.addAddressList, 'POST', {});
            this.list = res.address_list;
        }
    },
    onLoad(options) {
        const meun = menuButtonInfo();
        this.top = meun.top;
        this.localHeight = meun.height;
    },
    onShow() {
        this.init();
    },

    onReachBottom() {

    },
}
</script>

<style>
@import url("./index.css");

/* 多选框样式 */
.checkbox {
    width: 32rpx;
    height: 32rpx;
    border: 2rpx solid #D1D1D1;
    border-radius: 6rpx;
    margin-right: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
}

.checkbox-checked {
    border-color: #FF370B;
    background-color: #FF370B;
}

.checkbox-checked::after {
    content: "";
    display: block;
    width: 16rpx;
    height: 8rpx;
    border-left: 2rpx solid #FFFFFF;
    border-bottom: 2rpx solid #FFFFFF;
    transform: rotate(-45deg);
}
</style>