import html2canvas from 'html2canvas'
import { message } from 'antd'

export default {
    namespace: 'dashboardDesigner',
    state: {
        originData: {
            code: null,
            name: '标题',
            items: [],
            description: '',
            thumbnail: '',
            groupCode: '',
            dirty: false
        },
        name: '标题',
        defaultLayout: { x: 0, y: 50, w: 12, h: 6, minW: 2, maxW: 12, minH: 0 },
        parameters: {
        },  //全局可用参数
        items: [],
        description: '',
        thumbnail: '',
        groupCode: '',
        dirty: false
    },
    
    reducers: {
        silentSetField(state, action) {
            const { name, value } = action;
            let obj = {};
            obj[name] = value;
            let newState = Object.assign({}, state, obj);
            return newState;
        },
        setField(state, action) {
            const { name, value } = action;
            let obj = {};
            obj[name] = value;
            let newState = Object.assign({}, state, obj);
            return Object.assign({}, newState, {dirty: true});
        },
        silentSetFields(state, action) {
            const { fields } = action;
            let obj = {};
            fields.map(f => (obj[f.name] = f.value));
            let newState = Object.assign({}, state, obj);
            return newState;
        },
        setFields(state, action) {
            const { fields } = action;
            let obj = {};
            fields.map(f => (obj[f.name] = f.value));
            let newState = Object.assign({}, state, obj);
            return Object.assign({}, newState, {dirty: true});
        },
        addCharts(state, action) {
            let { items, defaultLayout } = state;
            const { charts } = action;

            items = items.concat(charts.map(c => ({
                code: c.code,
                viewType: 'chart',
                name: c.name,
                layout: defaultLayout,
                chartCode: c.code
            })));
            return Object.assign({}, state, {items, dirty: true});
        },
        deleteItem(state, action) {
            let { items, dirty } = state;
            const { item } = action;
            let newItems = items.filter((i) => i.code !== item.code);
            dirty = items.length !== newItems.length;
            return { ...state, dirty: dirty, items: newItems };
        },
        addRichText(state, action) {
            let { items, defaultLayout } = state;
            items.push({
                code: Math.random(),
                viewType: 'richText',
                name: '',
                layout: defaultLayout
            });
            return Object.assign({}, state, {items, dirty: true});
        },
        changeLayout(state, action) {
            const { layout } = action;
            let { items, dirty } = state;
            const ly = ['x', 'y', 'w', 'h'];
            for(let i = 0; i < items.length; i++) {
                if(layout[i]) { // 非删除引起
                    for(let j = 0; j < ly.length; j ++) {
                        if(items[i].layout[ly[j]] !== layout[i][ly[j]]) {
                            dirty = true;
                            items[i].layout[ly[j]] = layout[i][ly[j]];
                        }
                    }
                }else { // 删除引起
                    dirty = true;
                }
            }
            return Object.assign({}, state, {items, dirty});
        },
        modifyItem(state, action) {
            let { fields, dirty } = action;
            let { items } = state;
            for(let i = 0; i < items.length; i++) {
                if(items[i].code === fields.code) {
                    for(let k in fields) {
                        items[i][k] = fields[k];
                        dirty = true;
                    }
                }
            }
            return Object.assign({}, state, {items, dirty});
        },
        reset(state, action) {
            let newState = Object.assign({}, state, state.originData);
            return Object.assign({}, newState);
        }
    },

    effects: {
        *saveWithThumbnail(action, {put, call}) {
            let thumbnail;
            yield call(async ()=> {
                try {
                    await html2canvas(document.getElementsByClassName('dashboard-content')[0]).then(
                        function(canvas){
                            thumbnail = canvas.toDataURL('image/png', 1.0);
                        }
                    )
                }catch (e) {
                    return null;
                }
            }); 
            try {
                yield put.resolve({ type: 'setField', name: 'thumbnail', value: thumbnail })
                yield put.resolve({ type: 'dashboard/remoteModify' })
            }catch (e){
                message.error('保存失败');
            }
        }
    },
    subscription: {

    },
};

