
import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, message, Table, Divider, Row, Col, Tag, Pagination, Modal, DatePicker } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import styles from '../../style/GoodsList.less';
import router from 'umi/router';
import { Card, Avatar } from 'antd';
import request from '../../../utils/request'
import Styles from './style.less';
import apis from '../../../services/apis';
import AuthButton from '../../../components/AuthButton';

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: (text, record) => <>
    {record.isAdmin ? "" : 
      <>
        <AuthButton name="admin.role.publish" noRight={null}>
        <span style={{ color: '#1990FF', marginRight: '20px', cursor: 'pointer' }} onClick={() => stop(record.roleId, record.status)}>{ record.status === 1 ? '删除' : '' }
        <Icon type="stop" className={styles.shoppingCart} style={{ fontSize: 14 }}/>
        </span>
        </AuthButton>
        <AuthButton name="admin.role.put" noRight={null}>
        <span style={{ color: '#FF925C', cursor: 'pointer' }} onClick={() => toEditRole(record.roleId)} >编辑
        <Icon type="form" className={styles.edit} />
        </span>
        </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
