import React, { PureComponent } from "react";
import { Icon, DatePicker, Input, Table, Pagination, Badge } from "antd";
import { connect } from "dva";
import { routerRedux } from "dva/router";
import moment from "moment";
import styles from "./index.less";
import BreadcrumbPackage from "@/components/BreadcrumbPackage/index";
import PageGrid from "@/components/PageGrid/index.js";
import Form from "@/components/Form/index.js";

class Announcement extends PureComponent {
  constructor(props) {
    super(props);
    this.searchConditions = {};
  }
  componentWillMount() {
    const { dispatch } = this.props;
    const additems = [
      {
        key: "/buyer/announcement",
        title: "公告列表"
      }
    ];
    dispatch({
      type: "global/additems",
      additems: additems
    });
    dispatch({
      type: "announcement/getAnnouncementClassifyData",
      payload: null
    });
    dispatch({
      type: "announcement/getAnnouncementTimeData",
      payload: null
    });
    // this.search();
  }
  // 查询公告详情
  getNoticeDetail(data) {
    const { dispatch } = this.props;
    // localStorage.setItem("id", data.id);
    dispatch(
      routerRedux.push({
        pathname: "/buyer/NoticeDetail",
        noticeId: data.id
      })
    );
  }
  search(page = 0, pageSize = 10) {
    const { dispatch } = this.props;
    const searchConditions = this.searchConditions || {};
    searchConditions.page = page ? page : 0;
    searchConditions.pageSize = pageSize ? pageSize : 10;
    // searchConditions.sort = "effectivedate,disabledate";
    searchConditions["search_EQ_statusCode"] = "2";
    dispatch({
      type: "announcement/getAnnouncementData",
      payload: searchConditions
    });
  }
  render() {
    const {
      announcementData,
      announcementTimeData,
      announcementClassifyData
    } = this.props;
    const checkIcon = record => {
      if (record.noticeTypeCode == "1") {
        return <Icon type="clock-circle-o" />;
      } else if (record.noticeTypeCode == "2") {
        return <Icon type="bell" />;
      }
      return <Icon type="bell" style={{ fontSize: 18, marginRight: 8 }} />;
    };
    const columns = [
      {
        title: "公告分类",
        dataIndex: "noticeTypeName",
        key: "noticeTypeName",
        width: "150px",
        className: 'paddingLeft-20 thPaddingLeft-25',
        render: (text, record) => (
          <span className={styles.hoverEvent}>{`【${text}】`}</span>
          // <div className={styles.noticeTypeIcon}>
          //   {checkIcon(record)}
          //   <span className={styles.hoverEvent}>{`【${text}】`}</span>
          // </div>
        )
      },
      {
        title: "公告标题",
        dataIndex: "title",
        key: "title",
        render: (text, record) => (
          <div>
            <Badge status={(record && record.isRead == "Y") ? "default" : "error"} />
            <span className={styles.title} style={{ marginLeft: 2 }}>{text}</span>
          </div>
        )
      },
      {
        title: "生效日期",
        dataIndex: "pubdate",
        key: "pubdata",
        width: "150px",
        render: text => (
          <span className={styles.dateFont}>
            {text ? moment(text).format("YYYY-MM-DD HH:mm") : ""}
          </span>
        )
      },
      {
        title: "失效日期",
        dataIndex: "disabledate",
        key: "disabledate",
        width: "150px",
        render: text => (
          <span className={styles.dateFont}>
            {text ? moment(text).format("YYYY-MM-DD HH:mm") : ""}
          </span>
        )
      }
    ];
    const searchAttrs = [
      {
        label: "公告分类",
        key: "bulletin.id",
        type: "select",
        refId: true,
        sourceData: announcementClassifyData || []
      },
      {
        label: "发布时间",
        key: "pubdate",
        type: "select",
        sourceData: announcementTimeData || []
      },
      {
        label: "发布日期",
        type: "comb",
        children: [
          {
            key: "pubdate",
            type: "daterange"
          },
          {
            key: "title",
            type: "inputSearch",
            placeholder: "请输入公告标题",
            enterButton: "搜索"
          }
        ]
      }
    ];
    return (
      <div className={styles.announcementListBox}>
        {/* <BreadcrumbPackage additems={BreadcrumbPaths} /> */}
        <div className={styles.searchConditions}>
          <Form
            searchAttrs={searchAttrs}
            setSearchParams={(value, ifSearch) => {
              this.searchConditions = value;
              if (ifSearch) {
                this.search();
              }
            }}
          />
        </div>
        <PageGrid
          columns={columns}
          pageGridSource={announcementData}
          search={this.search.bind(this)}
          onRow={this.getNoticeDetail.bind(this)}
        />
      </div>
    );
  }
}

export default connect(state => ({
  announcementData: state.announcement.announcementData,
  announcementClassifyData: state.announcement.announcementClassifyData,
  announcementTimeData: state.announcement.announcementTimeData
}))(Announcement);
