import React, { useEffect, useState, useContext } from 'react';
import './index.less'
import { MyContext } from '../../utils/contextManage';
import GTableWithReferenceRule from "../GTableWithReferenceRule";

export interface LeftTableProps {
  MODELCLASS: string
  offsetHeight: number
  ORDERBYCLAUSE: string
  INITWHERECLAUSE: string
  WHERECLAUSE: string
  ADFIELDLIST: any[]
  onChange: (val: any) => void
  searchParam?: any
  createRefresh?: any
  onDataListChange: (val: any) => void
}

const LeftTable: React.FC<LeftTableProps> = (props) => {
  console.log(props)
  // @ts-ignore
  const { state } = useContext(MyContext);
  const { MODELCLASS, ORDERBYCLAUSE, INITWHERECLAUSE, WHERECLAUSE, onChange, searchParam, offsetHeight, createRefresh,onDataListChange } = props
  const [columns, setColumns] = useState<any[]>([])
  const [dataList, setDataList] = useState<any[]>([])
  const [loading, setLoading] = useState<boolean>(false)
  const [total, setTotal] = useState<number>(0)
  const [current, setCurrent] = useState<number>(0)
  const [pageSize, setPageSize] = useState<number>(20)
  const [leftTableWidth, setLeftTableWidth] = useState<number>(0)
  const [selectedRowKeys, setSelectedRowKeys] = useState<(string | number)[]>([]);

  const getFieldListData = (type: string, current = 1, pageSize = 20, serachVal?: object) => {
    console.log('开始请求左侧表格分页数据')
    setLoading(true)
    const params = {
      ENTITYMODEL: MODELCLASS,
      ORDERBYCLAUSE,
      page: current,
      pageSize: pageSize,
      queryParams: {},
      WHERECLAUSE: ''
    }
    if (type === 'init') {
      params.queryParams = {}
      params.WHERECLAUSE = INITWHERECLAUSE
    } else {
      params.queryParams = {}
      params.WHERECLAUSE = WHERECLAUSE
    }
    if (serachVal) {
      params.queryParams = serachVal
    }
    console.log('请求参数', params)
    state.getEntityListAsPage(params)
      .then((res: any) => {
        setLoading(false)
        if (res) {
          setDataList(res.list.map((t: any, i: number) => {
            t.key = t.OBJECTRRN || i
            return t
          }))
          setTotal(res.total)
        }
      })
      .catch((err: any) => {
        console.log('请求失败，todo解锁加载中', err)
      })
  }
  // 控制左侧表格刷新的逻辑
  const leftTabelRefresh = () => {
    if (searchParam && Object.keys(searchParam).length > 0) {
      if (searchParam.cleanSearchRefresh) {
        // 不带搜索条件的刷新
        if (searchParam.isCurrentPage) {
          // 刷新后留着当前页
          getFieldListData('init', current, pageSize)
        } else {
          // 刷新后回到第一页
          getFieldListData('init', 1, 20)
          setCurrent(1)
          setPageSize(20)
        }
        if (searchParam.cleanSelected) {
          // 刷新后清空左侧表格勾选
          setSelectedRowKeys([])
        }
      } else {
        // 带搜索条件刷新
        const tempSearchParam = { ...searchParam }
        delete tempSearchParam.cleanSearchRefresh
        delete tempSearchParam.cleanSelected
        delete tempSearchParam.isCurrentPage
        if (searchParam.isCurrentPage) {
          // 刷新后留着当前页
          getFieldListData('', current, pageSize, tempSearchParam)
        } else {
          // 刷新后回到第一页
          getFieldListData('', 1, 20, tempSearchParam)
          setCurrent(1)
          setPageSize(20)
        }
        if (searchParam.cleanSelected) {
          // 刷新后清空左侧表格勾选
          setSelectedRowKeys([])
        }
      }
    } else {
      getFieldListData('init')
      setSelectedRowKeys([])
      // 页码重置
      setCurrent(1)
      setPageSize(20)
    }
  }
  
  useEffect(() => {
    leftTabelRefresh()
  }, [searchParam])
  useEffect(() => {
    // 点击新建清空左侧表格选中
    setSelectedRowKeys([])
  }, [createRefresh])
  // 将左侧表部数据提取到顶层组件ContextChild中
  useEffect(() => {
    onDataListChange(dataList)
  }, [dataList])
  useEffect(() => {
    if (props) {
      const isZh = state.lang === 'zh-CN'
      let totalWidth = 0
      const list = props.ADFIELDLIST ? props.ADFIELDLIST.filter(x => x.ISMAIN).map(item => {
        const title = (isZh ? item.LABELZH : item.LABEL) || ''
        const width = Math.max(title.length * 18, 100)
        totalWidth += width;
        return {
          title: title,
          width,
          dataIndex: item.NAME.toUpperCase()
        }
      }) : []
      setColumns(list)
      setLeftTableWidth(totalWidth)
      getFieldListData('init')
    }
  }, [])
  useEffect(() => {
    if (selectedRowKeys.length > 0) {
      console.log('selectedRowKeys')
      const detail = dataList.find(x => x.key === selectedRowKeys[0])
      onChange(detail)
    }
  }, [selectedRowKeys])

  const pageChange = (page: number, pageSize: number) => {
    const tempSearchParam = { ...searchParam }
    if (tempSearchParam.cleanSearchRefresh) {
      delete tempSearchParam.cleanSearchRefresh
    }
    if (tempSearchParam.cleanSelected) {
      delete tempSearchParam.cleanSelected
    }
    if (tempSearchParam.isCurrentPage) {
      delete tempSearchParam.isCurrentPage
    }
    getFieldListData('', page, pageSize, tempSearchParam)
    setCurrent(page)
    setPageSize(pageSize)
  }
  const height = document.documentElement.clientHeight - offsetHeight
  return <GTableWithReferenceRule
    fields={props.ADFIELDLIST}
    loading={loading}
    columns={columns}
    dataSource={dataList}
    total={total}
    resizable
    size="small"
    scroll={{ y: `${height - 170}px`, x: `${leftTableWidth}px` }}
    rowSelection={{
      onChange: (selKeys: any) => {
        setSelectedRowKeys(selKeys);
      },
      selectedRowKeys,
      type: 'radio',
      columnWidth: '30px',
    }}
    onRow={(record: any) => {
      return {
        onClick: () => {
          setSelectedRowKeys([record.OBJECTRRN]);
        },
      };
    }}
    pagination={{
      size: "small",
      showSizeChanger: true,
      // showQuickJumper: true,
      defaultPageSize: 20,
      total,
      pageSizeOptions: ['10', '20', '30', '50', '100'],
      showTotal: () => state.lang === 'zh-CN' ? `共 ${total} 条` : `Total ${total} Items`,
      onChange: pageChange,
      onShowSizeChange: pageChange,
      current: current,
      pageSize: pageSize
    }}
    bordered />
};

export default LeftTable;