import React, { useState, useEffect } from 'react';
import { Checkbox, Input, Card } from 'antd';
import { connect } from 'dva';
import XForm, { FieldTypes } from '../../../components/XForm';
import request from '../../../utils/request';
import channels from './channelList.less';
import { resolve } from 'path';

const { TextArea } = Input;


/**
 *
 *
 * @param {*} props
 * @returns
 */
const Edit = props => {
  console.log('props,props', props.user.currentUser)
  const userMenus = props.user.currentUser.menus;
  const userBtns = props.user.currentUser.buttons;

  const [data, setData] = useState({ data: [] })
 // 获取当前所有菜单
  useEffect(() => {
    localStorage.removeItem('value');
    menuList({ pageNum: 1, pageSize: 100 })
  }, [])

  function menuList(params) {
    request({
      url: '/api/admin/menuList',
      method: 'GET',
      params: { ...params },
  // eslint-disable-next-line no-shadow
  }).then(data => {
      console.log(data)
      setData(data)
  })
  }

  // function SuBmenu(params) {
  //  return Array.from(userMenus).map(Item =>
  //  <Checkbox value={ Item.menuId }> { Item.name }</Checkbox>)
  // }
  // const [tab, changeTab] = useState('basic')

  const Permission = [
    '项目管理',
    '员工管理',
    '客户管理',
    '系统管理',
    '渠道管理',
    '轮播图管理',
    '资讯管理',
    '活动管理',
    '积分商城',
    '首页数据',
  ]

  const Poster = props => {
    const [menus, setMenus] = useState([]);
// 判断menus是否有值
    const addMenus = m => setMenus([...menus, m]);
    const delMenus = m => setMenus(menus.filter(x => x.menuId !== m.menuId));
    const handleMenuChange = m => e => {
      console.log('e', m)
      if (e.target.checked) {
        addMenus(m)
      } else {
        delMenus(m)
      }
      console.log('menus', menus)
    }

    const [but, setBut] = useState([]);
    // 判断menus是否有值
        const addBut = m => setBut([...but, m]);
        const delBut = m => setBut(but.filter(x => x.menuId !== m.menuId));
        const handleButChange = m => e => {
          console.log('e', m)
          if (e.target.checked) {
            addBut(m)
          } else {
            delBut(m)
          }
          // console.log('menus', menus)

          console.log('menus', menus)
          console.log('but', but)
        }


    const dataSource = [
      {
        name: '员工管理',
        per: [
          '111111',
          '22222',
          '33333',
        ],
      },
      {
        name: '角色管理',
        per: [
          '444',
          '555',
          '666',
        ],
      },
    ];


    const gridStyle1 = {
      width: '20%',
      textAlign: 'left',
    };
    const gridStyle2 = {
      width: '80%',
      textAlign: 'left',
      height: '69px',
    };

    return (
    <>
      <div style={{}}>
        {/* { console.log('userMenus', userMenus) }
        { console.log('userBtns', userBtns) } */}
        {userMenus.map(item => (
          (item.parentCode === '-1') &&
          <Card title={<Checkbox onChange={handleMenuChange(item)}>{item.name}</Checkbox>} bordered style={{ width: '100%' }}>
              {
                   userMenus.map(menu => (

                    (item.menuId === menu.menuRoot && item.menuId !== menu.menuId) &&
                    <>
                      <Card.Grid style={gridStyle1} >
                          <Checkbox onChange={handleMenuChange(menu)}>{menu.name}</Checkbox>
                      </Card.Grid>
                      <Card.Grid style={gridStyle2}>
                        {userBtns.map(btn => (
                          <>
                            {
                              btn.menuId === menu.menuId &&
                              <Checkbox onChange={handleButChange(btn)}>{btn.name}</Checkbox>
                            }
                          </>
                        ))}
                      </Card.Grid>
                   </>
                   ))
              }
          </Card>
        ))}
      </div>
    </>
    )
  }

  const fields = [
    {
      label: '角色名称',
      name: 'roleName',
      type: FieldTypes.Text,
      // placeholder: '名称',
      value: ''
    },
    {
      label: '简介',
      name: 'roleIntroduction',
      render: <TextArea className={channels.inpuitTxt} ></TextArea>,
      value: ''

    },

    {
      label: '菜单权限',
      name: 'rolePermission',
      render:
        <>
          <div>
            <Poster value="111111" />
          </div>
        </>,
    },

  ]

  const handleSubmit = val => {
    window.console.log('submit data --->', val)
    request({
      url: '/api/admin/menuList',
      method: 'POST',
      params: { ...params },
  // eslint-disable-next-line no-shadow
  }).then(data => {
      console.log(data)
      setData(data)
  })
  }
  return <XForm onSubmit={handleSubmit} fields={fields}></XForm>
}
export default connect(({ user }) => ({ user }))(Edit);
