/* eslint-disable no-nested-ternary */
/*
 * @Description:
 * @Author: leizhe
 * @Date: 2022-04-06 11:39:53
 * @LastEditTime: 2022-08-18 16:40:47
 * @LastEditors: dengchao 754083046@qq.com
 */
import React, { useState, useEffect } from 'react';
import {
  Button,
  Descriptions,
  Input,
  Card,
  Spin,
  Divider,
  Message,
  Tabs,
  Table,
  Space,
  Tooltip,
  Modal,
  Form,
  notification,
  message,
  Image,
  Pagination,
} from 'antd';
import {
  FormOutlined,
  DeleteOutlined,
  PlusOutlined,
  DownloadOutlined,
  UploadOutlined,
  SyncOutlined,
  PlusSquareFilled,
  CloudUploadOutlined,
} from '@ant-design/icons';
import {
  List,
  deleteByID,
  DownLoadSketchPadType,
  Export,
  CaseTemplate,
} from '@/services/ModelFileManage/api';
import styles from './ModelFileManage.less';
import EditModal from './EditModal';
import ImportModal from './ImportModal';

const ModelFileManage = () => {
  const [searchWord, setSearchWord] = useState(''); // 关键字
  const [tableData, setTableData] = useState('');
  const [tableLoading, setTableLoading] = useState(false);
  const [pickItem, setPickItem] = useState('');
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [selectColor, setSelectColor] = useState({}); // 当前选中颜色,操作时设置
  const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式
  const { Search } = Input;
  const [total, setTotal] = useState();
  const [pageSize, setPageSize] = useState(20);
  const [currentPage, setCurrentPage] = useState(1);
  const [deleteVisible, setDeleteVisible] = useState(false);
  const [multDeleteVisible, setMultDeleteVisible] = useState(false);
  const [editVisible, setEditVisible] = useState(false);
  const [flag, setFlag] = useState(0);
  const [importVisible, setImportVisible] = useState(false);
  const [keepId, setKeepId] = useState([]);
  const [upgradeVisible, setUpgradeVisible] = useState(false);

  const setRowClassName = record =>
    record.userID === selectColor.userID ? styles.clickRowStyle : '';

  useEffect(() => {
    setSelectedRowKeys([]);
    setTableLoading(true);
    List({ version: '全部', pageIndex: 1, pageSize: 20 }).then(res => {
      setTableLoading(false);
      if (res.say.statusCode === '0000') {
        console.log(res.getMe);
        setTableData(res.getMe);
        setTotal(res.totalRcdNum);
        // let aa = [];
        // if (res.getMe.length > 0) {
        //   res.getMe.map(i => {
        //     aa.push(i.id);
        //   });
        // }
        // console.log(aa);
        // setKeepId(aa);
      }
    });
  }, [flag]);

  useEffect(() => {
    List({ version: '全部' }).then(res => {
      setTableLoading(false);
      if (res.say.statusCode === '0000') {
        console.log(res.getMe);
        setTableData(res.getMe);
        setTotal(res.totalRcdNum);
        let aa = [];
        if (res.getMe.length > 0) {
          res.getMe.map(i => {
            aa.push(i.id);
          });
        }
        console.log(aa);
        setKeepId(aa);
      }
    });
  }, []);

  const columns = [
    {
      title: '序号',
      dataIndex: 'ID',
      align: 'center',
      key: 'ID',
      width: 200,
      render: (text, record, index) => (
        <span>{`${currentPage * pageSize + index + 1 - pageSize}`}</span>
      ),
    },
    {
      title: '画板名称',
      dataIndex: 'name',
      align: 'center',
      key: 'name',
      render: item => searchStyle(item),
    },
    {
      title: '画板类型',
      dataIndex: 'templet',
      align: 'center',
      key: 'templet',
      render: (text, record, index) => (
        <span>
          {record.templet ? (
            <span
              style={{
                backgroundColor: '#cfcf71',
                width: '47px',
                height: '23px',
                display: 'inline-block',
                borderRadius: '5px',
                color: 'white',
              }}
            >
              样品
            </span>
          ) : record.isTemplate ? (
            <span
              style={{
                backgroundColor: '#95c6f3',
                width: '47px',
                height: '23px',
                display: 'inline-block',
                borderRadius: '5px',
                color: 'white',
              }}
            >
              案例
            </span>
          ) : (
            <span
              style={{
                backgroundColor: '#dda8a8',
                width: '47px',
                height: '23px',
                display: 'inline-block',
                borderRadius: '5px',
                color: 'white',
              }}
            >
              普通
            </span>
          )}
        </span>
      ),
    },
    {
      title: '图像',
      dataIndex: 'thumbnailURL',
      align: 'center',
      key: 'thumbnailURL',
      render: text => (
        <Image
          src={window.location.origin + `/PandaConfiguration/Raw/File/Sketch/Preview/${text}`}
          height="50px"
        />
      ),
    },
    {
      title: '操作',
      key: 'action',
      width: 200,
      align: 'center',
      render: record => (
        <Space size="middle">
          <Tooltip title="编辑">
            <FormOutlined
              onClick={() => onedit(record)}
              style={{ fontSize: '16px', color: '#1890FF' }}
            />
          </Tooltip>
          {record.isTemplate && !record.templet ? (
            <Tooltip title="升级产品">
              <CloudUploadOutlined
                onClick={() => onupgrade(record)}
                style={{ fontSize: '16px', color: '#1890FF' }}
              />
            </Tooltip>
          ) : (
            <></>
          )}
          <Tooltip title="删除">
            <DeleteOutlined
              onClick={() => ondelete(record)}
              style={{ fontSize: '16px', color: '#e86060' }}
            />
          </Tooltip>
        </Space>
      ),
    },
  ];

  const onedit = e => {
    console.log(e);
    setPickItem(e);
    setEditVisible(true);
  };

  const onupgrade = e => {
    console.log(e);
    setPickItem(e);
    setUpgradeVisible(true);
  };

  const ondelete = e => {
    console.log(e);
    setPickItem(e);
    setDeleteVisible(true);
  };
  // 复选框
  const rowSelection = {
    selectedRowKeys,
    onChange: (RowKeys, Rows) => {
      setSelectedRowKeys(RowKeys);
    },
  };

  // 模糊查询匹配的样式
  const searchStyle = val => {
    let n;
    if (showSearchStyle) {
      const escapedSearchValue = searchWord.replace(/\\/g, '\\\\');
      const regex = new RegExp(escapedSearchValue, 'g');
      n = val.replace(
        regex,
        `<span style='color:red'>${searchWord}</span>`
      );
    } else {
      n = val;
    }
    return <div dangerouslySetInnerHTML={{ __html: n }} />;
  };

  const submitSearchUser = () => {
    setSelectedRowKeys([]);
    setTableLoading(true);
    List({
      version: '全部',
      // pageIndex: currentPage,
      // pageSize: pageSize,
      queryInfo: searchWord,
    }).then(res => {
      setTableLoading(false);
      if (res.say.statusCode === '0000') {
        setShowSearchStyle(true);
        setTableData(res.getMe);
        setTotal(res.totalRcdNum);
      }
    });
  };

  const handleSearch = e => {
    setSearchWord(e.target.value);
  };

  // 监听分页
  const paginationChange = (page, pageSizes) => {
    setCurrentPage(page);
    setPageSize(pageSizes);
    setSelectedRowKeys([]);
    setTableLoading(true);
    List({ version: '全部', pageIndex: page, pageSize: pageSizes, queryInfo: searchWord }).then(
      res => {
        setTableLoading(false);
        if (res.say.statusCode === '0000') {
          setTableData(res.getMe);
          setTotal(res.totalRcdNum);
        }
      },
    );
  };

  const clearSearchWord = () => {
    setSearchWord('');
    setSelectedRowKeys([]);
    setTableLoading(true);
    List({
      version: '全部',
      pageIndex: currentPage,
      pageSize: pageSize,
      queryInfo: '',
    }).then(res => {
      setTableLoading(false);
      if (res.say.statusCode === '0000') {
        setTableData(res.getMe);
        setTotal(res.totalRcdNum);
      }
    });
  };

  const deleteData = () => {
    deleteByID({ ids: pickItem.id }).then(res => {
      if (res.statusCode === '0000') {
        setDeleteVisible(false);
        notification.success({
          message: '删除成功',
          duration: 2,
        });
        setFlag(flag + 1);
      } else {
        notification.error({
          message: '删除失败',
          description: res.info,
        });
      }
    });
  };

  const multDeleteData = () => {
    setMultDeleteVisible(true);
  };

  const multDelete = () => {
    deleteByID({ ids: selectedRowKeys.toString() }).then(res => {
      if (res.statusCode === '0000') {
        setMultDeleteVisible(false);
        notification.success({
          message: '删除成功',
          duration: 2,
        });
        setFlag(flag + 1);
      } else {
        notification.error({
          message: '删除失败',
          description: res.info,
        });
      }
    });
  };

  const ExportData = () => {
    if (selectedRowKeys.length == 0) {
      message.warning('请先选择导出的数据');
    } else {
      window.location.href = Export({ ids: selectedRowKeys.toString() });
    }
  };

  const MultExportData = () => {
    window.location.href = Export({ ids: keepId.toString() });
  };

  const onImportSubmit = () => {
    setImportVisible(false);
    setFlag(flag + 1);
  };

  const importFile = () => {
    setImportVisible(true);
  };

  const upgrade = () => {
    CaseTemplate({ ids: pickItem.id }).then(res => {
      if (res.statusCode === '0000') {
        setUpgradeVisible(false);
        notification.success({
          message: '升级成功',
          duration: 2,
        });
        setFlag(flag + 1);
      } else {
        notification.error({
          message: '升级失败',
          description: res.info,
        });
      }
    });
  };

  const onEditSubmit = () => {
    setImportVisible(false);
    setFlag(flag + 1);
  };
  return (
    <div className={styles.base_container}>
      <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}>
        <div
          style={{
            height: '41px',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <div>
            <span style={{ width: '200px', display: 'inline-block' }}>
              （已选{selectedRowKeys.length}条/共{total}条）
            </span>
            <span style={{ lineHeight: '32px' }}>画板检索：</span>
            <Search
              style={{ width: 260 }}
              placeholder="请输入画板名称"
              onSearch={submitSearchUser}
              onChange={e => handleSearch(e)}
              enterButton
              value={searchWord}
            />
            <Button
              type="primary"
              icon={<SyncOutlined />}
              onClick={clearSearchWord}
              style={{ marginLeft: '20px' }}
            >
              重置
            </Button>
          </div>
          <div>
            <Button
              type="primary"
              icon={<DeleteOutlined />}
              onClick={multDeleteData}
              style={{ marginLeft: '20px' }}
            >
              删除
            </Button>
            <Button
              type="primary"
              icon={<UploadOutlined />}
              onClick={importFile}
              style={{ marginLeft: '20px' }}
            >
              导入
            </Button>
            <Button
              type="primary"
              icon={<DownloadOutlined />}
              onClick={ExportData}
              style={{ marginLeft: '20px' }}
            >
              导出
            </Button>
            <Button
              type="primary"
              icon={<DownloadOutlined />}
              onClick={MultExportData}
              style={{ marginLeft: '20px' }}
            >
              导出全部
            </Button>
          </div>
        </div>
        <div style={{ marginTop: '10px' }}>
          <Table
            rowSelection={{
              type: 'checkbox',
              ...rowSelection,
            }}
            rowClassName={setRowClassName}
            size="small"
            rowKey={record => record.id}
            bordered
            onRow={record => ({
              // onDoubleClick: event => {
              //   event.stopPropagation();
              //   editEventType(record);
              // }, // 双击
              onClick: e => {
                setSelectColor(record);
              },
            })}
            columns={columns}
            dataSource={tableData}
            loading={tableLoading}
            scroll={{ x: 'max-content', y: 'calc(100vh - 270px)' }}
            pagination={false}
          />
        </div>
        <Pagination
          style={{ float: 'right', marginTop: '10px' }}
          total={total}
          showTotal={(aa, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`}
          defaultPageSize={pageSize}
          defaultCurrent={1}
          pageSizeOptions={[10, 20, 50, 100]}
          current={currentPage}
          onChange={paginationChange}
          size="small"
          showQuickJumper
        />
      </Card>
      <Modal
        visible={deleteVisible}
        onCancel={() => setDeleteVisible(false)}
        title="删除"
        okText="确认"
        cancelText="取消"
        onOk={deleteData}
      >
        <span>是否删除该数据</span>
      </Modal>
      <Modal
        visible={multDeleteVisible}
        onCancel={() => setMultDeleteVisible(false)}
        title="批量删除"
        okText="确认"
        cancelText="取消"
        onOk={multDelete}
      >
        <span>是否批量删除所选数据</span>
      </Modal>
      <EditModal
        visible={editVisible}
        onCancel={() => setEditVisible(false)}
        pickItem={pickItem}
        callBackSubmit={onImportSubmit}
      />
      <ImportModal
        visible={importVisible}
        onCancel={() => setImportVisible(false)}
        callBackSubmit={onEditSubmit}
      />
      <Modal
        visible={upgradeVisible}
        onCancel={() => setUpgradeVisible(false)}
        title="升级产品"
        okText="确认"
        cancelText="取消"
        onOk={upgrade}
      >
        <span>是否升级为样品</span>
      </Modal>
    </div>
  );
};
export default ModelFileManage;
