ttk-app-core/compatible/apps/edf/ttk-edf-app-list-search/action.js

enterprise develop framework

import React from 'react'
import { action as MetaAction, AppLoader } from 'edf-meta-engine'
import { fromJS } from 'immutable'
import config from './config'
import { Tag } from 'edf-component'

class action {
    constructor(option) {
        this.metaAction = option.metaAction
        this.config = config.current
    }

    
    onInit = ({ component, injections }) => {
        this.component = component
        this.injections = injections
        injections.reduce('init')
        this.filterData()
    }

    btnClick = () => {
        this.injections.reduce('modifyContent')
    }

    searchChange = (value) => {
        console.log(value)
        this.filterData(value)
    }

    filterData = (value) => {
        const listData = this.metaAction.gf('data.listData').toJS()
        if( !value ){
            return this.metaAction.sf('data.list', fromJS(listData))
        }
        const arr = listData.filter(item => {
            return item.title.toLowerCase().includes(value.toLowerCase()) || item.content.toLowerCase().includes(value.toLowerCase())
        })

        return this.metaAction.sf('data.list', fromJS(arr))
    }

    renderFilter1 = (filter) => {
        const data = [1,2,3,4,5,6,7]
        const arr = []
        data.forEach(item => {
            arr.push(
                <Tag.CheckableTag  onChange={()=>this.handleFilter(item)} checked={filter.includes(item)} key={item}>
                    类目{item}
                </Tag.CheckableTag >
            )
        })
        return arr
    }

    renderFilter2 = (filter) => {
        const data = ['a', 'b', 'c', 'd', 'e', 'f', 'g']
        const arr = []
        data.forEach(item => {
            arr.push(
                <Tag.CheckableTag  onChange={()=>this.handleFilter(item)} checked={filter.includes(item)} key={item}>
                    类目{item}
                </Tag.CheckableTag >
            )
        })
        return arr
    }

    handleFilter = (key) => {
        let filter = this.metaAction.gf('data.filter').toJS()
        if( filter.includes(key) ){
            filter = filter.filter(item => item != key)
        }else{
            filter.push(key)
        }
        this.metaAction.sf('data.filter', fromJS(filter))
    }

    changeTagtoFilter = (filter, data) => {
        if( filter.length == 0 ){
            return data
        }
        const arr = data.filter(item => {
            let flag = false
            item.member.forEach(index => {
                if( filter.includes(index) ){
                    flag = true
                    
                }
            })
            return flag
        })
        console.log(arr)
        return arr
    }

    renderContent = () => {
        const filter = this.metaAction.gf('data.filter').toJS()
        const list = this.metaAction.gf('data.list').toJS()
        const data = this.changeTagtoFilter(filter, list)
        const arr = []
        data.forEach(item => {
            arr.push(
                <div className="ttk-edf-app-list-search-container-content-item">
                    <div className="ttk-edf-app-list-search-container-content-item-img">
                        <span>有图{item.title}</span>
                    </div>
                    <div className="ttk-edf-app-list-search-container-content-item-detail">
                        <h3>{item.title}</h3>
                        <p>{item.content}</p>
                        <div className="ttk-edf-app-list-search-container-content-item-detail-footer">
                            <div>{item.time}</div>
                            <div>
                                <span>分类：</span>
                                <em>{item.member.join(',')}</em>
                            </div>
                        </div>
                    </div>
                </div>
            )
        })
        return arr
    }
}

export default function creator(option) {
    const metaAction = new MetaAction(option),
        o = new action({ ...option, metaAction }),
        ret = { ...metaAction, ...o }

    metaAction.config({ metaHandlers: ret })

    return ret
}