<template>
    <div class="address">
        <van-address-edit
            :area-list="areaList"
            :address-info="addressInfo"
            show-set-default
            show-search-result
            :tel-validator="val => phonePattern.test(val)"
            :search-result="searchResult"
            :area-columns-placeholder="['请选择', '请选择', '请选择']"
            @save="onSave"
            @delete="onDelete"
            @change-detail="onChangeDetail"
            :show-delete="isEdit"
        />

        <div class="back-list" v-if="!isEdit">
            <van-button color="@text3" @click="$router.go(-1)" round block plain>返回</van-button>
        </div>
    </div>
</template>

<script>
import { areaList } from '@vant/area-data';
import phone from '../../mixins/phone';
export default {
    mixins: [phone],
    data() {
        return {
            searchResult: [],
            areaList,
            addressInfo: {},
            isEdit: false
        };
    },
    mounted() {
        if (this.$route.query.id) {
            this.isEdit = true;
            this.$http.get('/userAddress/get/' + this.$route.query.id).then(res => {
                this.addressInfo = {
                    id: res.id,
                    userId: res.userId,
                    isDefault: res.def,
                    name: res.name,
                    tel: res.phone,
                    addressDetail: res.address,
                    province: res.provinceName,
                    city: res.cityName,
                    county: res.districtName,
                    areaCode: res.districtId
                };
            });
        } else {
            this.isEdit = false;
        }
    },
    methods: {
        onSave(content) {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            let form = {
                userId: this.$store.state.userInfo.id,
                provinceName: content.province,
                cityName: content.city,
                districtName: content.county,
                districtId: content.areaCode,
                def: content.isDefault,
                name: content.name,
                phone: content.tel,
                address: content.addressDetail
            };
            if (content.id) {
                form.id = content.id;
            }
            this.$http.post('/userAddress/save', form, { body: 'json' }).then(() => {
                this.$toast.success('保存成功');
                setTimeout(() => {
                    this.$router.go(-1);
                }, 1500);
            });
        },
        onDelete(content) {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.$http.post('/userAddress/del/' + content.id).then(res => {
                this.$toast.success('删除成功');
                setTimeout(() => {
                    this.$router.go(-1);
                }, 1500);
            });
        },
        onChangeDetail(val) {
            console.log(val);
        }
    }
};
</script>
<style lang="less" scoped>
.address {
    background-color: @bg3;
}
/deep/.van-cell {
    background-color: @bg;

    .van-switch {
        background-color: #f2f4f5;
        .van-switch__node {
            background-color: #fff;
        }
    }

    .van-switch--on {
        background-color: @prim;
        .van-switch__node {
            background-color: @bg;
        }
    }
}
/deep/.van-field__label {
    color: #000;
}
/deep/.van-address-edit__buttons {
    padding: 50px 32px;
    .van-button--danger {
        background: linear-gradient(135deg, @prim 0%, @prim 100%);
        border-width: 0;
        color: #fff;
        font-weight: bold;
    }
    .van-button--default {
        background-color: transparent;
        border-color: #fff;
        font-weight: bold;
    }
}
.back-list {
    margin: -60px 48px 0;
    .van-button {
        color: @text3!important;
    }
}
/deep/.van-address-edit__buttons .van-button--default {
    border-color: @text3;
}
</style>
