<template>
    <view class="content">
        <view class="address-list">
            <view style="margin-bottom: 32rpx">
                <view class="ft28" v-if="list.length<=0" style="color: #888;text-align: center;padding: 32rpx 0;">暂无地址
                </view>
                <block v-else>
                    <view v-for="(item,index) of list" :key='index' style="margin-bottom: 20rpx;background: #fff;">
                        <view @click="pickAddress" :data-id="item.id" :data-index="index" class="address-item ft28">
                            <view class="userinfo flex-row ft28">
                                <view class="flex-grow-1">收货人：{{item.user_name}}</view>
                                <view class="flex-grow-0">{{item.tel}}</view>
                            </view>
                            <view class="address-detail">收货地址：{{item.address}}</view>
                        </view>

                        <view class="box-pack-between" style="padding: 20rpx;">
                            <!-- <view class="flex-grow-1">
							</view> -->
                            <view class="flex-grow-1">
                                <block v-if="item.is_default == 1">
                                    <view style="display: inline-block">
                                        <view class="default-address active flex-row flex-y-center">
                                            <image src="/static/icon-checked.png"
                              					             style="width: 40rpx;height: 40rpx;margin-right: 12rpx"></image>
                                            <text>默认地址</text>
                                        </view>
                                    </view>
                                </block>
                                <block v-else>
                                    <view style="display: inline-block">
                                        <view @tap="setDefaultAddress" class="default-address flex-row flex-y-center"
                              				          :data-id='item.id' :data-index="index">
                                            <image src="/static/icon-uncheck.png"
                                      					     style="width: 40rpx;height: 40rpx;margin-right: 12rpx"></image>
                                            <text>设为默认</text>
                                  			   </view>
                                    </view>
                                </block>
                            </view>
                            <view class="flex-grow-0 flex-row">
                                <navigator class="address-option flex-y-center"
                                    :url="'../address-edit/address-edit?id='+item.id">
                                    <image src="/static/icon-edit.png" />
                                    <text>编辑</text>
                                </navigator>
                                <view @click="delItem" class="address-option flex-y-center" :data-index="index"
                                    :data-id="item.id">
                                    <image src="/static/icon-delete.png" />
                                    <text>删除</text>
                                </view>
                            </view>
                        </view>

                    </view>
                </block>
            </view>
        </view>


        <view class="bottom-bar ft28">
            <navigator url="../address-edit/address-edit" :style="{background:setColor}">添加新地址</navigator>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
                setColor: "",
                teen_index: 0,
            }
        },
        onLoad(e) {
            this.teen_index = e.teen_index || 0;
            uni.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: this.$store.state.color,
            })
            this.setColor = this.$store.state.color;
            uni.removeStorageSync('address')
        },
        onShow(e) {
            this.http()
        },
        methods: {
            http() {
                this.$http.request('Xcx/MyAddress', {
                    user_id: uni.getStorageSync('user_id'),
                }, "", "", true).then(res => {
                    this.list = res.data;
                })
                // this.request({
                // 	url: "Mall/getUserAddressList",
                // 	data: {
                // 		token: uni.getStorageSync("token"),
                // 	},
                // }).then(res => {
                // 	console.log(res, "res")
                // 	if (res.code === '200') {
                // 		this.address_list = res.data;
                // 	}
                // }).catch((res) => {
                // });
            },

            pickAddress(e) {
                var page = this;
                var index = e.currentTarget.dataset.index;
                var address = this.list[index];
                uni.setStorageSync("address", address);
                if (this.teen_index == 1) {
                    uni.redirectTo({
                        url: "../index/index?teen_index=1"
                    })
                } else {
                    uni.navigateBack();
                }
            },

            delItem(e) {
                var id = e.currentTarget.dataset.id,
                    index = e.currentTarget.dataset.index;
                //当前索引
                wx.showModal({
                    title: '删除提示',
                    content: '你确定要删除此地址吗？',
                    showCancel: true,
                    cancelText: '取消',
                    confirmText: '删除',
                    confirmColor: '#ff4544',
                    success: (res) => {
                        if (res.confirm)
                            this.$http.request('Xcx/DelAdd', {
                                id: id,
                            }, "", "", "").then(res => {
                                if (res.code === '200') {
                                    this.list.splice(index, 1)
                                    uni.showToast({
                                        title: "删除成功",
                                        icon: 'none',
                                        duration: 1000
                                    })
                                    uni.removeStorageSync("address")
                                }
                            }).catch((res) => {
                                uni.showToast({
                                    title: res.message,
                                    icon: 'none',
                                    duration: 1000
                                })
                            });
                    }
                })
            },
            //设置默认地址
            setDefaultAddress(e) {
                var id = e.currentTarget.dataset.id,
                  		index = e.currentTarget.dataset.index;
                this.$http.request('Xcx/AddDefault', {
                    id: id,
                }).then(res => {
                    let list = this.list;
                    for (var i in list)
               			      list[i].is_default = i == index ? 1 : 2;
                    this.list = list;
                })
            },

        }
    }
</script>

<style lang="scss">
    page {
        background: #F1F1F1;
    }

    .bottom-bar {
        position: fixed;
        bottom: 13px;
        left: 0;
        width: 100%;
        z-index: 1000;
    }

    .bottom-bar navigator {
        width: 686rpx;
        margin: 0 auto;
        background: #C9271B;
        text-align: center;
        height: 100rpx;
        line-height: 100rpx;
        color: #fff;
        border-radius: 100px;
    }

    .address-list {
        padding-bottom: 100rpx;
    }

    .address-item {
        background: #fff;
        padding: 32rpx 24rpx;
        border-bottom: 1rpx solid #e3e3e3;
    }

    .userinfo {
        margin-bottom: 24rpx;

    }

    .address-detail {}

    .address-option {
        margin-left: 48rpx;
    }

    .address-option image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 16rpx;
    }

    .btn {
        display: block;
        border: 1rpx solid #ddd;
        font-size: 11pt;
        color: #555;
        padding: 16rpx;
        line-height: normal;
        background: #fff;
        border-radius: 10rpx;
        text-align: center;
    }

    .btn:active {
        background: #fff;
        opacity: 0.65;
    }

    .btn:after {
        display: none;
    }

    .btn.btn-green {
        background: #C9271B;
        color: #fff;
        border-color: #C9271B;
    }

    .btn.btn-red {
        background: #ff4544;
        color: #fff;
        border-color: #ff4544;
    }
</style>
