import React, { useState, useRef, forwardRef, useImperativeHandle, useEffect } from 'react';
import DragTable from '@/components/DragTable/DragTable';
import { Button, Space, Tooltip } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import lodash from 'lodash';
import HomeConfigModal from './HomeConfigModal';
import styles from './HomePageConfigs.less';

const HomePageConfigs = (props, ref) => {
  const { productList, client, roleHomePages } = props;
  const [orderTable, setOrderTable] = useState([]);
  const [visible, setVisible] = useState(false);
  const [modalType, setModalType] = useState();
  const [currentPageConfig, setCurrentPageConfig] = useState({});
  const count = useRef(0);
  useImperativeHandle(ref, () => ({
    getHomePageConfig: () => orderTable,
  }));
  useEffect(() => {
    console.log(roleHomePages, 'homePageConfig');
    if (!roleHomePages) {
      return;
    }
    let list = roleHomePages.map(item => {
      let obj = { ...item, keyIndex: count.current };
      count.current += 1;
      return obj;
    });

    setOrderTable(list);
  }, [roleHomePages]);

  // 拖拽回调函数
  const dragCallBack = data => {
    if (data) {
      console.log(data);
      setOrderTable(data);
    }
  };
  const addHomePage = () => {
    let obj = {
      productType: productList[0].PackageName,
      homePage: '',
      roleld: [],
      roleName: [],
      keyIndex: count.current,
    };
    setModalType('add');
    setCurrentPageConfig(obj);
    setVisible(true);
  };
  const delUser = (e, index) => {
    e.stopPropagation();
    let list = lodash.cloneDeep(orderTable);
    list.splice(index, 1);

    setOrderTable(list);
  };
  const onsubmit = val => {
    let list = lodash.cloneDeep(orderTable);
    console.log(list, currentPageConfig);
    if (modalType === 'add') {
      count.current += 1;
      list.push(val);
    } else {
      let index = list.findIndex(item => item.keyIndex === currentPageConfig.keyIndex);
      list[index] = val;
    }

    setOrderTable(list);
  };
  const columns = [
    // {
    //   title: '序号',
    //   dataIndex: 'index',
    //   width: 50,
    //   key: 'index',
    // },
    {
      title: '产品类型',
      dataIndex: 'productType',
      width: 100,
      key: 'productType',
    },
    {
      title: '主页Url',
      dataIndex: 'homePage',
      width: 150,
      key: 'homePage',
      ellipsis: {
        showTitle: false,
      },
      render: (text, record, index) => (
        <Tooltip placement="left" title={text}>
          {text}
        </Tooltip>
      ),
    },
    {
      title: '角色',
      dataIndex: 'roleName',
      width: 150,
      key: 'roleName',
      ellipsis: {
        showTitle: false,
      },
      render: (text, record, index) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: '操作',
      dataIndex: '',
      width: 80,
      align: 'center',
      key: '',
      render: (text, record, index) => (
        <>
          <Space>
            {/* <Tooltip title="编辑默认承办人">
              <EditTwoTone
                onClick={() => toEdit(record, index)}
                style={{ fontSize: '16px', color: '#1890FF' }}
              />
            </Tooltip> */}

            <DeleteOutlined
              onClick={e => delUser(e, index)}
              style={{ fontSize: '16px', color: '#e86060' }}
            />
          </Space>
        </>
      ),
    },
  ];
  return (
    <>
      <div className={styles.btnBox}>
        <Button onClick={addHomePage}>新增角色主页配置</Button>
      </div>
      <DragTable
        bordered
        style={{ marginBottom: '10px' }}
        rowKey={record => record.keyIndex}
        columns={columns}
        dataSource={orderTable}
        pagination={false}
        size="small"
        dragCallBack={dragCallBack}
        onClick={record => {
          setCurrentPageConfig(record);
          setVisible(true);
          setModalType('edit');
          console.log(record);
        }}
        ItemTypes="homePageOrder"
        scroll={{
          y: 500,
        }}
      />
      <HomeConfigModal
        visible={visible}
        modalType={modalType}
        productList={productList}
        client={client}
        currentPageConfig={currentPageConfig}
        onFinish={val => onsubmit(val)}
        handleCancel={() => setVisible(false)}
      />
    </>
  );
};

export default forwardRef(HomePageConfigs);
