import React, { useEffect, useState } from "react";
//第三方UI库/组件
import { Form, Button, Table , Input, Tree, Row, Col, Space, Tooltip } from 'antd';
import { SearchOutlined, DownloadOutlined, ReloadOutlined } from '@ant-design/icons';
//类型定义
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
//umi 相关
import {  connect } from 'umi';
//本地组件、弹窗、业务逻辑
import SupplierViewModal from './components/SupplierViewModal';
import SupplierDetailModal from './components/SupplierDetailModal';
//本地服务/接口
import { treeData, systemDict, getPagePe } from './services';

//下拉数据接口
type OptionType = { label: string; value: string };
// 列表数据接口
interface Data {
  id: number;
  name: string;
  region: string;
  supplierType: string;
  personName: string;
  regTime: string;
  status: string;
}
interface Props {
  dispatch: any;
}
const personQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
  //搜搜表单
  const [form] = Form.useForm();
  // 树数据
  const [dataTree, setDataTree] = useState<any[]>([]);
  //默认选中树
  const [treeSelected, setTreeSelected] = useState<string[]>([]);
  //当前树key
  const [selectedKeys, setSelectedKeys] = useState<string>('');
  //列表数据
  const [data, setData] = useState<Data[]>([]);
  //列表加载
  const [loading, setLoading] = useState(false);
  //分页
  const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0 });
  //查看是否显示状态
  const [viewVisible, setViewVisible] = useState(false);
  //准入明细是否显示状态
  const [detailVisible, setDetailVisible] = useState(false);
  //查看、准入明细 参数传递
  const [currentRecord, setCurrentRecord] = useState<any>(null);
  // 境内/境外下拉数据
  const [regionOptions, setRegionOptions] = useState<OptionType[]>([]);
  //集采类别
  const [categoryOptions, setCategoryOptions] = useState<OptionType[]>([]);
  //集采库
  const [storeOptions, setStoreOptions] = useState<OptionType[]>([]);
  // 导出
  const handleExport = () => {
    window.open(
      `${SERVER_BASE}/coscoSupplierBase/getPagePeExport`,
      '_blank',
    );
  };
  // 查询
  const handleSearch = () => {
    setPagination({ ...pagination, current: 1 });
    getList(selectedKeys);
  };
  // 重置
  const handleReset = () => {
    form.resetFields();
    setPagination({ ...pagination, current: 1 });
    getList(selectedKeys);
  };
  // 点击树节点请求右表
  const handleTreeSelect = (keys: React.Key[]) => {
    const key = keys[0] as string;
    setSelectedKeys(key);
    getList(key)
  };
  //列表方法
  const getList = async (treeId: string, pageNo: number = 1, pageSize: number = 10) => {
    setLoading(true);
    try {
      const values = form.getFieldsValue();
      const { code, data, message } = await getPagePe({ pageNo, pageSize, treeId, ...values });
      if (code === 200) {
        setData(data.records);
        setPagination({ current: pageNo, pageSize, total: data.total });
      } else {
        message.error(message)
      }
    } finally {
      setLoading(false);
    }
  };
  // 辅助递归找第一个叶子 key（一般最下层为叶子）
  const findFirstLeafKey = (nodes: any[]): string | undefined => {
    for (const node of nodes) {
      if (!node.children || node.children.length === 0) return node.key;
      const found = findFirstLeafKey(node.children);
      if (found) return found;
    }
    return undefined;
  };
  // 初始化时选中树第一个叶子节点，并请求右表
  useEffect(() => {
    // 境内/境外 下拉
    systemDict('regionOptions').then((res) => {
      const { code, data } = res;
      if (code == 200) {
        setRegionOptions(data)
      }
    });
    // 集采类别 下拉
    systemDict('categoryOptions').then((res) => {
      const { code, data } = res;
      if (code == 200) {
        setCategoryOptions(data)
      }
    });
    // 集采库 下拉
    systemDict('storeOptions').then((res) => {
      const { code, data } = res;
      if (code == 200) {
        setStoreOptions(data)
      }
    });
    //tree数据
    treeData().then((res) => {
      const { code, data } = res;
      if (code == 200) {
        setDataTree(data)
        const key = findFirstLeafKey(data);
        if (key) {
          setSelectedKeys(key);
          setTreeSelected([key])
          getList(key)
        }
      }
    })
  }, []);


  const columns: ColumnsType<Data> = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: 'center',
      width: 60,
      render: (_: any, __: any, idx: number) => (((pagination.current ?? 1) - 1) * (pagination.pageSize ?? 10)) + idx + 1,
    },
    {
      title: '姓名',
      dataIndex: 'personName',
      key: 'personName',
      align: 'center',
      ellipsis: true,
      render: (dom, record) => 
        <Tooltip title={record.personName}>
            <a
            onClick={() => {
              dispatch({
                type: 'globalModal/show',
                payload: {
                  id: record.id,
                },
              });
            }}
          >
            {record.personName}
          </a>
        </Tooltip>,
    },
    {
      title: '身份证号',
      dataIndex: 'idCard',
      key: 'idCard',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '联系电话',
      dataIndex: 'personPhone',
      key: 'personPhone',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '准入单位',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
    },
    {
      title: '创建部门',
      dataIndex: 'regTime',
      key: 'regTime',
      align: 'center',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '操作',
      key: 'option',
      align: 'center',
      width: 140,
      render: (record: any) => (
        <Space>
          <a
            style={{ color: '#1677ff' }}
            onClick={() => { setCurrentRecord(record.id); setViewVisible(true); }}
          >查看</a>
          <a
            style={{ color: '#1677ff' }}
            onClick={() => { setCurrentRecord(record.id); setDetailVisible(true); }}
          >准入明细</a>
        </Space>
      ),
    },
  ];

  return (
    <>
      <div style={{ width: '100%', height: '100%' }}>
        <Row gutter={16} style={{ height: 'calc(100% - 30px)' }} >
          {/* 左侧树 */}
          <Col flex="250px" >
            <div style={{
              background: '#fff', height: '100%', padding: '20px 10px',
              overflowX: 'auto',
              overflowY: 'auto',
              width: '250px',
              boxSizing: 'border-box',
              whiteSpace: 'nowrap',
            }}>
             {dataTree.length > 0 && (
                <Tree
                  treeData={dataTree}
                  defaultExpandAll
                  selectedKeys={treeSelected}
                  onSelect={handleTreeSelect}
                />
              )}
             
            </div>
          </Col>
          {/* 右侧主体 */}
          <Col flex="auto" style={{ background: '#fff', width: 'calc(100% - 270px)', height: '100%', padding: '20px' }}>
            {/* 查询表单 */}
            <Form
              form={form}
              layout="inline"
              style={{ marginBottom: 12, }}
            >
              <Form.Item name="personName" label="姓名">
                <Input placeholder="请输入姓名关键字" style={{ width: 180 }} maxLength={20} allowClear />
              </Form.Item>

              <Form.Item name="idCard" label="身份证号">
                <Input placeholder="请输入身份证号关键字" style={{ width: 180 }} maxLength={18} allowClear />
              </Form.Item>
               
              <Form.Item>
                <Button type="primary" icon={<SearchOutlined />} htmlType="submit" onClick={handleSearch}>
                  查询
                </Button>
                <Button style={{ marginLeft: 8 }} icon={<ReloadOutlined />} onClick={handleReset}>
                  重置
                </Button>
                <Button type="primary" icon={<DownloadOutlined />} style={{ marginLeft: 8 }} onClick={handleExport}>
                  数据导出
                </Button>
              </Form.Item>
            </Form>
            {/* 表格 */}
            <Table
              rowKey="id"
              columns={columns}
              dataSource={data}
              loading={loading}
              pagination={pagination}
              onChange={(pagination) => getList(selectedKeys, pagination.current!, pagination.pageSize!)}
            />
          </Col>
        </Row>
      </div>
      {/* 查看组件 */}
      <SupplierViewModal
        visible={viewVisible}
        record={currentRecord}
        onCancel={() => setViewVisible(false)}
      />
      {/* 准入明细组件 */}
      <SupplierDetailModal
        visible={detailVisible}
        record={currentRecord}
        onCancel={() => setDetailVisible(false)}
      />
    </>
  );
};

export default connect()(personQualifiedSupplierQuery);