import TabsComp from '@/components/TabsComp';
import styles from '../../../GLQ/index.less';
import { useEffect, useState } from 'react';
import { Checkbox, ConfigProvider, DatePicker, Input, Pagination, Select, Table, message } from 'antd';

import { rowClassName } from '@/utils';
import ButtonComp from '@/components/ButtonComp';
import ContentWarp from '@/components/ContentWarp';
import moment from 'moment';
import { deviceHardDeviceHardSelect } from '@/services/register';

export default function Page() {
  const [activeTab, setActiveTab] = useState(1)
  const [tableData, setTableData] = useState([]);
  const [pageNumber, setPageNumber] = useState(1);
  const [pageSize, setpageSize] = useState(10);
  const [total, setTotal] = useState(0);
  const [params, setParams] = useState<any>(null);
  const [byDate, setByDate] = useState(false);
  const [startDate, setStartDate] = useState("");
  const [endDate, setEndDate] = useState("");

  let mr30 = { marginRight: 30 }

  useEffect(() => {
    initParams()
  }, [])

  const initParams = () => {
    setParams({
      unitName: '',
      deviceName: '',
      deviceEntityId: '',
      diskNumber: '',
      telephone: '',
      ip: '',
      deviceType: '',
      homeNetwork: '',
      connFlag: ''
    })
  }

  const columns: any = [
    { title: '单位名称', dataIndex: 'unitName', key: 'unitName', align: 'center' },
    { title: '设备名称', dataIndex: 'deviceName', key: 'deviceName', align: 'center' },
    { title: '实体标识', dataIndex: 'deviceEntityId', key: 'deviceEntityId', align: 'center' },
    { title: '设备型号', dataIndex: 'deviceType', key: 'deviceType', align: 'center' },
    { title: '所属网络', dataIndex: 'homeNetwork', key: 'homeNetwork', align: 'center' },
    { title: '管理盘号', dataIndex: 'diskNumber', key: 'diskNumber', align: 'center' },
    { title: '电话号码', dataIndex: 'telephone', key: 'telephone', align: 'center' },
    { title: '接入日志', dataIndex: 'name', key: 'name', align: 'center' },
    { title: 'IP地址', dataIndex: 'ip', key: 'ip', align: 'center' },
    { title: '注册日期', dataIndex: 'createTime', key: 'createTime', align: 'center' }
  ]

  useEffect(() => { getList() }, [pageNumber]);

  const getList = () => {
    let date = {};
    if (byDate) {
      if (startDate.length > 0 && endDate.length > 0) {
        date = {startDate, endDate}
      }else {
        message.info('请选择开始时间和结束时间')
        return
      }
    }
    
    deviceHardDeviceHardSelect({ pageNumber, pageSize, ...params, ...date }).then((res) => {
      if (res?.result == "success") {
        setTotal(res.data[0].total);
        setTableData(res.data[0].list);
      } else {
        message.error(res?.errorMsg);
      }
    })
  }

  return (
    <div className={`${styles.params_warp}`}>
      <TabsComp
        dataSource={[{ id: 1, name: '设备查找' }]}
        activeTab={activeTab}
        onChange={(e) => setActiveTab(e)} />

      <div className='mt30 mb30'>请输入或选择查找条件</div>

      <div className='flex_aiC_jB'>
        {/* 左 */}
        <div style={{ width: '30%' }}>
          <div className='flex_aiC_jB' style={{ marginBottom: 70 }}>
            <div style={{ width: '45%' }}>
              <div className='mb10'>单位名称</div>
              <Input value={params?.unitName} onChange={(e) => { setParams({ ...params, unitName: e.target.value }) }} placeholder="请输入单位名称" style={mr30} />
            </div>
            <div style={{ width: '45%' }}>
              <div className='mb10'>设备名称</div>
              <Input value={params?.deviceName} onChange={(e) => { setParams({ ...params, deviceName: e.target.value }) }} placeholder="请输入设备名称" style={mr30} />
            </div>
          </div>
          <div>
            <div className='mt20 mb10'>实体标识</div>
            <Input value={params?.deviceEntityId} onChange={(e) => { setParams({ ...params, deviceEntityId: e.target.value }) }} placeholder="请输入实体标识" style={mr30} />
          </div>
          <div className='mt10' style={{ color: '#666666' }}>提示：若输入项为空，则查找时忽略该条件。</div>
        </div>

        {/* 中 */}
        <div className='flex_aiC_jB' style={{ width: '30%' }}>
          <div style={{ width: '45%' }}>
            <div className='mb10'>管理盘号</div>
            <Input placeholder="请输入管理盘号" value={params?.diskNumber} onChange={(e) => { setParams({ ...params, diskNumber: e.target.value }) }} style={mr30} />
            <div className='mb10 mt20'>电话号码</div>
            <Input placeholder="请输入电话号码" value={params?.telephone} onChange={(e) => { setParams({ ...params, telephone: e.target.value }) }} style={mr30} />
            <div className='mb10 mt20'>IP地址</div>
            <Input placeholder="请输入IP地址" value={params?.ip} onChange={(e) => { setParams({ ...params, ip: e.target.value }) }} style={mr30} />
          </div>
          <div style={{ width: '45%' }}>
            <div className='mb10'>设备型号</div>
            <Select
              style={{ width: '100%' }}
              placeholder="请选择设备型号"
              value={params?.deviceType}
              onChange={(e) => { setParams({ ...params, deviceType: e }) }}
              options={[
                { label: '全部', value: '' },
                { label: '设备型号1', value: '设备型号1' },
                { label: '设备型号2', value: '设备型号2' },
                { label: '设备型号3', value: '设备型号3' },
              ]} />

            <div className='mb10 mt20'>所属网络</div>
            <Select
              style={{ width: '100%' }}
              placeholder="请选择所属网络"
              value={params?.homeNetwork}
              onChange={(e) => { setParams({ ...params, homeNetwork: e }) }}
              options={[
                { label: '全部', value: '' },
                { label: '指挥专网', value: '指挥专网' },
                { label: '军事综合信息网', value: '军事综合信息网' },
                { label: '资源管理网', value: '资源管理网' }
              ]} />

            <div className='mb10 mt20'>接入标志</div>
            <Select
              style={{ width: '100%' }}
              placeholder="请选择接入标志"
              value={params?.connFlag}
              onChange={(e) => { setParams({ ...params, connFlag: e }) }}
              options={[
                { label: '全部', value: '' },
                { label: '接入', value: 1 },
                { label: '未接入', value: 2 }
              ]} />
          </div>
        </div>

        {/* 右 */}
        <div style={{ width: '30%' }}>
          <ContentWarp
            style={{ padding: '60px 20px 20px 20px' }}
            text={
              <Checkbox
                value={byDate}
                onChange={(e) => { 
                  setByDate(e.target.checked)
                }}>
                按注册日期
              </Checkbox>
            }
          >
            <div className='flex_aiC' style={{ marginBottom: 30 }}>
              <div className='mr16'>从</div>
              <DatePicker
                showTime
                style={{ width: '70%' }}
                format="YYYY-MM-DD HH:mm:ss"
                onChange={(a, b) => {
                  setStartDate(b);
                }} />
            </div>
            <div className='flex_aiC' style={{ marginBottom: 30 }}>
              <div className='mr16'>到</div>
              <DatePicker
                showTime
                style={{ width: '70%' }}
                format="YYYY-MM-DD HH:mm:ss"
                onChange={(a, b) => {
                  setEndDate(b)
                }} />
            </div>
          </ContentWarp>
        </div>
      </div>

      <div className='flex_jE mt20 mb20'>
        <ButtonComp text={'查询'} onClick={() => {
          pageNumber == 1 ? getList() : setPageNumber(1);
        }} />
      </div>

      <ButtonComp type={'special'} text={'查找结果'} onClick={() => { }} />
      <Table
        scroll={tableData.length > 0 ? { y: 41 * 5 } : {}}
        pagination={false}
        bordered
        columns={columns}
        dataSource={tableData}
        rowKey={(record: any) => record?.id}
        rowClassName={rowClassName}
      />

      {total > 0 && <div className='flex_aiC_jB mt20'>
        <div>共 {total} 条</div>
        <Pagination
          current={pageNumber}
          pageSize={pageSize}
          total={total}
          showQuickJumper
          onChange={(val) => {
            setPageNumber(val);
          }}
          onShowSizeChange={(val) => {
            setpageSize(val);
            getList();
          }}
        />
      </div>}
    </div>
  );
}
