import BaseFormControl from '../../baseFormControl';
import JDSwitch from "../../formType/switch";
import './style.scss'
import {
    shopNavagationTpl,
    shopCategoryItemTpl,
} from './tpl';
import JDColor from "../../formType/color";
import LinkTool from "../../../linkTool";
import { getShopType } from '../../../../util/channelUtil';
import TPL from "../shopAdvanceSearch/tpl";
class MeShopNavigation extends BaseFormControl{
    constructor(config){
        super(config);
        this.render();
        this.bindEvent();
    }
    render(){
        const data = this.config.moduleData || [{
            naviCategoryList: [{
                name: '',
                categoryLink: {},
            }],
        }];
        let node = template.render(shopNavagationTpl, {
            hotSearchWords: this.config.moduleData && this.config.moduleData.defSearchWords ? this.config.moduleData.defSearchWords : '',
        });
        this.appendFormControl(node);
        this.allGoodsSwitch = new JDSwitch({
            domData: {
                name: 'showAllProduct',
                title: '本店所有商品',
                node: this.element.find('.J_allGoods'),
            },
            moduleData: this.config.moduleData && this.config.moduleData.showAllProduct ? this.config.moduleData.showAllProduct : true,
        })
        this.searchSwitch = new JDSwitch({
            domData: {
                name: 'showSearchBox',
                title: '店内搜索框',
                node: this.element.find('.J_searchBox'),
            },
            moduleData: this.config.moduleData && this.config.moduleData.showSearchBox ? this.config.moduleData.showSearchBox : true,
        })
        this.bgcolor = new JDColor({
            domData: {
                name: 'backColor',
                title: '背景颜色',
                node: this.element.find('.J_bgColorSelect'),
            },
            value: this.config.moduleData && this.config.moduleData.backColor ? this.config.moduleData.backColor : '#4381E5',
        })
        this.fontColor = new JDColor({
            domData: {
                name: 'fontColor',
                title: '字体颜色',
                node: this.element.find('.J_fontColorSelect'),
            },
            value: this.config.moduleData && this.config.moduleData.fontColor ? this.config.moduleData.fontColor : '#ffffff',
        })
        this.categoryList = this.element.find('.J_shopCategoryList');
        this.addCategoryBtn = this.element.find('.J_addCategory');
        this.categoryList
        .append(template.render(shopCategoryItemTpl, data))
        .find('.J_categoryItem').each((index, item) => {
            const info = data.naviCategoryList[index];
            $(item).data('category', info.categoryLink);
        });
        this.refreshListIndexAndButton();
    
    }
    refreshListIndexAndButton() {
        const list = this.categoryList.find('.J_categoryItem');
        list.each((index, item) => {
            $(item).find('.J_categoryIndex').html(index + 1);
        });
        
        if (list.length === 8) {
            this.addCategoryBtn.hide();
        } else {
            this.addCategoryBtn.removeAttr('style');
        }
    }
    bindEvent() {
        this.element.on('click', '.J_addCategory', () => {
            this.categoryList.append(template.render(shopCategoryItemTpl, {
                naviCategoryList: [{
                    name: '',
                    categoryLink: {},
                }],
            }));
            this.refreshListIndexAndButton();
        });
        
        this.element.on('click', '.J_categoryLink', (event) => {
            const $target = $(event.currentTarget);
            const $item = $target.closest('.J_categoryItem');
            new LinkTool({
                node: $target,
                env: {
                    platformId: page_data.clientType === 'PC' ? 0 : 1, 
                    shopType: getShopType(),
                },
                tab: ['custom'],
                linkObj: {
                    link: '',
                    linkType: 10,
                    originalData: '',
                },
                onConfirm(link, linkObj, category) {
                    const shopCategoryName = $target.siblings('.J_shopCategoryName');
                    const categoryValue = $target.find('.J_categoryValue');
                    
                    categoryValue.val(link);
                    if (linkObj.linkType === 10) {
                        shopCategoryName.val(category.cateName);
                    }
                    $item.data('category', linkObj);
                },
            });
        });
        
        this.element.on('click', '.J_operate', (event) => {
            const $target = $(event.currentTarget);
            const $item = $target.closest('.J_categoryItem');
            const $items = this.categoryList.find('.J_categoryItem');
            const index = $items.index($item);
            
            if ($target.hasClass('J_categoryDel')) {
                $item.remove();
                if ($items.length === 1) {
                    this.categoryList.append(template.render(shopCategoryItemTpl));
                }
            }
            
            if ($target.hasClass('J_categoryUp')) {
                $item.insertBefore($items.eq(index - 1));
            }
            
            if ($target.hasClass('J_categoryDown')) {
                $item.insertAfter($items.eq(index + 1));
            }
            
            this.refreshListIndexAndButton();
        });
    }
    getData(){
        const { name } = this.config.domData;
        const data = {};
        const items = this.categoryList.find('.J_categoryItem');
        data[name] = {
            ...this.allGoodsSwitch.getData(),
            ...this.searchSwitch.getData(),  
            defSearchWords:this.element.find('.J_hotSearchWordsArray').val(), 
            ...this.bgcolor.getData(), 
            ...this.fontColor.getData(), 
            naviCategoryList: []
        };
        items.each((index, item) => {
            data[name].naviCategoryList.push({
                name: $(item).find('.J_shopCategoryName').val(),
                categoryLink: $(item).data('category'),
            });
        });
    
        return data;
    }
}
export default MeShopNavigation;