import React, { useState, useRef } from 'react';
import { message, Modal, Input, Form, PageHeader, Button, Spin, Select, Tree } from 'antd';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { getPage, getDataById, deleteAgency, addAgency, updateAgency,disableAgency } from './service';
// import './styles.less';
import { getDicData } from '@/utils/session';
import TextArea from 'antd/lib/input/TextArea';

const agency: React.FC<{}> = () => {
  //获取字典
  const getDict: any = getDicData();
  const [form] = Form.useForm();
  const [title, setTitle] = useState<string>('');
  const [open, setOpen] = useState<boolean>(false);

  const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
  const [currentRoleId, setCurrentRoleId] = useState<number | null>(null);
  const dictData = JSON.parse(getDict);
  const actionRef = useRef<ActionType>();
  const [spin, spinSet] = useState<boolean>(false);
  //查询分页数据
  const [pageData, pageDataSet] = useState<any>({
    pageNo: 1,
    pageSize: 10
  });
  const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 13 },
  };
  interface DictType {
    value: string;
    label: string;
  }
  const sys_normal_scope: DictType[] = [
    { value: 'EBTP', label: '招标采购中心' },
  ];

  //委托列表
  const columns: ProColumns<any>[] = [
    { title: '序号', valueType: 'index', width: 50, search: false, },
    { title: '代理机构名称', dataIndex: 'providerName', },//, ellipsis: true
    { title: '申请人', dataIndex: 'roleName', search: false, },//, ellipsis: true//, ellipsis: true
    { title: '准入时间', dataIndex: 'roleName', search: false, },//, ellipsis: true
    { title: '准入人', dataIndex: 'roleName', search: false, },//, ellipsis: true
    { title: '失效时间', dataIndex: 'roleName',  search: false,},//, ellipsis: true
    { title: '状态', dataIndex: 'status', valueType: 'select', 
    valueEnum: { '1': { text: '有效', status: '1' },'0': { text: '无效', status: '0' }, },
    },//, ellipsis: true
    { title: 'id', dataIndex: 'id', search: false,hideInTable:true,},//, ellipsis: true
    // { title: '创建时间', dataIndex: 'createDate', width: '10%', valueType: 'dateTime', search: false },
    { title: 'providerId', dataIndex: 'providerId', search: false,hideInTable:true,},
    {
      title: '操作', width: '9%',
      valueType: 'option',
      render: (_, record) => [
        <Button type='text' onClick={() => { handleUpdate(record.providerId) }}>委托项目信息</Button>,
        <Button type='text' onClick={() => { handleDelete(record.id) }}>查看</Button>,
        <Button type='text' onClick={() => { handleUpdate(record.id) }}>失效</Button>,
        <Button type='text' onClick={() => { handleDelete(record) }}>选择</Button>
        
    ]
    },
  ];
  // 删除操作
  const handleDelete = (id: string) => {
    Modal.confirm({
      title: '确认删除该角色？',
      onOk: async () => {
        await deleteAgency(id).then((r: any) => {
          if (r?.code == 200) {
            message.success('删除成功');
          } else {
            message.error('删除失败');
          }
        })
          .finally(() => actionRef.current?.reload());
      },
    });
  };
  const handleAdd = async () => {
    form.resetFields();
    // const menus = await menuTreeselect();
    // setMenuOptions(menus.data || []);
    // setMenuOptions(menu || []);

    // 使用时转换
    setMenuOptions(formatMenuOptions(menu) || []);
    setOpen(true);
    setTitle('添加角色');
  };

  const [menuOptions, setMenuOptions] = useState<any[]>([]);
  let menu = [{
    "id": '1', "parentId": '0', "label": "系统管理", "weight": 1,
    "children": [{
      "id": '101', "parentId": '1', "label": "角色管理", "weight": 2,
      "children": [{ "id": '1008', "parentId": '101', "label": "角色查询", "weight": 1 },
      { "id": '1009', "parentId": '101', "label": "角色新增", "weight": 2 },
      { "id": '1010', "parentId": '101', "label": "角色修改", "weight": 3 },
      { "id": '1011', "parentId": '101', "label": "角色删除", "weight": 4 },
      { "id": '1012', "parentId": '101', "label": "角色导出", "weight": 5 }]
    },
    {
      "id": '105', "parentId": '1', "label": "字典管理", "weight": 6,
      "children": [{ "id": '1026', "parentId": '105', "label": "字典查询", "weight": 1 },
      { "id": '1027', "parentId": '105', "label": "字典新增", "weight": 2 },
      { "id": '1028', "parentId": '105', "label": "字典修改", "weight": 3 },
      { "id": '1029', "parentId": '105', "label": "字典删除", "weight": 4 },
      { "id": '1030', "parentId": '105', "label": "字典导出", "weight": 5 }]
    }]
  },
  { "id": '4', "parentId": '0', "label": "PLUS官网", "weight": 4 },
  {
    "id": "1494925781048545281", "parentId": '0', "label": "个人待办", "weight": 18,
    "children": [{ "id": "1494926258733633538", "parentId": "1494925781048545281", "label": "待办任务", "weight": 1 },
    { "id": "1494926586677874690", "parentId": "1494925781048545281", "label": "已办任务", "weight": 2 }]
  }];
  const formatMenuOptions = (data: any[]) => {
    return data.map(item => ({
      title: item.label,
      key: item.id,
      children: item.children ? formatMenuOptions(item.children) : undefined,
    }));
  };

  const handleUpdate = async (record: any) => {
    form.resetFields();
    const role = await getDataById(record.roleId);
    // const menus = await roleMenuTreeselect(record.roleId);
    // setMenuOptions(menus.data.menus || []);
    setMenuOptions(formatMenuOptions(menu) || []);
    setCheckedKeys(role.data.menuIds || []);
    form.setFieldsValue({
      ...role.data,
      menuIds: role.data.menuIds || [],
    });
    // form.setFieldsValue(role.data);
    setCurrentRoleId(record.roleId);
    setOpen(true);
    setTitle('修改角色');
  };

  const closeModal = async () => {
    actionRef.current?.reload();
    form.resetFields();
    setCheckedKeys([]);
    setOpen(false);
  };

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      if (values.roleId) {
        await updateAgency(values).then((r: any) => {
          if (r?.code == 200) {
            message.success('修改成功');
          } else {
            message.error('修改失败');
          }
        });
      } else {
        await addAgency(values).then((r: any) => {
          console.log("r?.code", r?.code)
          if (r?.code == 200) {
            message.success('新增成功');
          } else {
            message.error('新增失败');
          }
        });
      }
      closeModal();
    } catch (error) {
      console.error(error);
    }
  };
  const checkSupModal = (
    <Modal
      title={title}
      visible={open}
      width="70%"
      centered
      destroyOnClose={true}
      bodyStyle={{ maxHeight: window.innerHeight * 0.96 - 108, overflowY: 'auto', paddingTop: 0 }}
      // footer={<Button onClick={() => setOpen(false)}>关闭</Button>}
      onOk={handleSubmit}
      onCancel={() => closeModal()}
    >
      <Form form={form} {...layout}>
        <Form.Item label="角色id" name="roleId" hidden>
          <Input />
        </Form.Item>
        <Form.Item label="角色名称" name="roleName" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item label="角色编码" name="roleCode" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item label="角色范围" name="roleScope" rules={[{ required: true }]}>
          <Select>
            {sys_normal_scope.map((item) => (
              <Option key={item.value} value={item.value}>
                {item.label}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item label="角色描述" name="roleDesc" rules={[{ required: true }]}>
          <TextArea />
        </Form.Item>
        <Form.Item label="菜单权限" name="menuIds" >
          <Tree
            defaultExpandAll
            checkable
            checkedKeys={checkedKeys}
            onCheck={(checkedKeys) => {
              setCheckedKeys(checkedKeys as React.Key[]);
              form.setFieldsValue({ menuIds: checkedKeys });
            }}
            treeData={menuOptions}
          />
        </Form.Item>
      </Form>
    </Modal>
  );
  return (
    <Spin spinning={spin}>
      <PageHeader title="我的招标代理" />
      <div style={{ maxHeight: innerHeight - 130, height: innerHeight - 130 }} className='xsy-entrust bgCWhite'>
        <ProTable<any>
          actionRef={actionRef}//action触发后更新表格
          columns={columns}//表格
          options={false}
          bordered={false}
          className='tableSearch'
          size='small'
          search={{ labelWidth: 'auto', span: 6 }}
          request={(params) =>
            getPage({
              ...params,
              basePageRequest: { pageNo: pageData.pageNo, pageSize: pageData.pageSize },
            }).then((res) => {
              const result = {
                data: res.data.records,
                total: res.data.total,
                success: res.success,
                pageSize: res.data.size,
                current: res.data.current
              }
              return result;
            })
          }
          toolBarRender={() => [
            <Button onClick={() => { handleAdd() }} type="primary">
              新增招标代理
            </Button>,
          ]
          }
          pagination={{
            defaultPageSize: 10,
            showSizeChanger: false,
            onChange: (page, pageSize) => pageDataSet({ pageNo: page, pageSize: pageSize }),
            onShowSizeChange: (current, size) => pageDataSet({ pageNo: current, pageSize: size }),
          }}
          onReset={() => { pageDataSet({ pageNo: 1, pageSize: 10 }) }}
        />
        {checkSupModal}
      </div>
      {/* 查看 */}
    </Spin >
  )
};
export default agency;