
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';

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',
    query: {
      id: roleId,
    },
  });
}

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

 function getList(params) {
   request({
     url: '/api/admin/taRole',
     method: 'GET',
     params: { ...params },
 // eslint-disable-next-line no-shadow
 }).then(data => {
     console.log(data)
     setData(data)
 })
 }
// 是否停用
function stop(id) {
  request({
    url: `/api/admin/taRole/stop/${id}`,
    method: 'PUT',
// eslint-disable-next-line no-shadow
}).then(data => {
  getList({ pageNum: 1, pageSize: 100 })
})
}
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) => <>
      <span style={{ color: '#1990FF', marginRight: '20px' }} onClick={() => stop(record.roleId)}>{ record.status === 1 ? '停用' : '启用' }
      <Icon type="stop" className={styles.shoppingCart} style={{ fontSize: 14 }}/>
      </span>
      <span style={{ color: '#FF925C' }} onClick={toEditRole}>编辑
      <Icon type="form" className={styles.edit} />
      </span>
    </>,

  },
];


return (
    <>
      <Button type="danger" className={styles.addBtn} onClick={addRole}>新增</Button>
      <div className={Styles.roletext}>

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

  )
}
export default header
