import React, { useState, useEffect } from "react";
// useState狀態鉤子，一個頁面能有很多裝填鉤子（當一個函式中處理多個鉤子是，只是把相同的鉤子合併一個，只執行一次）
// useContext()：共享狀態鉤子()
import React, { useState, useEffect } from "react";
import './index.less'
import { Input, DatePicker, Pagination } from 'antd';
const { RangePicker } = DatePicker;
const Product = () => {
  const [state, setState] = useState({
    total: 0,
    add: 0,
  })
  const [searchData, setSearchDate] = useState({
    stare_time: '',
    end_time: '',
    input_value: ''
  })
  const [page, setPage] = useState({
    current: 1,
    page_size: 15,
    total: 200,
  })
  const data = [
    {
      title: '2022年新鄉陸港中亞班列境外段鐵路運力2022年新鄉陸港中亞班列境外段鐵路運力2022年新鄉陸港中亞班列境外段鐵路運力2022年新鄉陸港中亞班列境外段鐵路運力',
      time: '2021-04-13',
      unit: '中國新聞網'
    },
    {
      title: '2022年新鄉陸港中亞班列境外段鐵路運力2022年新鄉陸港中亞班列境外段鐵路運力',
      time: '2021-04-13',
      unit: '中國新聞網'
    },
    {
      title: '2022年新鄉陸港中亞班列境外段鐵路運力2022年新鄉陸港中亞班列境外段鐵路運力',
      time: '2021-04-13',
      unit: '中國新聞網'
    },
    {
      title: '2022年新鄉陸港中亞班列境外段鐵路運力2022年新鄉陸港中亞班列境外段鐵路運力',
      time: '2021-04-13',
      unit: '中國新聞網'
    },
    {
      title: '2022年新鄉陸港中亞班列境外段鐵路運力2022年新鄉陸港中亞班列境外段鐵路運力',
      time: '2021-04-13',
      unit: '中國新聞網'
    },
  ]
  const [tableData, setTableData] = useState(data)
  const changeVal = e => {
    setSearchDate({
      ...searchData,
      input_value: e.target.value
    })
  }
  const changeDate = (value, dataString) => {
    setSearchDate({
      ...searchData,
      stare_time: dataString[0],
      end_time: dataString[1]
    })
  }
  const log = () => {
    console.log(state, searchData);
  }
  return <div className="product_box">
    {/* 左邊左邊 */}
  <div className="left">
    <div className="left_top">
      <p className="title">輿情總覽 (近15天)</p>
      <div className="left_top_bottom">
        <p className="img_1 common"></p>
        <p className="title_p1 common_size_title">{state.total}</p>
        <p className="common_size_1 title_p1_1">輿情總數（條）</p>
        <p className="img_2 common"></p>
        <p className="common_size_title title_p2">{state.add}</p>
        <p className="common_size_1 title_p1_2">昨日新增（條）</p>
      </div>
    </div>
    <div className="left_content">
      <p className="title">輿情態勢（近15天）</p>
      <span>數量</span>
      <div className="echarts_box"></div>
    </div>
    <div className="left_footer">
      <p className="title">輿情詞雲</p>
      <div className="main"></div>
    </div>
  </div>
  {/* 右邊佈局 */}
  <div className="right">
    <div className="top">
      <span>關鍵詞</span>
      <Input placeholder="請輸入關鍵詞" value={searchData.input_value} onChange={() => {changeVal(event)}} className='search_input'/>
      <span>釋出日期</span>
      <RangePicker format="YYYY-MM-DD" onChange={changeDate} placeholder={['開始時間', '結束時間']} className="date_box"/>
      <div className="btn" onClick={log}>搜尋</div>
    </div>
    <div className="table_box">
      <ul>
        {tableData.map((item, index) => {
          return <li key={index}>
            <p>{item.title}</p>
            <span>{item.time}</span>
            <span>{item.unit}</span>
          </li>
        })}
      </ul>
    </div>
    <div className="page_box">
      <p>為您找到 <span>910,278</span> 條相關結果</p>
      <Pagination defaultCurrent={page.current} showSizeChanger={false} total={page.total} />
    </div>
  </div>
</div>
}
export default Product