import { useState, useEffect } from 'react'
import nothingImg from '../../static/appimgs/nothing.png'
import { useLocation, useNavigate } from 'react-router-dom';
import { trademarkList } from '../../request/api'
import { showImage } from '../../request/request'
import { Modal } from 'antd';
import type { TableProps } from 'antd';
import {
  message, Spin,
  Pagination,
  Table, Image
} from 'antd';
export default function TrademarkMall() {
  const [modal, setModal] = useState(false)
  const [checkRemark, setCheckRemark] = useState('') //失败原因
  const [messageApi, contextHolder] = message.useMessage();
  const { state } = useLocation()
  const nav = useNavigate();
  const height = window.innerHeight - 180;
  const columns: TableProps<any>['columns'] = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: 'center',
      fixed: 'left',
      width: 90,
      render: (_text, _record, index) => (page - 1) * 10 + index + 1, // 显示序号，从1开始

    },

    {
      title: '服务类型',
      dataIndex: 'trademarkModeName',
      fixed: 'left',
      align: 'center',
      key: 'trademarkModeName',
      width: 150,
      ellipsis: {
        showTitle: true,
      },

    },

    {
      title: '类型/名称',
      fixed: 'left',
      dataIndex: 'trademarkName',
      key: 'trademarkName',
      align: 'center',
      ellipsis: {
        showTitle: true,
      },
      width: 200,
      render: (_text, record) => (
        <span>
          {record.trademarkType == 'text' ? '文字' : record.trademarkType == 'image' ? '图形' : record.trademarkType == 'text-image' ? '图文' : ''} <span style={{
            display: record.trademarkType == 'image' ? 'none' : 'unset',
          }}>
            <span style={{
              display: record.trademarkType == '' ? 'none' : 'unset',
            }}>/</span>
            {record.trademarkName}</span>
          {/* {record} */}
        </span>
      )

    },
    {
      title: '涉及类别',
      dataIndex: 'trademarkTypeDTOS',
      align: 'center',
      key: 'trademarkTypeDTOS',
      width: 150,
      ellipsis: {
        showTitle: true,
      },
      render: (trademarkTypeDTOS) => (
        // trademarkTypeDTOS.map(
        //   <div>

        //   </div>
        // )
        trademarkTypeDTOS.length > 0 ? (
          trademarkTypeDTOS.map((item: any) => {
            return (
              <div key={item.id} title={item.name}>
                第{item.code}类 : {item.name}
              </div>
            )

          })
        ) : '暂无'
      )

    },
    {
      title: '商标图样',
      dataIndex: 'trademarkPhoto',
      align: 'center',
      key: 'trademarkPhoto',
      width: 200,
      render: (text) => (

        text ? (
          <Image src={showImage(text, false)}
            height={100}
            style={{
              maxWidth: 200,
            }}
          >
          </Image>
        ) : '暂无'
      )
    },
    {
      title: '状态',
      dataIndex: 'trademarkStatus',
      align: 'center',
      key: 'trademarkStatus',
      width: 110,
      render: (text, record) => (
        <div>
          {text == '-1' ?
            <div style={{
              color: 'red',
              cursor: 'pointer',
            }}
              title='点击查看原因'
              onClick={() => {
                setCheckRemark(record.checkRemark)

                setModal(true)
                // console.log(record.checkRemark);
              }}
            >
              <div>审核未通过</div>
              <div>已退款</div>
              <div style={{
                fontSize: '12px',
              }}>(点击查看原因)</div>
            </div>
            : text == '0' ?
              <span
                style={{
                  color: 'skyblue',
                }}
              >待付款</span>
              : text == '1' ?
                <span
                  style={{
                    color: 'green',
                  }}
                >已付款</span>
                : text == '2' ?
                  <span
                    style={{
                      color: 'rgb(0, 127, 255)',
                    }}
                  >审核中</span>
                  : text == '3' ?
                    <span
                      style={{
                        color: 'rgb(136, 185, 233)',
                      }}
                    >提交至商标局</span>
                    : text == '4' ?
                      <span
                        style={{
                          color: 'rgb(136, 185, 233)',
                        }}
                      >不予受理</span>
                      : text == '5' ?
                        <span
                          style={{
                            color: 'rgb(136, 185, 233)',
                          }}
                        >已受理</span>
                        : text == '6' ?
                          <span
                            style={{
                              color: 'rgb(136, 185, 233)',
                            }}
                          >已发初审公告</span>
                          : text == '7' ?
                            <span
                              style={{
                                color: 'rgb(136, 185, 233)',
                              }}
                            >部分驳回</span>
                            : text == '8' ?
                              <span
                                style={{
                                  color: 'rgb(136, 185, 233)',
                                }}
                              >全部驳回</span>
                              : text == '9' ?
                                <span
                                  style={{
                                    color: 'rgb(136, 185, 233)',
                                  }}
                                >下证</span> : '未知'
          }
        </div>
      )
    },


    // {
    //   title: '申请人',
    //   // 使用数组形式访问嵌套对象属性
    //   dataIndex: ['trademarkUserDTO', 'name'],
    //   align: 'center',
    //   // 修改 key 保证唯一性
    //   key: 'trademarkUserDTOName',
    //   width: 150,
    //   render: (text) => (
    //     <span>
    //       {text || '-'}
    //     </span>
    //   )
    // },
    // // {
    // //   title: '申请人证件号',
    // //   dataIndex:  ['trademarkUserDTO', 'name'],
    // //   align: 'center',
    // //   key: 'appOrderId',
    // //   width: 150,
    // //   render: (text) => (
    // //     <span>
    // //       {text ? text : '未完善'}
    // //     </span>
    // //   )
    // // },
    // {
    //   title: '联系人',
    //   // 使用数组形式访问嵌套对象属性
    //   dataIndex: ['trademarkUserDTO', 'contactName'],
    //   align: 'center',
    //   // 修改 key 保证唯一性
    //   key: 'trademarkUserDTOContactName',
    //   width: 150,
    //   render: (text) => (
    //     <span>
    //       {text || '-'}
    //     </span>
    //   )
    // },
    {
      title: '操作',
      // dataIndex: 'contractManagementId',
      align: 'center',
      // key: 'appOrderId',
      width: 150,
      // bordeLeft: true,
      fixed: 'right',
      render: (record) => (


        <div style={{
          cursor: 'pointer',
          color: '#007FFF',
          display: record.trademarkModeName === '智能申请注册' ? 'unset' : 'none',

        }} onClick={() => {
          nav(`/trademark-ai-edit/${record.trademarkId}`, {
            // state: {
            //   trademarkMode: record.trademarkMode, //申请类型id
            //   trademarkModeName: record.trademarkModeName, //申请类型名称
            //   trademarkId: record.trademarkId, //商标id

            // }
          })
          // console.log(record.checkStatus);



        }}>{
            record.trademarkStatus == '2' || record.trademarkStatus == '3' ? '查看' : '编辑'
          }</div>


      )

    },
  ]
  const [data, setData] = useState<any>([])
  const [loading, setLoading] = useState(false)
  const [page, setPage] = useState(1)
  const [total, setTotal] = useState(0)
  const getTrademarkList = async (page: any) => {
    try {
      setLoading(true)
      setData([])
      const res: any = await trademarkList({
        keywords: state && state.keywords ? state.keywords : '',
        rows: 10,
        page: page
      })
      console.log('结果', res);
      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)
    }
  }
  // useEffect(() => {
  //   // console.log(state.keywords);
  //   getTrademarkList(1)
  //   // console.log(1);

  // }, [])
  useEffect(() => {
    // console.log(state.keywords);
    getTrademarkList(1)
  }, [state])

  return (
    <Spin tip="正在处理，请稍后..." size="small" spinning={loading}>
      <div className='appElectionBox' style={{ height: `${height}px`, overflow: 'auto' }}>
        {contextHolder}

        {data.length <= 0 ? (<div style={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>

          <img src={nothingImg} alt="" width={368} height={355} />
          <div style={{
            marginTop: 50,
            fontSize: 16,
            color: '#D0D0D0'
          }}>暂无数据</div>
        </div>) : (
          <div className='' >
            <div style={{
              height: `${height - 80}px`,
              // background: "pink" ,
              paddingTop: 20
            }}>

              <Table
                scroll={{ y: `${height - 150}px` }}
                dataSource={data}
                columns={columns}
                bordered
                // pagination={{
                //   defaultPageSize: 10, // 设置默认一页显示 5 条数据
                // }}
                pagination={false} // 不显示分页
                style={{ textAlign: 'center' }} // 设置表格内容居中显示
                rowKey="trademarkId" // 指定数据项的唯一标识符
                locale={{ emptyText: '暂无数据' }}
              ></Table>

            </div>
            <div className='product-release-pagination'>
              <Pagination
                showSizeChanger={false}
                current={page} total={total} defaultPageSize={10} onChange={(page) => {
                  setPage(page)
                  getTrademarkList(page)
                }} />
            </div>

          </div>
        )}
      </div>
      <Modal
        title="失败原因"
        centered
        open={modal}
        footer={null}
        onCancel={() => { setModal(false) }}

      >
        失败原因:{checkRemark}
      </Modal>
    </Spin>
  )
}