import './copyrightG-goods.css'
import {
  // Select, DatePicker, Button, 
  Table,
  // message,
  Space,
  Pagination,
  // InputNumber
  Spin,
  Modal,
  Image
} from 'antd';
import { useLocation } from 'react-router-dom';
import dayjs, { } from 'dayjs';
import { buyGoodsList } from '../../request/api'
// import type { InputNumberProps } from 'antd';
// 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 { useState, useEffect } from 'react';
import useMessage from "antd/es/message/useMessage";
const { Column } = Table;
export default function CopyrightGgoods() {
  const [messageApi, messageContext] = useMessage();
  const height = window.innerHeight - 180;
  const [goodsId, setGoodsId] = useState<any>() //商品ID
  const [goodsDetailModal, setGoodsDetailModal] = useState(false) //订单详情

  // const [messageApi, contextHolder] = message.useMessage();
  // const dateFormat = 'YYYY-MM-DD';
  // const [minPrice, setMinPrice] = useState<any>() //最低价格
  // const [maxPrice, setMaxPrice] = useState<any>() //最高价格
  // const [date, setDate] = useState<any>() //获取时间
  // const [sort, setSort] = useState<any>() //排序
  // const [language, setLanguage] = useState<any>() //开发语言
  // const [type, setType] = useState<any>() //软著类型
  const [page, setPage] = useState(1) //页
  const [total, setTotal] = useState(0) //总条数
  const [loading, setLoading] = useState(false) //加载中
  const { state } = useLocation()
  const copyrightKeywords = state ? state.copyrightKeywords : ''; // 版权关键字
  const minPrice = state ? state.minPrice : ''; // 最低价格
  const maxPrice = state ? state.maxPrice : ''; // 最高价格
  const sort = state ? state.sort : ''; // 排序
  const copyrightDate = state ? state.copyrightDate : ''; // 版权日期
  const copyrightLanguage = state ? state.copyrightLanguage : ''; // 开发语言
  const copyrightType = state ? state.copyrightType : ''; // 软著类型


  const [data, setData] = useState([]); // 表格数据
  const getBuyGoodsList = async (page: number) => {
    try {
      setLoading(true)
      const res: any = await buyGoodsList({
        page: page,
        rows: 10,
        keywords: copyrightKeywords ? copyrightKeywords : '', // 版权关键字
        priceRangeStart: minPrice ? minPrice : '', // 最低价格
        priceRangeEnd: maxPrice ? maxPrice : '', // 最高价格
        priceOrder: sort ? sort : '', // 排序
        goodsGetTime: copyrightDate ? dayjs(copyrightDate).year() : '', // 版权日期
        goodsDevelop: copyrightLanguage ? copyrightLanguage : '', // 开发语言
        goodsType: copyrightType ? copyrightType.join(',') : '', // 软著类型
      })
      console.log(res);

      setLoading(false)
      setPage(res.page)
      setData(res.rows)
      setTotal(res.total)
      setLoading(false)

    } catch (error: any) {

      if (error.response) {
        const data = error.response.data;
        messageApi.open({
          type: 'error',
          content: data.msg ? data.msg : `${data.path}(${data.status})`,
        });
      } else {
        console.error(error)
      }
    }
  }

  useEffect(() => {
    console.log('copyrightKeywords', copyrightKeywords);
    console.log('minPrice', minPrice);
    console.log('maxPrice', maxPrice);
    console.log('sort', sort);
    console.log('copyrightDate', copyrightDate);
    console.log('copyrightLanguage', copyrightLanguage);
    console.log('copyrightType', copyrightType);

    if (copyrightDate) {
      console.log('sellDate', dayjs(copyrightDate).year());
    }
    setPage(1)
    getBuyGoodsList(1)
  }, [state])

  return (
    <div className='copyrightG-goods' style={{ height: `${height}px`, overflow: 'auto' }}>
      {messageContext}
      {/* {contextHolder} */}
      <div className='copyrightG-goods-table'>
        {/* 表格 */}
        {/* {data.length == 0 ? (
          <div className='nodata' style={{ height: `${height - 93}px` }}>
            <Empty
              description={
                '暂无数据'
              } />
          </div>) : ( */}
        {/* <div> */}
        <Spin tip="正在加载..." size="small" spinning={loading}>
          <div style={{ height: `${height - 80}px` }}>

            <Table
              scroll={{ y: `${height - 150}px` }}
              dataSource={data}
              pagination={false} // 不显示分页
              style={{ textAlign: 'center' }} // 设置表格内容居中显示
              rowKey="goodsId" // 指定数据项的唯一标识符
              locale={{ emptyText: '暂无数据' }}
            >
              <Column
                width={70}
                title="序号" render={(_text, _record, index: number) => (
                  index + 1
                )} align="center" />
              <Column
                title="软著名称"
                dataIndex="goodsName"
                align="center"
                render={(text) => (
                  <span style={{ color: '#1B8BD2', fontSize: '16px', fontWeight: '700' }}>{text}</span>
                )}
              />
              {/* <Column
                title="软著简称"
                dataIndex="short"
                align="center"
              /> */}
              <Column
                title="软著证号"
                dataIndex="goodsNumber"
                align="center"
              // ellipsis
              />
              <Column title="售价" dataIndex="goodsOpenPrice" align="center"
                render={(text) => (
                  <span style={{ color: '#FF5D15', fontSize: '24px', fontWeight: '700' }}>{text}</span>
                )} />
              <Column title="软著版本" dataIndex="goodsVersion" align="center" />
              <Column title="软著取得时间" dataIndex="goodsGetTime" align="center" />
              <Column title="软著开发语言" dataIndex="goodsDevelop" align="center" />
              {/* <Column title="实名认证状态" dataIndex="address" key="key" /> */}
              <Column
                align="center"
                title="操作"
                render={(_text, record: any) => (
                  <Space size="middle">
                    <span className='copyrightG-goods-table-btn' onClick={() => {
                      // console.log(record.goodsId);
                      setGoodsId(record.goodsId)
                      setGoodsDetailModal(true)
                    }}>查看详情</span>
                  </Space>
                )}
              />
            </Table>

          </div>
        </Spin>
        {/* defaultCurrent: 默认当前页数  total:数据总数 defaultPageSize:'页面显示几条'  */}
        <div className='product-release-pagination' >
          <Pagination
            showSizeChanger={false}
            current={page} total={total} defaultPageSize={10} onChange={(page) => {
              console.log(page)
              setPage(page)
            }} />
        </div>
      </div>
      {/* )} */}
      <Modal
        title="著作权商品信息"
        okText="确认"
        cancelText="取消"
        destroyOnClose={true}
        footer={null}
        open={goodsDetailModal}
        // onOk={() => {
        //   setOrderDetailModal(false)
        // }}
        onCancel={() => {
          setGoodsDetailModal(false)
        }}
        width={1250}
        centered

      >
        商品详情{goodsId}
        <div className='goodsDetail'>
          <div className='goodsDetailImg'>
            <Image></Image>
          </div>
          <div className='goodsDetailInputBox'>

          </div>
        </div>
      </Modal>



    </div>
  )
}
