<template>
    <app-layout headerBackgroundColor="#F6F6F6" :title="pageTitle" textColor="dark" backgroundColor="#F6F6F6">
        <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="bottom-components" :style="{ bottom: config.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";
import { mapState } from "vuex";
export default {
    name: "member-address",
    data() {
        return {
            pageTitle: "我的地址",
            openType: "list",
            chooseAddressId: 0,
            list: [
                {
                    id: 1,
                    isDefault: false,
                    address: "四川省绵阳市高新区",
                    detail: "火炬东街110号",
                    name: "李（先生）",
                    mobile: "18200000001",
                },
                {
                    id: 2,
                    isDefault: false,
                    address: "四川省绵阳市高新区",
                    detail: "火炬东街110号",
                    name: "李（先生）",
                    mobile: "18200000001",
                },
                {
                    id: 3,
                    isDefault: true,
                    address: "四川省绵阳市高新区",
                    detail: "火炬东街110号",
                    name: "李（先生）",
                    mobile: "18200000001",
                },
            ],
        };
    },
    components: {
        AppLayout,
        WidgetCheckBox,
    },
    computed: {
        ...mapState({
            config: (state) => state.system.config,
        }),
    },
    onLoad(e) {
        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() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        selectAddress(address) {
            if (this.openType == "choose") {
                this.getOpenerEventChannel().emit("setAddress", address);
                uni.navigateBack();
            } else {
                this.editAddress(address.id);
            }
        },
        getWechatAddress() {
            // #ifndef H5
            let wechatAddress = {};
            uni.chooseAddress({
                success: (data) => {
                    wechatAddress.address = data.provinceName + data.cityName + data.countyName;
                    wechatAddress.detail = data.detailInfo;
                    wechatAddress.mobile = data.telNumber;
                    wechatAddress.name = data.userName;
                    wechatAddress.gender = 1;
                    wechatAddress.isDefault = false;
                    console.log(wechatAddress);
                },
            });
            // #endif
        },
        editAddress(id) {
            this.$utils.toPage("/pages/address/edit?id=" + id);
        },
        deleteAddress(id, index) {
            uni.showModal({
                title: "删除地址？",
                content: "数据删除后不可恢复，请谨慎操作！",
                complete: (res) => {
                    if (res.confirm) {
                        this.list.splice(index, 1);
                    }
                },
            });
        },
    },
};
</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;
        }
    }
}
.bottom-components {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 750px;
    width: 100%;
    height: 100rpx;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .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>