import React, { Component } from 'react';
import { apiList, getUrlParam } from '../utils';
import axios from 'axios';
import IceEvents from '@ali/ice-events';
import IceContainer from '@icedesign/container';
import CollectListView from './CollectListView';

export const page = true;

@IceEvents
export default class CollectListPage extends Component {
  constructor(props) {
    super(props);

    const type = getUrlParam('type') || 'ice';

    this.personal = props.router.location.pathname === '/collection/mine';
    this.baseComponent = type === 'all' ? '' : type;
    this.pageSize = 20;

    this.state = {
      isLoading: true,
      error: false,
      list: [],
      pageIndex: 1,
      totalCount: 0,
      queryKeywords: '',
      queryStatus: type === 'ice' && !this.personal ? 'confirmed' : 'all',
      editFormData: null,
    };

    // query 发生变化后重新获取数据
    this.on('collect:queryChange', (queryKey, queryValue) => {
      let newQuery = {};

      if (queryKey === 'pageIndex') {
        newQuery = { pageIndex: queryValue };
      } else if (queryKey === 'status') {
        newQuery = {
          queryKeywords: '',
          queryStatus: queryValue,
          pageIndex: 1,
        };
      } else if (queryKey === 'keywords') {
        newQuery = {
          queryKeywords: queryValue,
          pageIndex: 1,
        };
      }

      this.setState(newQuery, () => {
        this.fetchCollectList();
      });
    });

    // 改变弹窗状态
    this.on('collect:edit', (editFormData) => {
      this.setState({
        editFormData,
      });
    });

    // 刷新整个 list
    this.on('collect:refreshList', () => {
      this.setState({
        editFormData: null,
      });
      this.fetchCollectList();
    });
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.route.path !== this.props.route.path) {
      this.personal = nextProps.router.location.pathname === '/collection/mine';
      this.emit('collect:refreshList');
    }
    // if (this.props.router)
  }

  componentDidMount() {
    this.fetchCollectList();
  }

  /**
   * 获取数据列表
   */
  fetchCollectList = () => {
    const { queryStatus, queryKeywords, pageIndex } = this.state;

    this.setState({
      isLoading: true,
      error: null,
    });

    axios
      .get(apiList.getCollectList, {
        params: {
          pageIndex: pageIndex,
          pageSize: this.pageSize,
          personal: this.personal,
          baseComponent: this.baseComponent,
          filterKeywords: queryKeywords,
          status: queryStatus,
        },
      })
      .then((response) => {
        const { data } = response;
        this.setState({
          isLoading: false,
          list: data.list,
          pageIndex: pageIndex,
          totalCount: data.totalCount,
        });
      })
      .catch((err) => {
        this.setState({
          error: err,
          isLoading: false,
        });
      });
  };

  render() {
    return (
      <IceContainer style={{ padding: '25px 40px' }}>
        <CollectListView
          {...this.state}
          pageSize={this.pageSize}
          baseComponent={this.baseComponent}
        />
      </IceContainer>
    );
  }
}