import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
import { Space, Button, Divider, Table, Tooltip, message } from 'antd';
import { DeleteOutlined, EditTwoTone, PlusOutlined } from '@ant-design/icons';
import RoalChoose from './RoalChoose';
import Undertaker from './Undertaker';
import styles from './ConfgUndertake.less';

const ConfgUndertake = (props, ref) => {
  const { nodeChage, editMsg } = props;
  const [showRoal, setShowRoal] = useState(false); // 是否显示选择角色用户弹窗
  const [editIndex, setEditIndex] = useState(); // 当前编辑默认承办人索引
  const [chooseUser, setChooseUser] = useState(); // 当前编辑角色或者机构的默认承办人
  const [showUnderTaker, setShowUnderTaker] = useState(false); // 是否显示选择默认承办人弹窗
  const [roleList, setRoleList] = useState([]);
  useImperativeHandle(ref, () => ({
    getParmar,
  }));
  useEffect(() => {
    setRoleList(editMsg.roleList);
  }, [editMsg]);
  const getParmar = () => ({ roleList });
  // 编辑默认承办人
  const toEdit = (record, index) => {
    setEditIndex(index);
    setChooseUser(record);
    setShowUnderTaker(true);
  };
  // 删除角色
  const delUser = (record, index) => {
    let list = [...roleList];
    list.splice(index, 1);

    setRoleList(list);
    nodeChage('roleList', list);
  };
  // 添加角色或机构
  const addUser = selectList => {
    console.log(selectList, 'selectList');

    setRoleList(selectList);
    nodeChage('roleList', selectList);
    setShowRoal(false);
  };
  // 添加默认承办人
  const addUnderTaker = (userName, userId) => {
    let list = JSON.parse(JSON.stringify(roleList));
    console.log(list, 'list');
    console.log(editIndex, 'editIndex');
    list[editIndex].defauletUserName = userName;
    list[editIndex].defaultUserId = userId;
    setRoleList(list);
    nodeChage('roleList', list);
    setShowUnderTaker(false);
  };
  // 定义表格
  const columns = [
    {
      title: '名称',
      dataIndex: 'roleName',
      align: 'left',
      width: 80,
      ellipsis: {
        showTitle: false,
      },
      filters: [
        {
          text: <span style={{ color: '#d46b08' }}>角色</span>,
          value: 1,
        },
        {
          text: <span style={{ color: '#08979c' }}>机构</span>,
          value: 2,
        },
      ],
      onFilter: (value, record) => record.type === value,
      render: (text, record) => (
        <Tooltip placement="topLeft" title={text}>
          <span style={{ color: record.type === 1 ? '#d46b08' : '#08979c' }}>{text}</span>
        </Tooltip>
      ),
    },
    // {
    //   title: '类型',
    //   dataIndex: 'type',
    //   align: 'center',
    //   width: 60,

    //   filters: [
    //     {
    //       text: '角色',
    //       value: 2,
    //     },
    //     {
    //       text: '机构',
    //       value: 1,
    //     },
    //   ],
    //   onFilter: (value, record) => record.type === value,
    //   render: text => (text === 2 ? '角色' : '机构'),
    // },
    {
      title: '承办人',
      dataIndex: 'defauletUserName',
      align: 'center',
      ellipsis: {
        showTitle: false,
      },
      width: 90,
      render: text => (
        <Tooltip placement="topLeft" title={text}>
          {text || '（无）'}
        </Tooltip>
      ),
    },
    {
      title: '操作',
      align: 'center',
      ellipsis: true,
      width: 60,
      render: (text, record, index) => (
        <>
          <Space>
            {/* <Tooltip title="编辑默认承办人">
              <EditTwoTone
                onClick={() => toEdit(record, index)}
                style={{ fontSize: '16px', color: '#1890FF' }}
              />
            </Tooltip> */}
            {/* <Tooltip title="删除角色或机构"> */}
            <DeleteOutlined
              onClick={() => delUser(record, index)}
              style={{ fontSize: '16px', color: '#e86060' }}
            />
            {/* </Tooltip> */}
          </Space>
        </>
      ),
    },
  ];
  return (
    <div>
      <Divider
        orientation="left"
        style={{
          borderTopColor: '#99bbe8',
          color: '#15428b',
          fontWeight: 700,
          marginTop: '0px',
        }}
      >
        承办管理
      </Divider>
      <div
        style={{
          widnt: '100%',
          marginBottom: '10px',
          display: 'flex',
          justifyContent: 'right',
        }}
      >
        <Button
          onClick={() => {
            setShowRoal(true);
          }}
          type="primary"
        >
          设置
        </Button>
      </div>
      <Table
        dataSource={roleList}
        columns={columns}
        rowKey={record => record.roleId}
        // rowClassName={(record, index) => {
        //   if (record.type === 2) {
        //     return styles.role;
        //   }
        //   if (record.type === 1) {
        //     return styles.organization;
        //   }
        // }}
        bordered
        size="small"
        scroll={{ y: 'calc(100vh - 630px)' }}
        onRow={(record, index) => ({
          onDoubleClick: () => {
            toEdit(record, index);
          },
        })}
        pagination={false}
      />
      <RoalChoose
        roleList={roleList}
        visible={showRoal}
        handleCancel={() => setShowRoal(false)}
        onSubumit={addUser}
      />
      <Undertaker
        chooseUser={chooseUser}
        visible={showUnderTaker}
        handleCancel={() => setShowUnderTaker(false)}
        onSubumit={addUnderTaker}
      />
    </div>
  );
};

export default forwardRef(ConfgUndertake);
