// import React from 'react'
import './transaction-order.css'
import {
  Select, DatePicker, Button, Table,
  //  message, 
  Space, Empty, Pagination,Modal
} from 'antd';
import dayjs, { } from 'dayjs';
// import type { TableColumnsType } from 'antd';
import { SearchOutlined, ClearOutlined } from '@ant-design/icons';
import type { DatePickerProps } from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN';
import { useEffect, useState } from 'react';
const { Column } = Table;
import OrderDetail from '../../components/OrderDetailModal/OrderDetailModal'
export default function TransactionOrder() {
  const height = window.innerHeight - 180;
  // const [messageApi, contextHolder] = message.useMessage();
  const dateFormat = 'YYYY年MM月DD日';
  const [startTime, setStartTime] = useState<any>(undefined)  // 开始时间
  const [endTime, setEndTime] = useState<any>(undefined)   // 结束时间
  const [orderStatus, setOrderStatus] = useState<any>(undefined) // 订单状态
  const [page, setPage] = useState(1)  //分页
  const [orderDetailModal, setOrderDetailModal] = useState(false) //订单详情弹窗
  // 更改开始时间
  const stratTimeChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
    setStartTime(date)
  };
  // 更改结束时间
  const endTimeChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
    setEndTime(date)
  };
  // 更改订单状态
  const orderStatusChange = (value: string) => {
    console.log(`selected ${value}`);
    setOrderStatus(value)
  }
  // 初始化搜索条件
  const init = () => {
    setStartTime(undefined)
    setEndTime(undefined)
    setOrderStatus(undefined)
  }
  // 点击清除
  const clearKeyWords = () => {
    setPage(1)
    init()
  }
  // 点击搜索
  const onSearch = () => {
    setPage(1)
    console.log(orderStatus, startTime, endTime);
    if (startTime) {
      console.log('开始时间', dayjs(startTime).format(dateFormat));
    }
  }
  interface DataType {
    index?: number
    order: string
    name: string
    price: string
    status: string
    time1: string
    time2: string
  }

  const data: DataType[] = [
    {

      order: '456789',
      name: 'xx系统',
      price: '5.00',
      status: '过户',
      time1: '2020-04-19 15：42:21',
      time2: '2020-04-19  15：42:21 ',
    },
    {

      order: '12646498484',
      name: 'xxxxxxxxxxxxx系统',
      price: '5.00',
      status: '过户',
      time1: '2020-04-19 15：42:21',
      time2: '2020-04-19  15：42:21 ',
    },
    {
      order: '9444984894',
      name: 'xx系统',
      price: '5.00',
      status: '过户',
      time1: '2020-04-19 15：42:21',
      time2: '2020-04-19  15：42:21 ',
    },
    {
      order: '94449848941',
      name: 'xx系统',
      price: '5.00',
      status: '过户',
      time1: '2020-04-19 15：42:21',
      time2: '2020-04-19  15：42:21 ',
    },
    {
      order: '94449848942',
      name: 'xx系统',
      price: '5.00',
      status: '过户',
      time1: '2020-04-19 15：42:21',
      time2: '2020-04-19  15：42:21 ',
    },
    {
      order: '94449848943',
      name: 'xx系统',
      price: '5.00',
      status: '过户',
      time1: '2020-04-19 15：42:21',
      time2: '2020-04-19  15：42:21 ',
    },
    {
      order: '94449848944',
      name: 'xx系统',
      price: '5.00',
      status: '过户',
      time1: '2020-04-19 15：42:21',
      time2: '2020-04-19  15：42:21 ',
    },
    {
      order: '94449848945',
      name: 'xx系统',
      price: '5.00',
      status: '过户',
      time1: '2020-04-19 15：42:21',
      time2: '2020-04-19  15：42:21 ',
    },
    {
      order: '94449848946',
      name: 'xx系统',
      price: '5.00',
      status: '过户',
      time1: '2020-04-19 15：42:21',
      time2: '2020-04-19  15：42:21 ',
    },
    {
      order: '94449848947',
      name: 'xx系统',
      price: '5.00',
      status: '过户',
      time1: '2020-04-19 15：42:21',
      time2: '2020-04-19  15：42:21 ',
    },


  ];

  useEffect(() => {
    // 获取数据
  }, [])

  return (
    <div className='transaction-order' style={{ height: `${height}px`, overflow: 'hidden' }}>
      {/* {contextHolder} */}
      <div className='transaction-order-search'>
        <DatePicker placeholder="开始时间"
          style={{ width: 198, height: 36, marginRight: 12 }}
          format={dateFormat}
          locale={locale}
          onChange={stratTimeChange}
          value={startTime}
        />
        <DatePicker placeholder="结束时间"
          style={{ width: 198, height: 36, marginRight: 12 }}
          format={dateFormat}
          locale={locale}
          onChange={endTimeChange}
          value={endTime}

        />
        <Select
          // defaultValue="lucy"
          placeholder='选择订单状态'
          style={{ width: 198, height: 36, marginRight: 12 }}
          onChange={orderStatusChange}
          options={[
            { value: 'person', label: '过户' },
            { value: 'lucy', label: '未过户' },
          ]}
          value={orderStatus}
        />
        <Button type="primary"
          style={{
            height: 36,
            // backgroundColor: '#FF9F08'
          }}
          onClick={onSearch}
          icon={<SearchOutlined />}>
          搜索
        </Button>
        <Button
          style={{
            height: 36,
            marginLeft: 10,
            // backgroundColor: '#FF9F08'
          }}
          icon={<ClearOutlined />}
          onClick={clearKeyWords}
        >
          清除
        </Button>
      </div>
      <div className='transaction-order-table'>
        {/* 表格 */}
        {data.length == 0 ? (<div className='nodata' style={{ height: `${height - 93}px` }}>
          <Empty
            description={
              '暂无数据'
            } />
        </div>) : (
          <div>
            <div style={{ height: `${height - 130}px` }}>
              <Table
                scroll={{ y: `${height - 190}px` }}
                // rowSelection={{
                //   type: 'checkbox',
                // }}
                dataSource={data}
                pagination={false} // 不显示分页
                style={{ textAlign: 'center' }} // 设置表格内容居中显示
                rowKey="order" // 指定数据项的唯一标识符
              >
                <Column title="序号"
                  width={70}
                  render={(_text, _record, index: number) => (
                    index + 1
                  )} align="center" />
                <Column
                  title="订单编号"
                  dataIndex="order"
                  align="center"
                />
                <Column
                  title="软著名称"
                  dataIndex="name"
                  align="center"
                  render={(text) => (
                    <span style={{ color: '#1B8BD2', fontSize: '16px', fontWeight: '700' }}>{text}</span>
                  )}
                />
                <Column title="订单价格" dataIndex="price" align="center"
                  render={(text) => (
                    <span style={{ color: '#FF5D15', fontSize: '24px', fontWeight: '700' }}>{text}</span>
                  )} />
                <Column title="订单状态" dataIndex="status" align="center" />
                <Column title="下单时间" dataIndex="time1" align="center" />
                <Column title="付款时间" dataIndex="time2" align="center" />
                {/* <Column title="实名认证状态" dataIndex="address" key="key" /> */}
                <Column
                  align="center"
                  title="操作"
                  render={(_text, record: any) => (
                    <Space size="middle">
                      <span className='transaction-order-table-btn' onClick={() => {
                        console.log(record.order);

                      }}>补充资料</span>
                      <span className='trading-goods-table-btn' onClick={() => {
                        console.log(record.order);
                        setOrderDetailModal(true)
                      }}>
                        订单详情
                      </span>
                    </Space>
                  )}
                />
              </Table>
            </div>
            {/* defaultCurrent: 默认当前页数  total:数据总数 defaultPageSize:'页面显示几条'  */}
            <div className='product-release-pagination' >
              <Pagination defaultCurrent={page} total={20} defaultPageSize={10} onChange={(page) => {
                console.log(page)
                setPage(page)
              }} />
            </div>
          </div>
        )}



      </div>
      <Modal
        title="订单详情"
        okText="确认"
        cancelText="取消"
        destroyOnClose={true}
        footer={null}
        open={orderDetailModal}
        // onOk={() => {
        //   setOrderDetailModal(false)
        // }}
        onCancel={() => {
          setOrderDetailModal(false)
        }}

        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          height: `${height}px`,
        }}>
        <OrderDetail></OrderDetail>
      </Modal>
    </div>
  )
}
