import './copyrightG-goods.css'
import {
  // Select, DatePicker, Button, 
  // Table,
  // message,
  // Space,
  Pagination,
  // InputNumber
  Spin,
  Modal,
  Empty,
  Image,
  // Button,
  // Input
} from 'antd';

// import { showImage } from '../../request/request'
import AiShopDetail from '../../components/AiShopDetail/AiShopDetail'
import { useLocation } from 'react-router-dom';
import { showImage } from '../../request/request'
import dayjs, { } from 'dayjs';
import {
  buyGoodsList,
  //  goodsDetail,
  // createOrder, confirmPayment
  getSoftTypeList
} 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;
// const { TextArea } = Input;
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 [buyTipsModal, setBuyTipsModal] = 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 [payLoading, setPayLoading] = 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 confirmPaymentFun = async (orderId: string) => {
  //   try {
  //     // setLoading(true)
  //     const res: any = await confirmPayment(orderId)
  //     console.log(res);
  //     // 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)
  //     }
  //   }
  // }
  // 创建订单
  // const createOrderFun = async (goodsId: string) => {
  //   try {
  //     // setPayLoading(true)
  //     const res: any = await createOrder(goodsId)
  //     // console.log(res);
  //     confirmPaymentFun(res.data)

  //   } 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)
  //     }
  //   }
  // }
  const [selectTypeArray, setSelectTypeArray] = useState<any>([]) // 选择的软著类型

  const getBuyGoodsList = async (page: number) => {
    try {
      setLoading(true)
      const res: any = await buyGoodsList({
        page: page,
        rows: 20,
        keywords: copyrightKeywords ? copyrightKeywords : '', // 版权关键字
        priceRangeStart: minPrice ? minPrice : '', // 最低价格
        priceRangeEnd: maxPrice ? maxPrice : '', // 最高价格
        priceOrder: sort ? sort : '', // 排序
        goodsGetTime: copyrightDate ? dayjs(copyrightDate).year() : '', // 版权日期
        goodsDevelop: copyrightLanguage ? copyrightLanguage : '', // 开发语言
        // goodsType: copyrightType ? copyrightType.join(',') : '', // 软著类型
        goodsType: selectTypeArray.length > 0 ? selectTypeArray.join(',') : '',

      })
      // console.log(res);

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

    } catch (error: any) {
      // setLoading(false)
      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)
      }
    } finally {
      setLoading(false)
    }
  }
  const [softTypeList, setSoftTypeList] = useState<any>([]) // 软著类型列表
  // 获取软著类型列表
  const getSoftTypeListDate = async () => {
    try {
      const res: any = await getSoftTypeList()
      // console.log('软著类型列表', res);
      // setSoftTypeList(res.map((item: any) => {
      //     return {
      //         value: item.dataId,
      //         label: item.dataName,
      //     }
      // }))
      setSoftTypeList(res)
    } 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)
      }
    }
  }
  // const [goodsDetailData, setGoodsDetailData] = useState<any>({}) // 商品详情数据
  // const getGoodsDetail = async (goodsId: string) => {
  //   try {
  //     setLoading(true)
  //     const res: any = await goodsDetail(goodsId)
  //     // console.log(res);
  //     setGoodsId(res.goodsId)
  //     setGoodsDetailData(res)
  //     setLoading(false)
  //   } catch (error: any) {
  //     // setLoading(false)
  //     if (error.response) {
  //       const data = error.response.data;
  //       messageApi.open({
  //         type: 'error',
  //         content: data.msg ? data.msg : `${data.path}(${data.status})`,
  //       });
  //     }
  //   } finally {
  //     setLoading(false)
  //   }
  // }
  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])
  useEffect(() => {
    getSoftTypeListDate()
  }, [])
  useEffect(() => {
    getBuyGoodsList(page)
  }, [page, selectTypeArray])

  return (

    <div className='copyrightG-goods' style={{ height: `${height}px`, overflow: 'auto' }}>
      {messageContext}
      {/* {contextHolder} */}
      <div className='copyrightG-goods-table'>
        {/* 表格 */}
        <Spin tip="正在加载..." size="small" spinning={loading}>
          <div style={{ height: `${height - 80}px`, overflow: 'auto', position: 'relative' }}>
            <div className='goodsTypeArrayBox'>
              <div className='goodsTypeTitle'>软著类型 : </div>
              <div className='goodsTypeArray'>
                {softTypeList.map((item: any) => {
                  return (
                    <div className='typeName'
                      key={item.dataId}
                      style={{
                        color: selectTypeArray.includes(item.dataId) ? '#E73B3B' : '#707070',
                      }}
                      onClick={() => {
                        if (selectTypeArray.includes(item.dataId)) {
                          setSelectTypeArray(selectTypeArray.filter((typeId: any) => typeId !== item.dataId))
                        } else {
                          setSelectTypeArray([...selectTypeArray, item.dataId])
                        }
                      }}
                    >
                      {item.dataName}
                    </div>
                  )
                })}

              </div>
            </div>
            {data.length <= 0 ? (
              <div className='nodata' style={{ height: `${height - 93}px` }}>
                <Empty
                  description={
                    '暂无数据'
                  } />
              </div>) : (
              <div className='showGoodsBox'>
                {data.map((item: any) => {
                  return (
                    <div className='goodSBox rightgoods' key={item.goodsId} style={{
                      height: 300,
                      cursor: 'pointer',
                    }}
                      onClick={() => {
                        setGoodsDetailModal(true)

                        setGoodsId(item.goodsId)
                      }}
                    >


                      <div className='goodsImg'>
                        <Image src={showImage(item.goodsPhoto, false)} width={'100%'}
                          preview={false}
                          style={{ maxWidth: '100%' }}
                        ></Image>
                      </div>
                      <div className='goodsBot'>
                        <div className='goodsPrice'>
                          <div>
                            <span style={{
                              fontSize: 20,
                            }}>￥</span>
                            <span>{item.goodsPrice}</span>
                          </div>


                        </div>
                        <div className='goodsNameBox'>
                          <div className='tipsPrice'>特价</div>
                          <div className='goodsName' title={item.goodsName}>{item.goodsName}</div>
                        </div>
                        <div className='goodsTime'>
                          截止日期 : {item.goodsLastTime}
                        </div>
                        {/* <div className='goodsBtnBox'>
                            <Button className='goodsBtn' style={{
                              display: item.goodsStatus == '1' ? 'none' : 'unset'
                            }}
                              onClick={() => {
                                edit(item)
                              }}>编辑</Button>
                            <Button className='goodsBtn' type="primary" style={{
                              display: item.goodsCheckStatus == '1' || item.goodsCheckStatus == '2' ? 'none' : 'unset'
                            }} onClick={() => submit(item)}>提交审核</Button>
                            <Button className='goodsBtn' type="primary" style={{
                              display: item.goodsStatus == '0' && item.goodsCheckStatus == '2' ? 'unset' : 'none'
                            }} onClick={() => sell(item)}>上架</Button>
                            <Button className='goodsBtn' type="primary" style={{
                              display: item.goodsStatus == '0' || item.goodsOrderStatus == '1' ? 'none' : 'unset'
                            }}
                              onClick={() => off(item)}>下架</Button>
                            <div className='goodsBtnIng' style={{
                              display: item.goodsOrderStatus == '1' ? 'unset' : 'none'
                            }}>
                              正在交易中...
                            </div>
                          </div> */}
                      </div>
                    </div>
                  )
                })}

                {/* <div className='goodSBox'>
                    <div className='goodsImg'>

                    </div>
                    <div className='goodsBot'>
                      <div className='goodsPrice'>
                        <span style={{
                          fontSize: 20,
                        }}>￥</span>
                        <span>299</span>
                      </div>
                      <div className='goodsNameBox'>
                        <div className='tipsPrice'>特价</div>
                        <div className='goodsName' title='智能化接口处理系统'>智能化接口处理系统</div>
                      </div>
                      <div className='goodsTime'>
                        2025-05-12
                      </div>
                      <div className='goodsBtnBox'>
                        <div className='goodsBtn'>编辑</div>
                        <div className='goodsBtn'>提交审核</div>
                      </div>
                    </div>
                  </div> */}

              </div>
            )
            }
          </div>
          {/* {data.length == 0 ? (
          <div className='nodata' style={{ height: `${height - 93}px` }}>
            <Empty
              description={
                '暂无数据'
              } />
          </div>) : ( */}
        </Spin>
        {/* <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) => (
                  (page - 1) * 10 + 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="goodsNumber"
                align="center"
        
              />
              <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
                align="center"
                title="操作"
                render={(_text, record: any) => (
                  <Space size="middle">
                    <span className='copyrightG-goods-table-btn' onClick={() => {
                      setGoodsDetailModal(true)
                  
                      setGoodsId(record.goodsId)
                    }}>查看详情</span>
                  </Space>
                )}
              />
            </Table>

          </div>
        </Spin> */}
        {/* defaultCurrent: 默认当前页数  total:数据总数 defaultPageSize:'页面显示几条'  */}
        <div className='product-release-pagination' >
          <Pagination
            showSizeChanger={false}
            current={page} total={total} defaultPageSize={20} 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={700}
        centered
      >
        {/* <Spin tip="正在加载..." size="small" spinning={loading}>
          <div className='goodsDetail'>
            <div className='goodsDetailImg' style={{
              position: 'relative',
            }}>
              <Image src={showImage(goodsDetailData.goodsPhoto, false)} preview={{
                mask: '查看', // 设置点击放大时显示的文字
              }}
                height={'100%'}
                style={{ maxWidth: '100%' }}
              ></Image>
              <div style={{
                position: 'absolute',
                bottom: '3px',
                left: '265px',
                color: 'rgb(160, 160, 160)',
                // backgroundColor: 'rgba(0, 0, 0, 0.5)', // 半透明背景色
              }}>点击查看</div>
            </div>
            <div className='goodsDetailInputBox'>
              <div className='detailBox'>
                <div className='detailBoxTitle'>软著名称</div>
                <Input value={goodsDetailData.goodsName} style={{
                  // height: '40px',
                  color: 'black',

                }} disabled></Input>
              </div>

              <div style={{
                display: 'flex',
                justifyContent: 'space-between',
              }}>
                <div className='detailBox'>
                  <div className='detailBoxTitle'>软著简称</div>
                  <Input value={goodsDetailData.goodsSubName} style={{
                    // height: '40px',
                    color: 'black',

                  }} disabled></Input>
                </div>
                <div className='detailBox detailBoxRight'>
                  <div className='detailBoxTitle'>软著证号</div>
                  <Input value={goodsDetailData.goodsNumber} style={{
                    // height: '40px',
                    color: 'black',

                  }} disabled></Input>
                </div>
              </div>

              <div style={{
                display: 'flex',
                justifyContent: 'space-between',
              }}>
                <div className='detailBox'>
                  <div className='detailBoxTitle'>软著版本</div>
                  <Input value={goodsDetailData.goodsVersion} style={{
                    // height: '40px',
                    color: 'black',

                  }} disabled></Input>
                </div>
                <div className='detailBox'>
                  <div className='detailBoxTitle detailBoxRight'>取得时间</div>
                  <Input value={goodsDetailData.goodsGetTime} style={{
                    // height: '40px',
                    color: 'black',

                  }} disabled></Input>
                </div>
              </div>

              <div style={{
                display: 'flex',
                justifyContent: 'space-between',
              }}>
                <div className='detailBox'>
                  <div className='detailBoxTitle'>开发语言</div>
                  <Input value={goodsDetailData.goodsDevelop} style={{
                    // height: '40px',
                    color: 'black',

                  }} disabled></Input>
                </div>
                <div className='detailBox'>
                  <div className='detailBoxTitle detailBoxRight'>取得方式</div>
                  <Input value={goodsDetailData.goodsGetType} style={{
                    // height: '40px',
                    color: 'black',

                  }} disabled></Input>
                </div>
              </div>

              <div style={{
                display: 'flex',
                justifyContent: 'space-between',
              }}>
                <div className='detailBox'>
                  <div className='detailBoxTitle'>售卖价格</div>
                  <Input value={goodsDetailData.goodsOpenPrice} style={{
                    // height: '40px',
                    color: 'black',

                  }} disabled></Input>
                </div>
                <div className='detailBox'>
                  <div className='detailBoxTitle detailBoxRight'>上架时间</div>
                  <Input value={goodsDetailData.goodsStatusTime} style={{
                    // height: '40px',
                    color: 'black',

                  }} disabled></Input>
                </div>
              </div>


              <div className='detailBoxText'>
                <div className='detailBoxTitle'>软著详情</div>
                <TextArea
                  disabled
                  style={{
                    width: '100%',
                    // width: 1100,
                    height: 150,
                    fontSize: 16,
                    color: "#5C5C5C",
                    resize: 'none',
                    background: '#F5F5F9'
                  }} value={goodsDetailData.goodsDescription}></TextArea>
              </div>


            </div>
          </div>
          <div style={{
            display: 'flex',
            justifyContent: 'center',
            marginTop: 20
          }}>
            <Button style={{
              marginRight: 20,
              fontSize: 16,
              color: '#7C7C7C ',
              background: '#E9E9E9',
              fontWeight: '700',
              height: 40,
              width: 100,

            }}
              onClick={() => {
                setGoodsDetailModal(false)
              }}

            >返回</Button>
            <Button style={{
              fontSize: 16,
              // color: '#FFFFFF',
              // background: '#FFA800',
              fontWeight: '700',
              height: 40,
              width: 100,

            }}
              type="primary"
              onClick={() => {
                setBuyTipsModal(true)
              }}
            >购买</Button>
          </div>
        </Spin> */}
        <AiShopDetail goodsId={goodsId} closeModal={() => {
          setGoodsDetailModal(false)
        }}
          upData={() => {
            getBuyGoodsList(page)
          }}
        ></AiShopDetail>
      </Modal>


      {/* <Modal
        title="提示"
        okText="确认"
        cancelText="取消"
        destroyOnClose={true}
        open={buyTipsModal}
        onCancel={() => {
          setBuyTipsModal(false)
        }}
        onOk={() => {
          // alert(goodsId)
          createOrderFun(goodsId)
        }}
        // width={1200}
        centered
      >
        确定购买该商品吗？
      </Modal> */}


    </div>
  )
}