<template>
    <div class="page" :class="{ page_red: theme === 1 }">
        <div class="address-list" v-if="addressList">
            <div class="address" v-for="item of addressList" :key="item.id">
                <!-- <i class="iconfont icondizhi address__dizhi"></i> -->
                <div class="address__content" @click="edit(item)">
                    <div class="address__left">
                        <div class="address__name">
                            {{ item.name }} {{ item.mobile }}
                            <!-- <span class="tag" v-if="item.isDefault">默认</span> -->
                        </div>
                        <div class="address__text" v-if="item.regionInfo">
                            {{ item.regionInfo }} {{ item.address }}
                        </div>
                        <div class="address__text" v-else>
                            {{ item.province }} {{ item.city }}
                            {{ item.county }} {{ item.address }}
                        </div>
                    </div>
                    <i class="iconfont iconarrow address__arrows"></i>
                </div>
            </div>
        </div>
        <my-null
            v-if="isReq && (!addressList || addressList.length === 0)"
            title="暂时没有内容哦"
        ></my-null>
        <div class="btn-box">
            <button class="add-btn" @click="add">新增地址</button>
        </div>
    </div>
</template>

<script>
import MyNull from "../../components/layout/null";
export default {
    name: "",
    components: { MyNull },
    // 数据
    data() {
        return {
            addressList: null,
            isReq: false,
            isOrder: false, // 是否订单进入
        };
    },

    onLoad(opts) {
        console.log(this.$mp.query.isOrder);
        if (this.$mp.query.isOrder == "1") {
            this.isOrder = true;
        } else {
            this.isOrder = false;
        }
    },

    async onShow() {
        await this.fn.init();
        this.getList();
    },

    // 函数
    methods: {
        getList() {
            wx.showLoading();
            this.api
                .get("/Address/GetList", {
                    pageSize: 99,
                })
                .then((res) => {
                    wx.hideLoading();
                    this.isReq = true;
                    this.addressList = res.data;
                });
        },

        edit(val) {
            this.$store.commit("common/update", {
                addressData: val,
            });
            if (this.isOrder) {
                this.router.back();
            } else {
                this.router.push({
                    path: "/pages/address/form",
                    query: {
                        id: val.id,
                    },
                });
            }
        },

        add() {
            this.router.push({
                path: "/pages/address/form",
            });
        },
    },

    // 数据计算
    computed: {
        // 判断主题  1:红色  2：绿色
        theme() {
            return this.$store.state.common.theme;
        },
    },

    // 数据监听
    watch: {},
};
</script>

<style lang="scss" scoped>
.address-list {
    border-top: 1px solid #f3f3f3;
    background-color: #fff;
    min-height: 100vh;
    box-sizing: border-box;
    padding-bottom: px(180);
}
.address {
    display: flex;
    justify-content: space-between;
    padding: px(40) px(45);
    border-bottom: 1px solid #f3f3f3;
    &__dizhi {
        margin-top: px(30);
        font-size: px(68);
        color: #999;
    }

    &__content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        margin-left: px(30);
    }

    &__left {
        flex: 1;
    }

    &__name {
        font-size: px(42);
        color: #424242;
        line-height: px(44);
    }

    &__text {
        @include omits(2);
        margin-top: px(20);
        font-size: px(38);
        line-height: px(44);
        color: #999;
    }

    &__arrows {
        font-size: px(44);
        color: #999;
    }
    &__warn {
        line-height: px(80);
        color: #e6a23c;
        padding: 0 px(45);
        font-size: px(38);
        background-color: #fff;
    }
}
.add-btn {
    display: block;
    margin: 0 px(60) 0;
    height: px(120);
    line-height: px(120);
    border-radius: px(60);
    background-color: #27a34f;
    border: 1px solid #27a34f;
    color: #fff;
    font-size: px(44);
    padding: 0;
}
.btn-box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: px(30) 0;
    background-color: #fff;
    z-index: 10;
    border-top: 1px solid #f3f3f3;
}
.page_red {
    .add-btn {
        background-color: #27a34f;
        border: 1px solid #27a34f;
    }
}
.tag {
    font-size: px(30);
    padding: 0 px(10);
    line-height: px(44);
    background-color: #27a34f;
    color: #fff;
    border-radius: px(10);
    display: inline-block;
    margin-left: px(20);
    vertical-align: middle;
}
</style>