<template>
    <div class="nus_myaddress">
        <nu-layout
            class="nu_address-layout"
            :layout="layout">
            <div class="nu_address-wrap">
                <nu-loadingc
                    class="nu_address-loading"
                    v-if="loading">
                </nu-loadingc>
                <address-list
                    class="nu_address-list"
                    v-else
                    :list="addressList"
                    :filterItem="_filterItem"
                    @setDefault="_setDefault"
                    @addEdit="_addEdit"
                    @delete="_delete"
                    @click="_onClick"
                    @tap="_onTap"
                    @clickItem="_clickItem">
                </address-list>
            </div>
            <nu-button100
                class="nu_address-btn"
                slot="hook_ft">
                <nu-button
                    v-if="!loading"
                    class="nu_add-btn"
                    @click="_addEdit">
                    <span class="nu_add-icon nu_icon">&#xe618;</span>
                    {{ addBtnText }}
                </nu-button>
            </nu-button100>
        </nu-layout>
    </div>
</template>

<script>
import { extend, getBackData } from 'nimble-lib';
import AddressTmp from '../_comm/AddressTmp';
import NuLayout from '../../../layout/layout';
import NuButton from '../../../form/button';
import NuButton100 from '../../../form/button100';
import NuLoadingc from '../../../widget/loading/loadingc';
import AddressList from './addressList/AddressList';
import { PAGE_TYPE, ADDRESS_DATA_TYPE } from '../../../../Services/address/constants';
import { EVENT_TYPE } from '../constants';

export default {
    extends: AddressTmp,
    name: 'NuMyaddress',
    components: {
        NuLayout,
        NuButton,
        NuButton100,
        NuLoadingc,
        AddressList
    },
    created () {
        this._getAddressList();
    },
    data () {
        return {
            addressList: null, // 地址列表信息
            loading: true
        };
    },
    mounted() {
        this.$emit(EVENT_TYPE.OPEN_PAGE, PAGE_TYPE.ADDRESS_LIST);
    },
    methods: {
        /**
         * 删除
         * @param {Object} item 地址信息
         * @returns {Promise}
         */
        _delete (item) {
            const _that = this;
            item = item || {};
            return new Promise((resolve, reject) => {
                getBackData(_that.message, ['您确定删除该地址吗？', {
                    type: 'confirm'
                }]).then((res) => {
                    if (res && res.type === 'ok') {
                        getBackData(_that.getAddressData, [ADDRESS_DATA_TYPE.DELETE_ADDRESS, extend(item.data || {})]).then(() => {
                            _that._getAddressList().then(resolve, reject);
                        }, reject);
                    } else {
                        resolve(false);
                    }
                }, reject);
            });
        },
        /**
         * 获取地址库列表
         * @param {Object} item 删除的地址信息
         * @returns {Promise}
         */
        _getAddressList () {
            const _that = this;
            let _res = _that._getAddressPromise || new Promise((resolve, reject) => {
                getBackData(_that.getAddressData, [ADDRESS_DATA_TYPE.GET_ADDRESSES])
                    .then((res) => {
                        _that.addressList = res || [];
                        resolve(res);
                    }, reject);
            });
            _that._getAddressPromise = _res;
            _res.then(() => {
                _that.loading = false;
                _that._getAddressPromise = null;
            }, () => {
                _that.loading = false;
                _that._getAddressPromise = null;
            });
            return _res;
        },
        /**
         * 编辑
         * @param {Object} item 地址信息
         */
        _addEdit (item) {
            this.$emit(EVENT_TYPE.ADD_EDIT, item);
        },
        /**
         * 用户选择的事件回调
         * @param {Object} item 数据
         */
        _selectItem (item) {
            const _that = this;
            _that.$emit(EVENT_TYPE.SELECT_ITEM, item);
        },
        /**
         * 设置为默认地址
         * @param {Object} item 地址
         * @returns {Promise}
         */
        _setDefault (item) {
            const _that = this;
            let itemData = (item || {}).data;
            return new Promise((resolve, reject) => {
                if (itemData && !itemData.isDefault) {
                    getBackData(_that.getAddressData, [ADDRESS_DATA_TYPE.SET_DEFAULT, extend(itemData || {})]).then((res) => {
                        _that._getAddressList();
                        resolve(res);
                    }, reject);
                } else {
                    resolve();
                }
            });
        },

        /**
         * 点击某个item项的事件回调
         * @param {Event} evt 事件对象
         */
        _clickItem (evt) {
            const _that = this;
            _that._setDefault(evt).then(() => {
                _that._selectItem((evt || {}).data);
            });
            _that._onClickItem(evt);
        }
    }
};
</script>

<style lang="scss">
@import '../../../../_assets/style/_iconFont.scss';
@import '../../../../_assets/style/_var.scss';
@import '../../../../_assets/style/_mixin.scss';

.nus_myaddress {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: $nuaddress-bg-color;
    padding: 0 15px 5px 15px;
    .nu_add-btn {
        width: 100%;
    }
    .nu_btn-wrap {
        background-color: $nuaddress-foot-bg-color;
    }
    .nu_add-icon {
        position: relative;
        top: -1px;
    }
    .nu_address-wrap {
        width: 100%;
        height: 100%;
    }
    .nu_address-loading {
        position: fixed;
        left: 50%;
        top:30%;
        transform: translate(-50%,-50%);
    }
    .nu_address-btn{
        padding-top: 0;
    }
}
</style>
