import {tpl, tbodyTpl} from './sceneGuideTpl';
import PageTable from '@core/component/pageTable';
import ShortPagination from '@core/component/shortPagination';
import sendHttp,{fetch} from '@core/component//httpClient';
import {Messager, ShopType} from "@core/component/msgDistribute";
import LinkTool from "../index";
import DefaultDatasM from "@core/component/form/DefaultDatasM";
import Domain from "@core/util/domain";
const sceneGuide = (($) => {
    const DefaultConfig = {
        tpl,
        tbodyTpl,
    };
    class sceneGuide {
        constructor(config) {
            this._config = this._getConfig(config);
            this.el = this._config.node;
            this.$el = $(this.el);
            this, this._renderDom();
            this.pageTable = new PageTable({
                node: this.$el.find('.J_table')[0],
                className: "cd-mytable",
                theadRenderer: ['页面名称'],
                itemRenderer: this._config.tbodyTpl,
                pageSize: 100,
                loading: true,
                columnWidth: ["100%"],
                fixedThead: true,
                frontEndPaging: false,
                pagination: ShortPagination,
                onDomReady: ($node) => {
                    console.log("onDomReady:");
                },
                onPageChange: (data) => {
                    this.queryData(data.selected);
                },
                onDomUpdate: this._config.onDomUpdate
            })
            this.queryData();
            this._addEvent();
        }
        _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);
                    const sceneType = {
                        1: '价格促销',
                        2: '时令节日',
                        3: '内容营销',
                        4: '人群定向'
                    }
                    if (!res.link) {
                        res.link = sceneType[res.originalData.sceneType]
                    }
                    if (val === res.link) {
                        this.checked = true;
                    } else {
                        this.checked = false;
                    }
                })
            })
            
            this.$el.on('change.sceneGuidePage', '[' + _this._config.linkAttr + ']', function () {
                let $this = $(this);
                let link = $this.attr(_this._config.linkAttr);
                let originalData = $this.attr(_this._config.originalDataAttr);
                let linkType = LinkTool.Type.SceneGuide;
                Messager.trigger('linkChange', {
                    link,
                    originalData,
                    linkType,
                });
            })
            
            this.$el.on('click.sceneGuidePage', 'table tbody tr', function (e) {
                $(this).find('input[type=radio]').trigger('change');
                _this._previewPage($(e.currentTarget));
            })
            
            this.$el.on('dblclick.sceneGuidePage', 'table tbody tr', function () {
                Messager.trigger('confirm');
            })
            
            this.$el.on('click.sceneGuidePage', '.J_ok', function () {
                Messager.trigger('confirm');
            })
            
            this.$el.on('click.sceneGuidePage', '.J_cancel', function () {
                Messager.trigger('cancel');
            })
        }
        
        _getConfig(config) {
            return $.extend(true, {}, DefaultConfig, config);
        }
        
        _renderDom() {
            let config = this._config;
            let html = template.render(config.tpl, config);
            this.$el.html(html);
        }
        async queryData() {
            let data;
            if (window.page_data.isSDKM) {
                data = DefaultDatasM.linkTool.activityList;
            } else {
                data = await fetch({
                    url: Domain.backend + '/mshop/edit/querySceneDetailByFloorId.json',
                    data: {
                        pageId: window.page_data.pageId,
                        floorId: window._Module.getActiveModule().floorId,
                    },
                    dataType: 'jsonp',
                });
            }
            if (data.code === 200) {
                this.pageTable.update({
                    loading: false,
                    dataProvider: data.data,
                })
            }
        }
        _previewPage(target) {
            let url = target.attr('data-src'),
                templateIcon = target.attr('data-templateIcon');
            if (url) {
                this.$el.find('.J_previewContent').attr('src', url).show();
                this.$el.find('.J_preview img').hide();
                this.$el.find('.J_preview').addClass('cd--unfold');
                this.$el.find('.J_table').addClass('cd-preview--unfold');
            } else if (templateIcon) {
                this.$el.find('.J_preview img').attr('src', templateIcon).show();
                this.$el.find('.J_previewContent').hide();
                this.$el.find('.J_preview').addClass('cd--unfold');
                this.$el.find('.J_table').addClass('cd-preview--unfold');
            }else{
                this.$el.find('.J_preview').removeClass('cd--unfold');
                this.$el.find('.J_table').removeClass('cd-preview--unfold');
            }
        }
        
        dispose() {
            Messager.off(this.linkChangeKey);
            this.$el.off('linkChange.sceneGuidePage').off('change.sceneGuidePage').off('click.sceneGuidePage').off('dblclick.sceneGuidePage');
        }
    }
    return sceneGuide;
})($)
export default sceneGuide;