import React, { PureComponent } from "react";
import { connect } from "dva";
import { Link } from "dva/router";
import {
  Icon,
  Checkbox,
  Select,
  Input,
  DatePicker,
  Popover,
  Button,
  Pagination
} from "antd";
import iconfontStyles from "../../../iconfont/iconfont.css";
import styles from "./index.less";

class NoticeList extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      orderStatus: "", // 订单搜索状态
      orderDate: "", // 订单日期
      orderCode: "" // 订单号
    };
  }
  componentWillMount() {
    const { dispatch } = this.props;
    dispatch({
      type: "orderList/getOrderStatusData",
      payload: null
    });
    this.search();
  }
  // 分页搜索
  search(page = 0, pageSize = 10) {
    const { dispatch } = this.props;
    const { orderStatus, orderDate, orderCode } = this.state;
    const searchConditions = {};
    searchConditions.page = page ? page : 0;
    searchConditions.size = pageSize ? pageSize : 10;
    searchConditions[`search_EQ_orderDate`] = orderDate;
    searchConditions[`search_EQ_orderStatus`] = orderStatus;
    searchConditions[`search_EQ_orderCode`] = orderCode;
    dispatch({
      type: "orderList/getOrderListData",
      payload: searchConditions
    });
  }
  // 订单搜索状态改变
  statusChange(status) {
    this.setState({
      orderStatus: status
    });
  }
  // 订单日期改变
  orderDateChange(dates, dateStrings) {
    this.setState({
      orderDate: dateStrings
    });
  }
  // 订单号改变
  orderCodeChange(e) {
    e.preventDefault();
    this.setState({
      orderCode: e.target.value
    });
  }
  // 分页跳转
  paginationChange(page, pageSize) {
    this.search(page - 1, pageSize);
  }
  // 搜索
  searchHandle(value) {
    this.search();
  }
  render() {
    const { orderStatusData, pagination, orderListData } = this.props;
    const styleOrderStatus = {
      background: "#E14C46",
      borderRadius: 2,
      color: "#fff"
    };
    const orderStatusHtml = () => {
      if (!orderStatusData) return null;
      const html = orderStatusData.map(item => (
        <span
          className={styles.btn}
          key={item.name}
          onClick={this.statusChange.bind(this, item.code)}
          style={this.state.orderStatus == item.code ? styleOrderStatus : null}
        >
          {item.name}
        </span>
      ));
      html.unshift(
        <span
          className={styles.btn}
          onClick={this.statusChange.bind(this, "")}
          style={this.state.orderStatus == "" ? styleOrderStatus : null}
          key={1}
        >
          全部
        </span>
      );
      return html;
    };
    return (
      <div className={styles.orderListBox}>
        <div className={styles.classHead}>
          <span className={styles.nameIndex}>首页</span>
          <span className={styles.nameChild}>
            <Icon type="right" className={styles.nameIcon} />公告查询
          </span>
          <span className={styles.nameChild}>
            <Icon type="right" className={styles.nameIcon} />公告列表
          </span>
        </div>
        {/* 搜索 */}
        <div className={styles.searchConditions}>
          <div className={styles.searchItem}>
            <span className={styles.searchName}>公告分类: </span>
            <div className={styles.searchVal}>{orderStatusHtml()}</div>
          </div>
          <div className={styles.searchItem}>
            <span className={styles.searchName}>发布时间: </span>
            <div className={styles.searchVal}>
              <span
                className={styles.btn}
                style={{
                  background: "#E14C46",
                  borderRadius: 2,
                  color: "#fff"
                }}
              >
                全部
              </span>
              <span className={styles.btn}>近一周</span>
              <span className={styles.btn}>近一月</span>
              <span className={styles.btn}>近一年</span>
            </div>
          </div>
          <div className={styles.searchItem}>
            <span className={styles.searchName}>发布日期: </span>
            <div className={styles.searchVal}>
              <DatePicker.RangePicker
                className={styles.searchData}
                onChange={this.orderDateChange.bind(this)}
              />
              <div className={styles.searchBox}>
                <Input.Search
                  placeholder="公告标题/公告内容"
                  enterButton="搜索"
                  style={{ width: 280 }}
                  onChange={this.orderCodeChange.bind(this)}
                  value={this.state.orderCode}
                  onSearch={this.searchHandle.bind(this)}
                />
              </div>
            </div>
          </div>
        </div>
        {/* 搜索--end */}
        {/* 公告列表 */}
        <div className={styles.noticeListBox}>
          <div className={styles.headTitle}>
            <div className={styles.noticeClass}>公告分类</div>
            <div className={styles.noticeTitle}>公告标题</div>
            <div className={styles.noticeStartTime}>发布日期</div>
            <div className={styles.noticeEndTime}>失效日期</div>
          </div>
          <div className={styles.noticeList}>
            <div className={styles.noticeItem}>
              <div className={styles.noticeClassBox}>
                <i
                  className={`${styles.icon} ${
                    iconfontStyles["anticon-buyer"]
                  } ${iconfontStyles["anticon-xitong1"]}`}
                />【促销】
              </div>
              <div className={styles.noticeTitleBox}>公告分类11</div>
              <div className={styles.noticeStartTimeBox}>发布日期11</div>
              <div className={styles.noticeEndTimeBox}>失效日期11</div>
            </div>
            <div className={styles.noticeItem}>
              <div className={styles.noticeClassBox}>
                <i
                  className={`${styles.icon} ${
                    iconfontStyles["anticon-buyer"]
                  } ${iconfontStyles["anticon-xitong1"]}`}
                />【促销】
              </div>
              <div className={styles.noticeTitleBox}>公告分类11</div>
              <div className={styles.noticeStartTimeBox}>发布日期11</div>
              <div className={styles.noticeEndTimeBox}>失效日期11</div>
            </div>
            <div className={styles.noticeItem}>
              <div className={styles.noticeClassBox}>
                <i
                  className={`${styles.icon} ${
                    iconfontStyles["anticon-buyer"]
                  } ${iconfontStyles["anticon-xitong1"]}`}
                />【促销】
              </div>
              <div className={styles.noticeTitleBox}>公告分类11</div>
              <div className={styles.noticeStartTimeBox}>发布日期11</div>
              <div className={styles.noticeEndTimeBox}>失效日期11</div>
            </div>
            <div className={styles.noticeItem}>
              <div className={styles.noticeClassBox}>
                <i
                  className={`${styles.icon} ${
                    iconfontStyles["anticon-buyer"]
                  } ${iconfontStyles["anticon-xitong1"]}`}
                />【促销】
              </div>
              <div className={styles.noticeTitleBox}>公告分类11</div>
              <div className={styles.noticeStartTimeBox}>发布日期11</div>
              <div className={styles.noticeEndTimeBox}>失效日期11</div>
            </div>
          </div>
        </div>
        {/* 公告列表--end */}
        <div className={styles.pageBox}>
          <Pagination
            size="small"
            total={pagination ? pagination.total : 0}
            showSizeChanger
            showQuickJumper
            showTotal={this.showTotalFun}
            onChange={this.paginationChange.bind(this)}
          />
        </div>
      </div>
    );
  }
}
export default connect(state => ({
  orderStatusData: state.orderList.orderStatusData,
  orderListData: state.orderList.orderListData,
  pagination: state.orderList.pagination
}))(NoticeList);
