import BaseFormControl from '../../baseFormControl';
import LinkTool from '../../../linkTool';
import {
    shopCategoryTpl,
    shopCategoryItemTpl,
} from './tpl';
import './style.scss';
import { getShopType } from '../../../../util/channelUtil';
class ShopCategory extends BaseFormControl {
    constructor(config) {
        super(config);
        this.config = $.extend(true, {}, config);
        this.render();
        this.bindEvent();
    }
    render() {
        const data = this.config.moduleData || [{
            naviCategoryList: [{
                name: '',
                categoryLink: {},
            }],
        }];
        this.appendFormControl(shopCategoryTpl);
        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', 'shopCategory'],
                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 data = {};
        const key = this.config.domData.name;
        const items = this.categoryList.find('.J_categoryItem');
        data[key] = {
            naviCategoryList: [],
        };
        items.each((index, item) => {
            data[key].naviCategoryList.push({
                name: $(item).find('.J_shopCategoryName').val(),
                categoryLink: $(item).data('category'),
            });
        });
        return data;
    }
}
export default ShopCategory;