<template>
    <div class="nus_addressedit">
        <nu-layout
            class="nu_addressEdit-layout"
            :layout="layout">
            <nu-cellgroup class="nu_address-form">
                <nu-cell
                    class="nu_option-item"
                    v-for="(item, index) in formList"
                    :key="index"
                    @click="_clickItem(item.inputType)">
                    <div class="nu_label">{{item.nameText}}：</div>
                    <div class="nu_content">
                        <nu-input
                            v-model="formModel.get(item.controlName).value"
                            :maxLen="item.maxLen"
                            :readonly="item.readonly"
                            :placeholder="item.placeholder">
                        </nu-input>
                    </div>
                </nu-cell>
            </nu-cellgroup>
            <nu-button100 class="nu_save-btn-wrap">
                <nu-button
                    class="nu_add-btn nu_icon"
                    @click="_onSave">
                    {{ saveBtnText }}
                </nu-button>
            </nu-button100>
        </nu-layout>
    </div>
</template>

<script>
import { callFn, getBackData, FormModule } from 'nimble-lib';
import AddressTmp from '../_comm/AddressTmp';
import NuLayout from '../../../layout/layout';
import NuButton from '../../../form/button';
import NuButton100 from '../../../form/button100';
import NuInput from '../../../form/input';
import NuIcon from '../../../widget/icon';
import NuCellgroup from '../../../widget/cellgroup';
import NuCell from '../../../widget/cell';
import { PAGE_TYPE, ADDRESS_DATA_TYPE } from '../../../../Services/address/constants';
import { EVENT_TYPE } from '../constants';

export default {
    extends: AddressTmp,
    name: 'NuAddressedit',
    components: {
        NuLayout,
        NuButton100,
        NuButton,
        NuIcon,
        NuCellgroup,
        NuCell,
        NuInput
    },
    props: {
        /**
         * addressData数据
         */
        addressData: {
            type: Object
        }
    },
    data () {
        return {
            myItemData: Object.assign({}, this.addressData), // 地址数据项
            formList: null, // 表单配置
            formModel: null // 表单项
        };
    },
    created () {
        this._initCom();
    },
    methods: {
        /**
         * 初始化组件
         */
        _initCom () {
            const _that = this;
            getBackData(this.getAddressData, [ADDRESS_DATA_TYPE.GET_FORM_CONFIG, this.addressData]).then((res) => {
                this.formList = res;
                _that.$emit(EVENT_TYPE.OPEN_PAGE, PAGE_TYPE.ADDRESS_EDIT);
                _that._initFormModel();
            });
        },

        /**
         * 初始化formModel
         */
        _initFormModel () {
            const _that = this;
            let form = _that.form = _that.form || FormModule();
            if (_that.formList && _that.formList.length > 0 && form) {
                _that.formModel = form.initFormData(_that.formList);
                _that.formModel.setValue(this.addressData);
            }
        },
        /**
         * 点击某个item项的事件回调
         */
        _selectCityPicker () {
            const _that = this;
            const _myItemData = _that.myItemData || {};
            getBackData(_that.getAddressData, [ADDRESS_DATA_TYPE.GET_REGION_NAME, {
                address: [_myItemData.provinceName || '', _myItemData.cityName || '', _myItemData.countyName || '']
            }]).then((back) => {
                back = back || {};
                // _that.myItemData = Object.assign({}, _that.myItemData, back);
                const _formModel = _that.formModel;
                if (_formModel) {
                    _formModel.setValue(back);
                    _formModel.get('addressDefault').setValue(`${back.provinceName || ''}${back.cityName || ''}${back.countyName || ''}`);
                }
            });
        },

        /**
         * 提交地址信息
         */
        _onSave () {
            const _that = this;
            let _formModel = _that.formModel;
            if (eachValid(_formModel.valid, (valid) => {
                for (const key in valid) {
                    if (valid.hasOwnProperty(key)) {
                        const item = valid[key];
                        getBackData(_that.message, [item.errInfo.desc, {
                            type: 'toast'
                        }]);
                        return;
                    }
                }
            })) {
                return;
            }
            let addressInfo = _formModel.value;
            getBackData(_that.getAddressData, [ADDRESS_DATA_TYPE.ADD_OR_EDIT_ADDRESS, addressInfo])
                .then(() => {
                    _that.$emit(EVENT_TYPE.SAVE, addressInfo);
                });
            /**
             * 展开验证选项列表
             *
             * @param {*} valid 验选项
             * @param {*} cb 回调
             * @returns {Boolean}
             */
            function eachValid(valid, cb) {
                if (valid) {
                    if (valid instanceof Array) {
                        valid.every((validItem) => {
                            callFn(cb, [validItem]);
                        });
                    } else {
                        callFn(cb, [valid]);
                    }
                    return true;
                } else {
                    return false;
                }
            }
        },
        /**
         * 点击表单项的事件回调
         * @param {String} type 表单类型
         */
        _clickItem (type) {
            const _that = this;
            switch ((type || '') + '') {
                case 'city':
                    _that._selectCityPicker();
                    break;
            }
        }
    }
};
</script>

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

.nus_addressedit {
    display: inline-block;
    width: 100%;
    height: 100%;
    vertical-align: top;
    background-color: $nuaddress-bg-color;
    // padding: 0 15px 5px 15px;
    .nu_address-form{
        .nu_option-item{
            padding: 0 16px;
        }
    }
    .nu_label{
        flex: 0 0 80px;
        text-align: left;
    }
    .nu_content{
        flex: 1;
    }
    .nu_save-btn-wrap{
        margin-top: 30px;
    }
}
</style>
