system-copyright-react/src/route/ProductRelease/ProductRelease.tsx

// import React from 'react'
import './product-release.css'
import {
  Select, DatePicker, Button,
  // message,
  Checkbox, Empty, Switch, Modal
} from 'antd';
import EditModal from './components/EditModal/EditModal'
// import type { CheckboxProps } 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 React, { useState } from 'react';
import dayjs, { } from 'dayjs';
export default function ProductRelease() {
  const height = window.innerHeight - 180;
  // const [messageApi, contextHolder] = message.useMessage();
  const dateFormat = 'YYYY年MM月DD日';
  // 所属人类型
  const [belongType, setBelongType] = useState<any>(undefined)
  const belongTypeChange = (value: string) => {
    console.log(`selected ${value}`);
    setBelongType(value)
  }
  // 选择日期
  const [date, setDate] = useState<any>(undefined)
  const onChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
    setDate(date)
    // dayjs(formInfo.getFieldValue('projDevCompleteDate')).format(dateFormat),
    console.log('日期', dayjs(date).format(dateFormat));

  };

  // 初始化搜索条件
  const init = () => {
    setBelongType(undefined)
    setDate(undefined)
  }
  // 点击清除
  const clearKeyWords = () => {
    init()
    // 重新获取数据
  }
  // 选框选择时触发事件
  const checkChange = (e: any, item: any) => {
    console.log(`checked = ${e.target.checked}`);
    console.log(e);
    if (e.target.checked == true) {
      console.log(item.order);
    }
  };
  // 开关滑动触发
  const opneChange = (e: any, item: any) => {
    // 开启
    if (e) {
      console.log('开启', item.order);
      // 关闭
    } else {
      console.log('关闭', item.order);
    }
  }
  // 控制编辑弹窗
  const [editModalOpen, setEditModalOpen] = useState(false)
  // 点击编辑
  const edit = (item: any) => {
    console.log(item.order);
    setEditModalOpen(true)
  };
  // 控制删除弹窗
  const [delModalOpen, setDelModalOpen] = useState(false)
  // 点击删除
  const del = (item: any) => {
    console.log(item.order);
    setDelModalOpen(true)
  };
  // 删除点击确认

  // 控制出售弹窗
  const [sellModalOpen, setSellModalOpen] = useState(false)
  // 点击出售
  const sell = (item: any) => {
    console.log(item.order);
    setSellModalOpen(true)
  };
  // 点击提交
  const submit = (item: any) => {
    console.log(item.order);
  };
  const data: any = [
    {
      order: '122',
      time1: '2020-04-19 11:51:03',
      img: 'xxx',
      name: 'xxxx系统',
      v: '1-1-v',
      price: '5.00',
      time2: '2020-04-19 11:51:03',
      open: '0',
      status: '平台已审核',
    },
    {
      order: '123',
      time1: '2020-04-19 11:51:03',
      img: 'xxx',
      name: 'xxxx系统',

      v: '1-1-v',
      price: '5.00',
      time2: '2020-04-19 11:51:03',
      open: '1',
      status: '平台已审核',
    },
    {
      order: '121',
      time1: '2020-04-19 11:51:03',
      img: 'xxx',
      name: 'xxxx系统',
      v: '1-1-v',
      price: '5.00',
      time2: '2020-04-19 11:51:03',
      open: '0',
      status: '平台已审核',
    },
  ];



  return (
    <div className='product-release' style={{ height: `${height}px`, overflow: 'auto' }}>
      {/* {contextHolder} */}
      <div className='product-release-search'>
        <Select
          // defaultValue="lucy"
          placeholder='请选择所属者类型'
          style={{ width: 198, height: 36, marginRight: 12 }}
          onChange={belongTypeChange}
          options={[
            { value: 'person', label: '个人' },
            { value: 'lucy', label: '企业' },
          ]}
          value={belongType}
        />
        <DatePicker placeholder="软件取得时间"
          style={{ width: 198, height: 36, marginRight: 12 }}
          locale={locale}
          onChange={onChange}
          value={date}
        />
        <Select
          // defaultValue="lucy"
          placeholder='请选择所开发者语言'
          style={{ width: 198, height: 36, marginRight: 12 }}
          onChange={belongTypeChange}
          options={[
            { value: 'person', label: '123' },
            { value: 'lucy', label: '123' },
          ]}
        />
        <Select
          // defaultValue="lucy"
          placeholder='请选择软著类型'
          style={{ width: 198, height: 36, marginRight: 12 }}
          onChange={belongTypeChange}
          options={[
            { value: 'person', label: '1' },
            { value: 'lucy', label: '2' },
          ]}
        />
        <Button type="primary"
          style={{
            height: 36,
            // backgroundColor: '#FF9F08'
          }}

          icon={<SearchOutlined />}>
          搜索
        </Button>
        <Button
          style={{
            height: 36,
            marginLeft: 10,
            // backgroundColor: '#FF9F08'
          }}
          icon={<ClearOutlined />}
          onClick={clearKeyWords}
          >
          清除
        </Button>
      </div>
      <div>
        {/* 表格 */}
        <div className='product-release-table'>
          {data.length == 0 ? (
            <div className='nodata' style={{ height: `${height - 93}px` }}>
              <Empty
                description={
                  '暂无数据'
                } />
            </div>) : (
            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
              <thead>
                <tr style={{ background: '#F7F7F7', height: 32, fontSize: 14 }}>
                  <th style={{ width: 50 }}>序号</th>
                  <th style={{ width: 110 }}></th>
                  <th>软著名称</th>
                  <th>软著版本</th>
                  <th>售卖价格</th>
                  <th>截止售卖时间</th>
                  <th>著作权上架</th>
                  <th>平台审核</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody style={{ color: '#888888' }}>
                {data.map((item: any, index: any) => {
                  return (
                    <React.Fragment key={item.order}>
                      <tr style={{ height: 15 }}>
                        <td colSpan={9} style={{ border: 'none' }}>

                        </td>
                      </tr>
                      <tr style={{ background: '#F7F7F7', height: 45 }}>
                        <td colSpan={9}>
                          <Checkbox style={{ marginLeft: 16 }} onChange={
                            (event) => checkChange(event, item)
                          }></Checkbox>
                          <span style={{ marginLeft: 32 }}>
                            编号:  {item.order}
                          </span>
                          <span style={{ marginLeft: 45 }}>
                            软著取得时间:  {item.time1}
                          </span>
                        </td>
                      </tr>
                      <tr style={{ textAlign: 'center', height: 110 }}>
                        <td>{index + 1}</td>
                        <td className='product-release-table-img-td'>
                          <div className='product-release-table-img'>
                            {item.img}
                          </div>
                        </td>
                        <td>
                          <div className='product-release-table-name'>
                            {item.name}
                          </div>
                          <div>
                            (接口软著)
                          </div>
                        </td>
                        <td>{item.v}</td>
                        <td style={{ fontSize: 24, color: '#FF5D15' }}>{item.price}</td>
                        <td>{item.time2}</td>
                        <td>
                          <Switch checkedChildren="On" unCheckedChildren="Off" onChange={(e) => { opneChange(e, item) }} defaultChecked={item.open == 0 ? false : true} />
                        </td>
                        <td>{item.status}</td>
                        <td>
                          <span className='product-release-table-btn' onClick={() => edit(item)}>编辑</span>
                          <span className='product-release-table-btn product-btn' onClick={() => del(item)}>删除</span>
                          <span className='product-release-table-btn product-btn' onClick={() => sell(item)}>出售</span>
                          <span className='product-release-table-btn product-btn' onClick={() => submit(item)}>提交审核</span>
                        </td>
                      </tr>
                    </React.Fragment>

                  )
                })}

              </tbody>
            </table>
          )}

        </div>



      </div>

      {/* 编辑弹窗 */}
      <Modal title={'编辑'}
        destroyOnClose={true}
        open={editModalOpen}
        footer={null} // 将 footer 设置为 null 来隐藏自带按钮
        width={1152}
        onCancel={() => {
          setEditModalOpen(false);
        }}
      >
        <div style={{ height: `${height - 20}px`, overflow: 'auto', borderTop: '1px solid #e8e8e8' }}>
          <EditModal></EditModal>
        </div>
      </Modal>
      {/* 删除弹窗 */}
      <Modal title="删除"
        okText="确认"
        cancelText="取消"
        destroyOnClose={true}
        open={delModalOpen}
        onOk={() => {
          setDelModalOpen(false)
        }}
        onCancel={() => {
          setDelModalOpen(false)
        }}
        okButtonProps={{ style: { background: 'red', color: 'white' } }}
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          height: `${height}px`,
        }}>
        <div style={{
          width:700,
          marginTop:20
        }}>
          删除后这条信息将不被保存，确定删除吗？
        </div>
      </Modal>
       {/* 出售弹窗 */}
       <Modal title="出售"
        okText="确认"
        cancelText="取消"
        destroyOnClose={true}
        open={sellModalOpen}
        onOk={() => {
          setSellModalOpen(false)
        }}
        onCancel={() => {
          setSellModalOpen(false)
        }}
        okButtonProps={{ style: { background: '#28915A', color: 'white' } }}
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          height: `${height}px`,
        }}>
        <div style={{
          width:700,
          marginTop:20
        }}>
          确定出售接口管理系统的软件著作权证吗？
        </div>
      </Modal>
    </div>
  )
}