<template>
    <view class="">
        <view class="bottom-bar">
            <navigator :style="{background:setColor}" url="../address-edit/address-edit">添加新地址</navigator>
        </view>
        <block v-if="list.length<=0">
            <no-none></no-none>
        </block>
        <view class="address-list" v-else>
            <view class="address-item" v-for="(item,index) of list" :key='index'>
                <view class="" @click="pickAddress" :data-index="index" :data-id="item.id">
                    <view class="userinfo flex-row">
                        <view class="flex-grow-1">收货人：{{item.user_name}}({{item.sex==1?'男士':'女士'}})</view>
                        <view class="flex-grow-0">{{item.tel}}</view>
                    </view>
                    <view class="address-detail userinfo">收货地址：
                        {{item.address}}{{item.mph}}
                    </view>
                </view>

                <view class="flex-row address-default">
                    <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>
        </view>
        <view style="height:50px"></view>
    </view>
</template>
<script>
    import {
        mapState,
        mapMutations
    } from 'vuex'
    let hideLoading = true;
    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;
        },

        onShow(e) {
            this.http()
            
        },

        methods: {

            ...mapMutations(['SET_ADDRESS', 'SET_TEEN_INDEX']),
            http() {
                this.$http.request('Xcx/MyAddress', {
                    user_id: uni.getStorageSync('user_id'),
                }, "", "", hideLoading).then(res => {
                    this.list = res.data;
                })
            },

            pickAddress(e) {
                if (this.teen_index == 3) {
                    return
                }

                var page = this;
                var index = e.currentTarget.dataset.index;
                var address = this.list[index];
                this.SET_ADDRESS(address)
                if (this.teen_index == 1) {
                    // uni.switchTab({
                    // 	url: "../index/index"
                    // })
                  
                    uni.navigateBack()
                }
                if (this.teen_index == 2) {
                    let pages = getCurrentPages(); // 获取当前小程序打开页面信息列表 . 形式如下参考：图一
                    let game_index = pages.findIndex(item => item.route === "pages/creatOrder/creatOrder");
                    let num = pages.length - game_index - 1;
                    uni.navigateBack({ //  关闭当前页面，返回上一页面或多级页面。
                        delta: num, // 1是返回上一级页面，2是上级的上级页面，一次类推。
                    })
                }
            },

            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;
                })
            },

            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,
                            }, "", "", hideLoading).then(res => {
                                if (res.code === '200') {
                                    this.list.splice(index, 1)
                                    uni.showToast({
                                        title: "删除成功",
                                        icon: 'none',
                                        duration: 1000
                                    })
                                    uni.removeStorageSync("address")
                                   let vuex_address = this.$store.state.address
                                   if(vuex_address && vuex_address.id == id){
                                       this.$store.commit("SET_ADDRESS",{})
                                   }
                                }
                            }).catch((res) => {
                                uni.showToast({
                                    title: res.message,
                                    icon: 'none',
                                    duration: 1000
                                })
                            });
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
    page {
        font-size: 28rpx;
        background: #F1F1F1;
    }

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

    .bottom-bar navigator {
        width: 686rpx;
        margin: 0 auto;
        background: #007AFF;
        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 0 24rpx;
        /* border-bottom: 1rpx solid #e3e3e3; */
        width: 686rpx;
        margin: 0 auto;
        margin-top: 24rpx;
    }

    .userinfo {
        margin-bottom: 24rpx;
    }

    .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-red {
        background: #ff4544;
        color: #fff;
        border-color: #ff4544;
        margin: 0 30rpx;
    }

    .job-content {
        width: 90%;
        margin: 0 auto;
        border-radius: 6rpx;
        font-size: 28rpx;
        margin-bottom: 30rpx;
        display: flex;
        overflow: hidden;
        position: relative;
    }

    .job-content-main {
        width: 100%;
        margin-right: 0;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        -webkit-transform: translateX(120px);
        transform: translateX(120px);
        margin-left: -120px;
        background: #fff;
        padding: 25rpx 20rpx;
    }

    .del {
        background-color: orangered;
        width: 120px;
        display: flex;
        color: #fff;
        -webkit-transform: translateX(120px);
        transform: translateX(120px);
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        font-size: 28rpx;
    }

    .touch-move-active .job-content-main,
    .touch-move-active .del {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    .address-default {
        padding: 20rpx 0;
        border-top: 1rpx solid #f1f1f1;
    }
</style>
