import React, { useState, useEffect } from 'react';
import { Checkbox, Row, Col, Input, Menu, Dropdown, Button, Icon, message, Table, Tooltip, Tabs, Radio, Divider, Tag, DatePicker, Select, Form, Alert, Card } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import styles from '../../style/GoodsList.less';
import XForm, { FieldTypes } from '../../../components/XForm';
import Wangedit from '../../../components/Wangedit/Wangedit';
import request from '../../../utils/request';
import channels from './channelList.less';
import Tagss from '../components/Tagss.jsx';

const { TextArea } = Input;


/**
 *
 *
 * @param {*} props
 * @returns
 */
const Edit = (props) => {
  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)
  })
  }
  // const [tab, changeTab] = useState('basic')

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

  // const Basic = (props) => {

  //   const dataSource = [


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

  //   const columns = [
  //     // {
  //     //   title: '商品图片',
  //     //   dataIndex: 'img',
  //     //   key: 'img',
  //     //   align: 'center',

  //     //   render: (text, record) => <img src={record.img} className={channels.touxiang} />,
  //     // },
  //     {
  //       title: '员工管理',
  //       dataIndex: 'name',
  //       key: 'name',
  //       align: 'left',
  //       render: text => <a>{text}</a>,
  //     },

  //     {
  //       // title: '操作  ',
  //       dataIndex: 'status',
  //       key: 'per',
  //       align: 'left',
  //       render: () => <>
  //         {/* {pre.map((item,index)=>(
  //       <Checkbox>{item[index]}</Checkbox>


  //               ))} */}
  //       </>,
  //     },
  //   ];
  //   return <Table dataSource={dataSource} columns={columns} />




  // }
  // const [Card] = useState('Poster')

  const Poster = props => {

    const dataSource = [


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


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

{/* <Checkbox>{Permission[index]}</Checkbox> */}
    return <>
      <div style={{}}>
      {Array.from(data).map(Item =>
                <Checkbox value={ Item.menuId }> { Item.name } </Checkbox>,
              )}
        {Permission.map((item, index) => (
          <Card title={<Checkbox>{Permission[index]}</Checkbox>} bordered={true} style={{ width: '100%' }}>
            
              {dataSource.map((items, indexs) => (
              <>
                <Card.Grid style={gridStyle1}><Checkbox>{items.name}</Checkbox></Card.Grid>
                
                <Card.Grid style={gridStyle2}>
                {items.per.map((itemss,indexss) =>(
                  <Checkbox>{items.per[indexss]}</Checkbox>
                ))}
                </Card.Grid>
                </>
            ))}
            
          </Card>



        ))}
      </div>
    </>
  }

  const Share = (props) => {
    return <div>Share</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 />

            {/* <Radio.Group value={tab} defaultValue="1" buttonStyle="solid">
             
        <Checkbox>Checkbox</Checkbox>
                {Permission.map((item,index)=>(
                  <Radio.Button style={BottonStyle} value="{index}">{Permission[index]}</Radio.Button>
                 
                ))}
            </Radio.Group>
          
          </div>
          <div>
             
          <Table dataSource={Permission[index]} columns={columns} />
           
             */}
          </div>
        </>,

    }
    // {
    //   label: '状态',
    //   name: 'roleState',
    //   render: <Radio.Group>
    //     <Radio.Button style={{background:'#f0f0f0'}} value="a">禁用</Radio.Button>
    //     <Radio.Button style={{background:'#f0f0f0',color:'#ff7e48'}} value="b">启用</Radio.Button>
    //   </Radio.Group>,
    //   value: 'b'
    // },

  ]

  const handleSubmit = val => {
    window.console.log('submit data --->', val)
  }
  return <XForm onSubmit={handleSubmit} fields={fields}></XForm>




}



export default Edit