import Taro, {Component} from '@tarojs/taro';
import {View, Button} from '@tarojs/components';
import {SearchBar, FilterMenu, ProductList, PageTitle} from '../../components';
import {common as commonModel} from '../../models';
import {connect} from '@tarojs/redux';

import './index.scss';

@connect(({ filterMenu, filterData }) => ({
    filterMenu,
    filterData
}))

export default class SearchList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            searchBarClass: 'width-list',
            tabs: [
				{
					text: '推荐',
					type: 0
				},
				{
					text: '价格',
                    type: 'price'
				}
			],
            hasFilter: true,
            fixed: false,
            query: '',
            pageTitle: '',
			page: {},
			productList: {},
			stopLoading: {}
        };
    }

    componentDidMount() {
        let params = this.$router.params || {};
        let tabs = '';
        let obj = {
			page: {},
			productList: {},
			stopLoading: {}
        };
        let type = '';

        // 搜索商品
        if (params.query) {
            tabs = this.state.tabs;
            this.setState({
                query: params.query
            });
        } else {// 其他【系列|品牌|品类】
            type = params.series ? 5 : type;
            type = params.brand ? 4 : type;
            type = params.sort ? 3 : type;
            tabs = [{type: type}];

            this.setState({
                pageTitle: params.name
            });
        }

        // 初始化数据
        tabs.map(item => {
            if (item.type === 'price') {
                obj.page['s_t_desc'] = 1;
                obj.page['s_t_asc'] = 1;
                obj.stopLoading['s_t_desc'] = false;
                obj.stopLoading['s_t_asc'] = false;
                obj.productList['s_t_asc'] = [];
                obj.productList['s_t_desc'] = [];
            } else {
                obj.page[item.type] = 1;
                obj.productList[item.type] = [];
                obj.stopLoading[item.type] = false;
            }
        });

        obj.tabs = tabs;

		this.setState(obj, () => {
			this.getProductData();
		});
    }

    componentWillReceiveProps (nextProps) {
        let curType = nextProps.filterMenu.curType;
		let {productList} = this.state;
        if (productList[curType].length === 0) {
            this.getProductData(nextProps.filterMenu);
        }
    }

    onScroll(e) {
        if (e.detail.scrollTop > 72 && !this.state.isFixed) {
            this.setState({
                fixed: true
            });
		}
    }

    onScrolltoupper() {
        this.setState({
            fixed: false
        });
    }

    onScrollToLower() {
        let {filterMenu} = this.props;
		let {page} = this.state;
		let type = this.state.pageTitle ? this.state.tabs[0].type : filterMenu.curType;

        if (!this.state.stopLoading[type]) {
			this.setState({page: Object.assign(page, {[type]: page[type] + 1})}, () => {
				this.getProductData();
			});
        }
    }

    getProductData(obj) {
        let {filterMenu, filterData} = this.props;
        let {page, productList, stopLoading} = this.state;
        let order = '';
        obj = obj || filterMenu;
        order = obj.curType && obj.curType.toString().indexOf('s_t_') > -1 ? obj.curType : '';
        let type = this.state.pageTitle ? this.state.tabs[0].type : obj.curType;
        let params = {
            limit: 10,
            page: page[type]
        };

        if (order) {
            params.order = order;
        } else {
            params.type = order ? '' : type;
        }

        // 系列，品牌，品类
        if (this.state.pageTitle) {
            let urlParams = this.$router.params;

            delete urlParams.name;
            params = Object.assign(params, urlParams);
        }

        params = Object.assign(params, filterData);
        
        

		commonModel.search(params).then(ret => {
			if (ret && ret.code === 200) {
                let list = ret.data && ret.data.product_list || [];

                if (list.length === 0) {
					this.setState({
						stopLoading: Object.assign(stopLoading, {[type]: true})
					});
                } else {
					this.setState({
						productList: Object.assign(productList, {[type]: [...productList[type], ...list]})
					});
				}
			}
		})
    }
    
    onCancel() {
        Taro.navigateBack({
            delta: 1
        });
    }

    render() {
        let {filterMenu} = this.props;
        let {query, pageTitle, productList} = this.state;
        let type = this.state.pageTitle ? this.state.tabs[0].type : filterMenu.curType;

        return (
            <ScrollView
                className='search-list-page'
                scrollY
                scrollWithAnimation
                scrollTop='0'
                lowerThreshold='50'
                upperThreshold='72'
                onScrolltoupper={this.onScrolltoupper}
                onScrollToLower={this.onScrollToLower}
                onScroll={this.onScroll}>

                {
                    query &&
                    <View>
                        <View className="header">
                            <SearchBar classname={this.state.searchBarClass} value={query}></SearchBar>
                            <Button plain className="cancel-btn" onClick={this.onCancel}>取消</Button>
                        </View>
                        <View className={this.state.fixed ? 'fixed' : ''}>
                            <FilterMenu tabs={this.state.tabs} hasFilter={this.state.hasFilter} ></FilterMenu>
                        </View>
                    </View>
                }

                {
                    pageTitle &&
                    <PageTitle pageTitle={pageTitle} selfClass="pd"></PageTitle>
                }
                <ProductList list={productList[type]}></ProductList>
            </ScrollView>
        )
    }
}