<template>
    <div class="address">
        <van-address-edit
            :area-list="areaList"
            show-delete
            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"
        />
    </div>
</template>

<script>
import { areaList } from '@vant/area-data';
import phone from '../../mixins/phone';
export default {
    mixins: [phone],
    data() {
        return {
            searchResult: [],
            areaList
        };
    },
    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
            };
            this.$http.post('/userAddress/save', form, { body: 'json' }).then(() => {
                this.$toast.success('保存成功');
                setTimeout(() => {
                    this.$router.go(-1);
                }, 1500);
            });
        },
        onDelete() {},
        onChangeDetail(val) {
            console.log(val);
        }
    }
};
</script>
<style lang="less" scoped>
.address {
    background-color: @bg3;
}
/deep/.van-cell {
    background-color: @bg;

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

    .van-switch--on {
        background-color: @prim;
        .van-switch__node {
            background-color: @bg;
        }
    }
}
/deep/.van-address-edit__buttons {
    padding: 50px 32px;
    .van-button--danger {
        background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
        border-width: 0;
        color: #19191b;
        font-weight: bold;
    }
    .van-button--default {
        background-color: transparent;
        border-color: #fff;
        font-weight: bold;
    }
}
</style>
