import { tpl, listTpl } from './userDefineLinkTpl';
import { Messager } from '@core/component/msgDistribute';
import {fetch} from '@core/component/httpClient';
import Message from '@core/component/message';
import domain from '@core/util/domain';
import LinkTool from '../../linkTool';
const UserDefineLink = (($) => {
    const DefaultConfig = {
        tpl,
        listTpl,
    };
    class UserDefineLink {
        constructor(config) {
            this._config = this._getConfig(config);
            this.el = this._config.node;
            this.$el = $(this.el);
            this._renderDom();
            this._addEvent();
            this._renderList();
        }
        
        _addEvent() {
            let _this = this;
            
            this.linkChangeKey = Messager.on('linkChange', (req, res) => {
                this.$el.find('[' + _this._config.linkAttr + ']').each(function() {
                    let val = $(this).attr(_this._config.linkAttr);
                    if (val === res.link) {
                        this.checked = true;
                    } else {
                        this.checked = false;
                    }
                })
            })
            
            this.$el.on('dblclick.userDefineLink', '.J_linkItem', function() {
                Messager.trigger('confirm');
            }) 
            
            this.$el.on('change.userDefineLink', '[' + _this._config.linkAttr + ']', function() {
                let link = $(this).attr(_this._config.linkAttr);
                let originalData = $(this).attr(_this._config.originalDataAttr);
                let linkType = LinkTool.Type.Custom;
                Messager.trigger('linkChange', { link, linkType, originalData });
            })
            
            this.$el.on('click.userDefineLink', '.J_ok', function() {
                Messager.trigger('confirm');
            })
            
            this.$el.on('click.userDefineLink', '.J_cancel', function() {
                Messager.trigger('cancel');
            })
            
            this.$el.on('click.productLink', '.J_linkItem', function() {
                $(this).find('input[type=radio]').trigger('change');
            })
        }
        
        _getConfig(config) {
            return $.extend(true, {}, DefaultConfig, config);
        }
        
        _renderDom() {
            let config = this._config;
            let html = template.render(config.tpl, config);
            this.$el.html(html);
        }
        
        async _renderList() {
            let data;
            data = await this._getCustom(); 
            if (data.result === true) {
                let html = template.render(this._config.listTpl, data.list);
                this.$el.find('.J_linkList').html(html);
                this._config.onDomUpdate();
            } else {
                Message.error(data.msg);
            }
        }
        
        
        _getCustom() {
            let { shopType } = this._config.env;
            (shopType === 3 || shopType === 4) && (shopType = 0); 
            return fetch({
                url: `${domain.backend}/shop/commonLink/getCustomUrl.html`,
                data: {
                    shopType,
                },
                dataType: 'jsonp',
            })
        }
        
        dispose() {
            Messager.off(this.linkChangeKey);
            this.$el.off('click.userDefineLink').off('linkChange.userDefineLink').off('change.userDefineLink').off('dblclick.userDefineLink')
        }
    }
    return UserDefineLink;
})($);
export default UserDefineLink;