import Taro, {Component} from '@tarojs/taro';
import {View, Text, Image, Navigator} from '@tarojs/components';
import { connect } from '@tarojs/redux';
import { bindActionCreators } from 'redux';
import {changeType} from '../../actions/filterMenu';
import filterIcon from '../../static/images/filter.png';
import sort from '../../static/images/sort.png';
import sortUp from '../../static/images/sort-up.png';
import sortDown from '../../static/images/sort-down.png';
import './index.scss';
import router from '../../router/index';

@connect(({ filterMenu }) => {
    return {filterMenu}
}, (dispatch) => {
    return bindActionCreators({
        changeType
    }, dispatch);
})
export default class filterMenu extends Component {
    constructor(props) {
        super(props);

        this.state = {
            curOrder: ''
        };
	}
	
	static defaultProps = {
        tabs: [],
        hasFilter: false,
        tabClass: '',
    }

    componentWillMount() {
    }

    componentWillUnmount() {
      console.log('卸载');
      let { filterMenu } = this.props;
      let params = {
        indexType: filterMenu.indexType,
        curType: 0
      }
      this.props.changeType(params);
    }
    
    onChangeTab(item) {
        let {filterMenu, fromPage} = this.props;
        let order = '';
        let params = {}

        if (fromPage === 'search') {
          if (item === 'price') {
            order = this.state.curOrder === 'p_asc' ? 'p_desc' : 'p_asc';
            item = order;
            params.curType = item;
            params.indexType = filterMenu.indexType;
          } else {
            params.curType = item;
            params.indexType = filterMenu.indexType;
          }
        }

        if (fromPage === 'index') {
            if (item === filterMenu.indexType) {
                return;
            }
            params.indexType = item;
            params.curType = filterMenu.curType;
        }
        this.props.changeType(params);
        this.setState({
            curOrder: order
		    });
    }

    goToFilter() {
        let { screen } = this.props;
        router.go('filter', {
            ...screen
        });
    }

    render() {
        let {tabs, hasFilter, tabClass, filterMenu, fromPage} = this.props;
        let {curOrder} = this.state;
        let curType;
        if (fromPage === 'index') {
          curType = filterMenu.indexType;
        } else {
          curType = filterMenu.curType;
        }

        let sortImg = sort;

        if (curOrder === 'p_desc') {
          sortImg = sortDown;
        }

        if (curOrder === 'p_asc') {
          sortImg = sortUp;
        }

        curType = curType === curOrder ? 'price' : curType;

        return (
            <View className="tabs-nav">
              <View className="tabs">
                {
                  tabs.map(item => {
                    return (
                      <View key={item.type} className="tab-box" onClick={this.onChangeTab.bind(this, item.type)}>
                          <Text className={curType == item.type ? `actived tab-item ${tabClass}` : 'tab-item'}>{item.text}</Text>
                          {
                              item.type === 'price' && <Image src={sortImg} className="sort-icon"></Image>
                          }
                      </View>
                    )
                  })
                }
              </View>
              {
                  hasFilter &&
                  <View className="filter-btn" onClick={this.goToFilter}  hover-class="none">
                      <Image src={filterIcon} className="filter-icon"></Image>
                      <Text className="text">筛选</Text>
                  </View>
              }
            </View>
        )
    }
}