import React, { useState, useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
import {
  Table,
  Button,
  Checkbox,
  Pagination,
  Dialog,
  Form,
  Input,
  Select
} from '@alifd/next';
import styles from './index.module.scss';
import { Item } from '@alifd/next/types/breadcrumb';
import IceContainer from '@icedesign/container';
import lodashFind from 'lodash.find';
const FormItem = Form.Item;
const formItemWidth = '500px';
import { ajax } from '@/utils';
import PageHead from '@/components/page-head';
import getCustomHeader from '@/components/token-header';
const dialogDefaultItem = {
  dialogTitle: '添加菜单',
  type: 1, // 1 菜单 2 操作
  online: true,
  parentId: 0,
  name: '',
  code: '',
  weight: 0
};
const MenuList = ({ title, treeData }) => {
  const [data, setData] = useState(treeData);
  const [dialogVisible, setDialogVisible] = useState(false);
  const [dialogData, setDialogData] = useState({ ...dialogDefaultItem });

  // const getCustomHeader = () => {
  //   const token = document.getElementsByName('_csrf')[0];
  //   const csrfHeader = document.getElementsByName('_csrf_header')[0];
  //   let customHeader = {};
  //   if (csrfHeader && token) {
  //     customHeader[`${csrfHeader.content}`] = token.content;
  //   }
  //   return customHeader;
  // };
  const addOrEditMenu = async values => {
    console.log(values);
    const postData = { ...values };
    if (dialogData.id) {
      postData.id = dialogData.id;
    }

    try {
      const apiUrl = dialogData.id !== undefined ? 'editMenu' : 'addMenu';
      const responseData = await ajax({
        api: apiUrl,
        method: 'post',
        type: 'json',
        data: JSON.stringify(postData),
        contentType: 'application/json',
        headers: getCustomHeader()
      });
      setDialogVisible(false);
      if (responseData.success) {
        location.reload();
        // await setData(responseData.result);
      } else {
        Dialog.alert({
          title: '操作失败！',
          content: responseData.message || `系统错误请稍后再试~`
        });
      }
    } catch (e) {
      setDialogVisible(false);
      Dialog.alert({
        title: '操作失败！',
        content: `系统错误请稍后再试~`
      });
    }
    // async;
  };
  const deleteMenu = async values => {
    // console.log(values);
    try {
      const responseData = await ajax({
        api: 'removeMenu',
        method: 'post',
        type: 'json',
        contentType: 'application/json',
        data: JSON.stringify(values),
        headers: getCustomHeader()
      });

      if (responseData.success) {
        location.reload();
      } else {
        Dialog.alert({
          title: '操作失败！',
          content: responseData.message || `系统错误请稍后再试~`
        });
      }
    } catch (e) {
      Dialog.alert({
        title: '操作失败！',
        content: `系统错误请稍后再试~`
      });
    }
    // async;
  };
  const moveTop = id => {
    console.log('moveTop', id);
  };
  const moveDown = id => {
    console.log('moveDown', id);
  };
  const switchMenuStatus = async (id, online) => {
    // console.log(values);
    try {
      const responseData = await ajax({
        api: 'editMenu',
        method: 'post',
        type: 'json',
        contentType: 'application/json',
        data: JSON.stringify({
          id: id,
          online: !online
        }),
        headers: getCustomHeader()
      });

      if (responseData.success) {
        location.reload();
      } else {
        Dialog.alert({
          title: '操作失败！',
          content: responseData.message || `系统错误请稍后再试~`
        });
      }
    } catch (e) {
      Dialog.alert({
        title: '操作失败！',
        content: `系统错误请稍后再试~`
      });
    }
    // async;
  };
  const renderAddMenuDialog = () => {
    let newItemDefaultValue = { ...dialogDefaultItem };

    setDialogData(newItemDefaultValue);
    setDialogVisible(true);
  };
  const renderEditMenuDialog = id => {
    // console.log('edit', id);
    const dialogItem = {
      ...dialogDefaultItem,
      dialogTitle: '编辑菜单',
      ...lodashFind(data, { id: id })
    };
    setDialogData(dialogItem);
    setDialogVisible(true);
  };
  const renderConfirmDialog = id => {
    const menuItem = { ...lodashFind(data, { id: id }) };
    Dialog.confirm({
      title: '确定删除菜单吗？',
      content: `确定删除菜单【 ${menuItem.name} 】吗？此操作不可逆`,
      onOk: () => deleteMenu({ id })
    });
  };
  const renderDialogWithData = dialogItem => {
    return (
      <Dialog
        title={dialogItem.dialogTitle}
        visible={dialogVisible}
        footer={false}
        // style={{ width: '60%' }}
        onClose={() => setDialogVisible(false)}
      >
        <Form labelAlign="top">
          <FormItem label="名称:">
            <Input
              placeholder="名称"
              id="name"
              name="name"
              defaultValue={dialogItem.name}
              style={{ width: formItemWidth }}
            />
          </FormItem>
          <FormItem label="编码:">
            <Input
              placeholder="英文，全局唯一"
              id="code"
              name="code"
              defaultValue={dialogItem.code}
              style={{ width: formItemWidth }}
            />
          </FormItem>
          <FormItem label="路由:">
            <Input
              placeholder="路由"
              id="url"
              name="url"
              defaultValue={dialogItem.url}
              style={{ width: formItemWidth }}
            />
          </FormItem>
          <FormItem label="父节点ID:">
            <Select
              style={{ width: formItemWidth }}
              name="parentId"
              defaultValue={dialogItem.parentId}
              dataSource={data}
              itemRender={item => {
                if (item.depth > 0) {
                  return (
                    <span className={styles[`treePadding${item.depth}`]}>
                      |-- {item.name}
                    </span>
                  );
                }

                return item.name;
              }}
              valueRender={item => {
                return item.name;
              }}
            ></Select>
          </FormItem>
          <FormItem label="菜单类型:">
            <Select
              style={{ width: formItemWidth }}
              defaultValue={dialogItem.type}
              name="type"
            >
              <Select.Option value="1">菜单</Select.Option>
              <Select.Option value="2">操作（接口）</Select.Option>
            </Select>
          </FormItem>
          <FormItem label="顺序ID:">
            <Input
              placeholder="数字，越大越靠后"
              id="weight"
              name="weight"
              defaultValue={dialogItem.weight}
              style={{ width: formItemWidth }}
            />
          </FormItem>
          <FormItem>
            <Checkbox
              defaultChecked={dialogItem.online}
              id="check"
              name="online"
            >
              是否启用
            </Checkbox>
          </FormItem>

          <FormItem>
            <Form.Submit type="primary" onClick={addOrEditMenu}>
              提交
            </Form.Submit>
          </FormItem>
        </Form>
      </Dialog>
    );
  };

  const tableDataFormater = data => {
    let flatData = [];
    const flatLooper = (dataList, depth) => {
      dataList.forEach(item => {
        const newItem = {
          id: item.id,
          code: item.code,
          name: item.name,
          value: item.id, // for select
          parentId: item.parentId,
          url: item.url,
          online: item.online,
          depth: depth,
          type: item.type,
          weight: item.weight
        };
        flatData.push(newItem);
        if (item.children && item.children[0]) {
          const newDepth = depth + 1;
          flatLooper(item.children, newDepth);
        }
      });
      return flatData;
    };
    return flatLooper(data, 0);
  };
  useEffect(() => {
    setData(tableDataFormater(treeData));
  }, []);
  treeData = treeData.map(item => {
    item.title = item.name;
    return item;
  });
  const renderTree = (value, index, record) => {
    if (record.depth > 0) {
      return (
        <span className={styles[`treePadding${record.depth}`]}>
          |-- {value}
        </span>
      );
    }

    return value;
  };

  const renderOpts = (value, index, record) => {
    return (
      <div>
        <Button
          type="normal"
          className={styles.optBtn}
          onClick={() => switchMenuStatus(record.id, record.online)}
        >
          {record.online ? '禁用' : '启用'}
        </Button>
        <Button
          type="primary"
          className={styles.optBtn}
          onClick={() => renderEditMenuDialog(record.id)}
        >
          编辑
        </Button>
        <Button
          type="normal"
          warning
          className={styles.optBtn}
          onClick={() => renderConfirmDialog(record.id)}
        >
          删除
        </Button>
        {/*<Button
          type="normal"
          size="small"
          className={styles.optBtn}
          onClick={() => moveTop(record.id)}
        >
          上移
        </Button> 
        <Button
          type="normal"
          size="small"
          className={styles.optBtn}
          onClick={() => moveDown(record.id)}
        >
          下移
        </Button>*/}
      </div>
    );
  };
  const renderStatus = (value, index, record) => {
    return value ? (
      <span className={styles.greenStatus}>启用</span>
    ) : (
      <span className={styles.redStatus}>未启用</span>
    );
  };
  const renderType = (value, index, record) => {
    if (value == 1) return <span className={styles.menuType}>菜单</span>;
    if (value == 2) return <span className={styles.menuType}>操作</span>;
    return '';
  };
  return (
    <div>
      <PageHead
        title="菜单管理"
        buttonText="添加菜单"
        onClick={renderAddMenuDialog}
      />
      {renderDialogWithData(dialogData)}
      <IceContainer>
        <Table
          dataSource={data}
          hasBorder={false}
          onChange={treeData => this.setState({ treeData })}
        >
          <Table.Column title="Id" dataIndex="id" width={80} />
          <Table.Column title="名称" dataIndex="name" cell={renderTree} />

          <Table.Column
            title="状态"
            dataIndex="online"
            cell={renderStatus}
            width={60}
          />
          <Table.Column
            title="类型"
            dataIndex="type"
            cell={renderType}
            width={80}
          />
          <Table.Column title="排列顺序" dataIndex="weight" width={80} />
          <Table.Column
            title="路由"
            dataIndex="url"
            width={250}
            cell={value => {
              return <span style={{ fontSize: '14px' }}>{value}</span>;
            }}
          />
          <Table.Column title="操作" cell={renderOpts} width={260} />
        </Table>
      </IceContainer>
    </div>
  );
};

MenuList.defaultProps = {
  links: []
};

MenuList.propTypes = {
  title: PropTypes.string.isRequired
};

export default MenuList;