
import React, { useState, useEffect } from 'react';
import { Button, message, Table, Modal } from 'antd';
import withActions from '@/components/ActionList';
import EditIcon from '@/components/EditIcon';
import router from 'umi/router';
import request from '../../../utils/request'
import Styles from './style.less';
import apis from '../../../services/apis';
import AuthButton from '../../../components/AuthButton';
import styles from '../../style/GoodsList.less';

const header = props => {
  // function confirm(id) {
  //   Modal.confirm({
  //     title: '确认停用该角色？',
  //     okText: '确认',
  //     cancelText: '取消',
  //     onOk() {
  //     },
  //     onCancel() {
  //       console.log('Cancel');
  //     },
  //   });
  // }

  function addRole(roleId) {
    router.push({
      pathname: '/staff/list/addRole',
    });
  }

  function toEditRole(roleId) {
    router.push({
      pathname: '/staff/list/addRole',
      query: {
        id: roleId,
      },
    });
  }
  const [data, setData] = useState({ data: [] })
  // 初始化角色
  useEffect(() => {
    localStorage.removeItem('value');
    getRoleList({ pageNum: 1, pageSize: 100 })
  }, [])

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

  function getRoleList(params) {
    request({ ...apis.role.getRoleList, params: { ...params } }).then((data) => {
      setData(data)
    }).catch((err) => {
      console.log(err)
      message.info(err.msg || err.message)
    })
  }


  function stop(ids, status) {
    Modal.confirm({
      title: "删除后角色对应账号权限也会被自动停用，请谨慎操作",
      okText: '确认',
      cancelText: '取消',
      onOk() {
        request({ ...apis.role.stop, urlData: { id: ids } }).then((data) => {
          getRoleList({ pageNum: 1, pageSize: 100 })
        }).catch((err) => {
          console.log(err)
          message.info(err.msg || err.message)
        })
      }
    });
  }

  const dataSource = [
    {
      name: '置业顾问',
      status: '1',
    },
    {
      name: '置业经理',
      status: '1',
    },
  ];

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

    //   render: (text, record) => <img src={record.img} className={channels.touxiang} />,
    // },
    {
      title: '角色名称',
      dataIndex: 'roleName',
      key: 'roleName',
      align: 'center',
    },

    {
      title: '操作  ',
      dataIndex: 'status',
      key: 'status',
      align: 'center',

      render: withActions((text, record) => {
        return record.isAdmin ? [] :
          [
            record.status === 1 ?
            <AuthButton name="admin.role.publish" noRight={null}>
              <EditIcon type="delete" text="删除" onClick={() => stop(record.roleId, record.status)} />
            </AuthButton> : null,

            <AuthButton name="admin.role.put" noRight={null}>
              <EditIcon text="编辑" type="edit" onClick={() => toEditRole(record.roleId)} />
            </AuthButton>,
          ]
      }),
    },
  ];


  return (
    <>
      <AuthButton name="admin.role.add" noRight={null}>
        <Button type="danger" className={styles.addBtn} onClick={addRole}>新增</Button>
      </AuthButton>
      <div className={Styles.roletext}>

        <Table rowKey="roleList" dataSource={data.records} columns={columns} />
      </div>
    </>

  )
}
export default header
