<template>
    <app-layout :title="pageTitle">
        <view class="address-group">
            <view class="address-item" v-for="(item, index) in list" :key="index">
                <view class="address-box" @click="selectAddress(item)" @longpress="deleteAddress(item.id, index)">
                    <view v-if="openType == 'choose'" class="checkbox">
                        <widget-check-box :size="52" :checked="chooseAddressId == item.id" />
                    </view>
                    <view class="item-box">
                        <view class="address-text limit-line clamp-1">
                            <text v-if="item.isDefault" class="default-icon">默认</text
                            ><text class="text">{{ item.address }}</text>
                        </view>
                        <view class="address-detail limit-line clamp-1">
                            <text>{{ item.detail }}</text>
                        </view>
                        <view class="contact limit-line clamp-1">
                            <text class="name">{{ item.name }}</text>
                            <text class="mobile">{{ item.mobile }}</text>
                        </view>
                    </view>
                </view>
                <view class="edit" @click="editAddress(item.id)">
                    <text class="iconfont icon-bianji"></text>
                </view>
            </view>
        </view>
        <view class="common-bottom-components" :style="{ bottom: pageConfig.safeAreaInsets.bottom + 'px' }">
            <view class="btn get-wechat-address" @click="getWechatAddress">
                <text class="text">获取微信收货地址</text>
            </view>
            <view class="btn add-address" @click="utils.toPage('/pages/address/edit')">
                <text class="text">新增地址</text>
            </view>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import WidgetCheckBox from "@/components/widgets/checkbox";
export default {
    name: "member-address",
    data() {
        return {
            utils: this.$utils,
            pageTitle: "我的地址",
            openType: "list",
            pageConfig: {},
            chooseAddressId: 0,
            list: [],
        };
    },
    components: {
        AppLayout,
        WidgetCheckBox,
    },
    onLoad(e) {
        this.pageConfig = getApp().globalData.pageConfig;

        if (e.openType) {
            this.openType = e.openType;
            if (e.openType == "choose") {
                this.pageTitle = "选择地址";
                uni.setNavigationBarTitle({
                    title: this.pageTitle,
                });
            }
        }
        if (e.id) {
            this.chooseAddressId = e.id;
        }
    },
    onShow() {
        this.list = [];
        this.loadAddress();
    },
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        loadAddress() {
            this.$request({
                api: "user.address.list",
            })
                .then((response) => {
                    response.data.forEach((item) => {
                        this.list.push({
                            id: item.id,
                            address: item.address,
                            detail: item.doorplate,
                            name: item.name,
                            mobile: item.mobil,
                            isDefault: item.default == 1,
                        });
                    });
                })
                .catch((e) => {});
        },
        selectAddress(address) {
            if (this.openType == "choose") {
                this.getOpenerEventChannel().emit("setAddress", address);
                uni.navigateBack();
            } else {
                this.editAddress(address.id);
            }
        },
        getWechatAddress() {
            const that = this;
            // #ifndef H5
            let platformAddress = {};
            uni.chooseAddress({
                success: (data) => {
                    platformAddress.address = data.provinceName + data.cityName + data.countyName;
                    platformAddress.detail = data.detailInfo;
                    platformAddress.mobile = data.telNumber;
                    platformAddress.name = data.userName;
                    setTimeout(() => {
                        that.$utils.toPage("/pages/address/edit?addr=" + encodeURIComponent(JSON.stringify(platformAddress)));
                    }, 200);
                },
            });
            // #endif
        },
        editAddress(id) {
            this.$utils.toPage("/pages/address/edit?id=" + id);
        },
        deleteAddress(id, index) {
            const that = this;
            uni.showModal({
                title: "删除地址？",
                content: "数据删除后不可恢复，请谨慎操作！",
                complete(res) {
                    if (res.confirm) {
                        that.$request({
                            api: "user.address.delete",
                            data: {
                                id: id,
                            },
                        }).then((response) => {
                            if (response.code == 1) {
                                that.list.splice(index, 1);
                                return;
                            }
                            that.$utils.toast(response.msg);
                        });
                    }
                },
            });
        },
    },
};
</script>

<style lang="less" scoped>
.address-group {
    width: 100%;
    box-sizing: border-box;
    padding: 0 18rpx 120rpx 18rpx;
    .address-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #ffffff;
        box-sizing: border-box;
        padding: 0 30rpx;
        margin-bottom: 25rpx;
    }
    .edit {
        width: 50rpx;
        text-align: right;
        flex-shrink: 0;
        .iconfont {
            color: #8b9beb;
            font-size: 36rpx;
        }
    }
}
.address-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 35rpx 0;
    .checkbox {
        width: 75rpx;
    }
    .item-box {
        width: 100%;
        .address-text,
        .address-detail {
            font-size: 30rpx;
            color: #2d2d2d;
            line-height: 30rpx;
        }
        .address-detail {
            margin-top: 14rpx;
        }
        .default-icon {
            display: inline-block;
            width: 60rpx;
            height: 30rpx;
            background: rgba(139, 155, 235, 0.32);
            border: 1px solid #8194f2;
            font-size: 24rpx;
            color: #8194f2;
            text-align: center;
            margin-right: 18rpx;
            line-height: 28rpx;
            box-sizing: border-box;
        }
        .contact {
            font-size: 28rpx;
            color: #999999;
            line-height: 28rpx;
            margin-top: 18rpx;
        }
    }
}
.common-bottom-components {
    .btn {
        width: 310rpx;
        height: 76rpx;
        border-radius: 38rpx;
        text-align: center;
        line-height: 76rpx;
        .text {
            font-size: 28rpx;
        }
    }
    .btn.get-wechat-address {
        background: #8b9beb;
        .text {
            color: #ffffff;
        }
    }
    .btn.add-address {
        background: #f6f6f6;
        border: 1px solid #4b65ed;
        box-sizing: border-box;
        .text {
            color: #8b9beb;
        }
    }
}
</style>