// import React from 'react'
import './product-release.css'
import { Select, DatePicker, Button, 
  // message,
   Checkbox, Empty, Switch } from 'antd';
// import type { CheckboxProps } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import type { DatePickerProps } from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN';
import React from 'react';
// import dayjs, { Dayjs } from 'dayjs';
export default function ProductRelease() {
  // const [messageApi, contextHolder] = message.useMessage();
  const dateFormat = 'YYYY年MM月DD日';
  const belongTypeChange = (value: string) => {
    console.log(`selected ${value}`);
  }
  const onChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
  };
  const height = window.innerHeight - 180;

  // 选框选择时触发事件
  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 edit = (item: any) => {
    console.log(item.order);
  };
  // 点击删除
  const del = (item: any) => {
    console.log(item.order);
  };
  // 点击出售
  const sell = (item: any) => {
    console.log(item.order);
  };
  // 点击提交
  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: '企业' },
          ]}
        />
        <DatePicker placeholder="软件取得时间"
          style={{ width: 198, height: 36, marginRight: 12 }}
          format={dateFormat}
          locale={locale}
          onChange={onChange}
        />
        <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>
      </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>
    </div>
  )
}