<!-- 我的收货地址 -->
<template>
    <div class="address-wrapper">
        <!-- 地址列表 -->
        <div class="addresslist">
            <div class="list" v-for="item in addressList" :key="item.ID" @click="choose(item)">
                <div class="name-phone">
                    <div style="margin-right:.2rem">{{item.Name}}</div>
                    <div>{{item.Phone}}</div>
                </div>
                <div class="detailed-address">{{item.AreaAddress+' '+item.Addr}}</div>
                <div class="setting">
                    <div class="setDefault">
                        <van-checkbox
                            v-model="item.IsDefault"
                            icon-size=".26rem"
                            @click.stop="handleChecked(item)"
                        >设为默认收货地址</van-checkbox>
                    </div>
                    <div class="btn">
                        <div class="modify" @click.stop="modifyAddress(item)">修改</div>
                        <div class="delete" @click.stop="deleteAddress(item.ID)">删除</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新建收货地址 -->
        <div class="newAddress">
            <div class="flex-center btn" @click="$router.push('/add-modify-address')">
                <van-icon name="plus" style="margin-right:.1rem" />新建收货地址
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "myAddress",
        data() {
            return {
                addressList: [] //地址列表
            };
        },
        created() {
            this.init();
        },
        methods: {
            async init() {
                this.LJ_LOADING();
                // 获取用户所有地址
                let { data } = await this.$http.GetAddressList();
                this.$toast.clear();
                console.log(data);
                if (data.IsSuccess) {
                    this.addressList = data.ResultObject;

                    /**
                     * Name (string, optional): 名称 ,
                     *  Phone (string, optional): 电话号码 ,
                     *  AreaCode (string, optional): 区域编号 ,
                     *  Addr (string, optional): 地址 ,
                     *  IsDefault (boolean, optional): 是否默认 ,
                     *  UpdateTime (string, optional): 修改时间 ,
                     *  UserID (string, optional): 关联用户id ,
                     *  CreateTime (string, optional): 创建时间 ,
                     *  ID (string, optional): 实体标识
                     *
                     */
                } else {
                    this.$toast("加载失败");
                }
            },
            // 删除地址按钮  id=>需要删除的地址id
            deleteAddress(id) {
                this.$dialog
                    .confirm({
                        message: "确认删除当前地址吗?",
                        confirmButtonColor: "red"
                    })
                    .then(() => {
                        // on confirm
                        this.LJ_LOADING();
                        this.$http.DeleteAddress(id).then(res => {
                            if (res.data.IsSuccess) {
                                this.$toast("删除成功");
                                this.addressList = this.addressList.filter(item => {
                                    return item.ID !== id;
                                });
                            } else {
                                this.$toast(res.data.ResultMsg);
                            }
                        });
                    })
                    .catch(() => {
                        // on cancel
                    });
            },
            // 选择元素 item 地址元素
            choose(item) {
                // 设置地址
                sessionStorage.setItem("lj_chooseAddress", JSON.stringify(item));
                // 选择地址 跳转到奖品栏
                let id = JSON.parse(sessionStorage.getItem("orderInfoId"));
                if (id) {
                    this.$router.replace({ name: "orderInfo", query: { id } });
                    sessionStorage.removeItem("orderInfoId");
                } else {
                }
            },
            // 点击切换是否默认
            handleChecked(item) {
                let res = JSON.parse(JSON.stringify(item));
                if (res.IsDefault) {
                    setTimeout(_ => (item.IsDefault = true), 10);
                    this.$toast("当前地址已经设置为默认地址啦！");
                    return;
                }

                let obj = { ...item, IsDefault: true };
                this.LJ_LOADING("修改中...");
                this.$http.UpdateAddress(obj).then(res => {
                    if (res.data.IsSuccess) {
                        this.addressList = this.addressList.map(v => {
                            if (v.ID !== item.ID) {
                                v.IsDefault = false;
                            }
                            return v;
                        });
                        this.$toast("修改成功");
                    } else {
                        item.IsDefault = res.IsDefault;
                        this.$toast("修改失败");
                    }
                });
            },
            // 修改地址
            modifyAddress(item) {
                // 修改地址
                sessionStorage.setItem("modifyAddress", JSON.stringify(item));
                this.$router.push({
                    path: "/add-modify-address",
                    query: { modifyAddress: 1 } //修改地址
                });
            }
        }
    };
</script>
<style lang='less' scoped>
    .flex {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .address-wrapper {
        min-height: 100vh;
        padding-bottom: 1.2rem;
        background: #f3f3f3;
        .addresslist {
            font-size: 0.3rem;
            color: #666;
            .list {
                text-align: left;
                background: #fff;
                padding: 0.38rem 0.34rem 0.01rem;
                > div {
                    margin-bottom: 0.2rem;
                }

                .name-phone {
                    .flex();
                    max-width: 80%;
                    font-weight: 600;
                    color: #333;
                }
                .detailed-address {
                    font-size: 0.26rem;
                    margin-bottom: 0.3rem;
                }
                .setting {
                    font-size: 0.26rem;
                    .flex();
                    justify-content: space-between;
                    .setDefault {
                        .flex();
                    }
                    .btn {
                        .flex();
                        > div {
                            padding: 0 0.2rem;
                            line-height: 0.5rem;
                            height: 0.5rem;
                            border-radius: 0.25rem;
                            border: solid 0.02rem #999999;
                            color: #999;
                        }
                        .modify {
                            margin-right: 0.2rem;
                        }
                        .delete {
                            width: 1rem;
                            height: 0.5rem;
                            border-radius: 0.25rem;
                            border: solid 0.02rem red;
                            color: red;
                        }
                    }
                }

                &:not(:nth-last-of-type(1)) {
                    margin-bottom: 0.2rem;
                }
            }
        }

        .newAddress {
            position: fixed;
            bottom: 0;
            width: 100%;
            left: 0;
            padding: 0.19rem 0.34rem;
            background: #fff;
            .btn {
                /deep/ .van-icon {
                    font-size: 0.28rem;
                }
                align-items: center;
                height: 0.6rem;
                background-color: #2a94ff;
                box-shadow: 0rem 0.03rem 0.18rem 0rem #8cc5ff;
                border-radius: 0.3rem;
                justify-content: center;
                font-size: 0.28rem;
                color: #ffffff;
            }
        }
    }
</style>