
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 { Meta } = Card;
const { Option } = Select;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

// 跳转到编辑商品
const toEditStaff = (userId) => () => {
  router.push({
    pathname: '/staff/editStaff',
    query: {
      userId
    },
  });
}

/**
 *卡片
 *
 * @returns
 */
const CartBody = (props) => {
  const { data } = props
    
  const confirm = () => {
    Modal.confirm({
      title: '确认停用该角色？',
      okText: '确认',
      cancelText: '取消',
      onOk () {
        console.log('OK');
      },
      onCancel () {
        console.log('Cancel');
      },
    });
  }
  return (

    <Card className={Styles.card}>
      <div>

        <Avatar src={data.avatar} style={{ width: 94, height: 94 }} />
        <span className={Styles.ediText} style={{ marginLeft: '20px' }} onClick={toEditStaff(data.userId)}>
          编辑
                <Icon type="form" style={{ color: '#C0C4CC', marginLeft: '10px' }} />
        </span>
        <span className={Styles.ediText} style={{ marginLeft: '50px' }} onClick={confirm}>
          停用
                <Icon type="close-circle" style={{ color: '#C0C4CC', marginLeft: '10px' }} />
        </span>

      </div>
      <div>

        <span>
          {
            data.taTagsList.map((item, index) => {
              return <Tag className={Styles.cardTag} color={item.tagColor}>{item.tagName}</Tag>
            })
          }
        </span>

        <p className={Styles.cardText} style={{ width: '300px' }}>
          <span>姓名:{data.userName}</span>

          <span style={{ float: "right" }}>状态:{data.status === '1' ? '启用' : '停用'}</span>

        </p>
        <p className={Styles.cardText} style={{ width: '300px' }}>
          <span>电话:{data.phone}</span>
        </p>
      </div>

    </Card>
  )
}


const header = (props) => {
  const [tempData,setTempData] = useState([])
  useEffect(() => {
    getList({ pageNum: 1, pageSize: 10 });
  },[])

  const getList = (params) => {
    request({
      url: '/api/admin/taUser',
      method: 'GET',
      params: { ...params },
    }).then((data) => {
        console.log(data,"listData")
        setTempData(data.records)
    })
  }

  // 分页
  const onChange = (pageNumber) => {
    getList({ pageNum: pageNumber, pageSize: 10 });
  }

  // 提交事件
const handleSubmit = (e, props) => {
  e.preventDefault();
  props.form.validateFields((err, values) => {
    if (!err) {
      console.log('提交数据: ', values)
      getList({ pageNum: 1, pageSize: 10, ...values })
    }
  });
}

  const { getFieldDecorator } = props.form
  return (

    <>
      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
        <Form.Item>
          {getFieldDecorator('userName')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="姓名"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('phone')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="电话"
            />,
          )}
        </Form.Item>

        <Form.Item>

          {getFieldDecorator('status')(
            <Select style={{ width: '180px' }} placeholder="状态" >
              <Option value="1">启用</Option>
              <Option value="0">停用</Option>
            </Select>,
          )}
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" className={styles.searchBtn}>
            搜索
          </Button>
        </Form.Item>
      </Form>
      <Button type="danger" className={styles.addBtn} onClick={toEditStaff()}>新增</Button>

      <Row style={{ padding: ' 0 10px' }}>
        {
          tempData.map((item, index) => (
            <Col span={6}>
              <CartBody data={item} />
            </Col>
          ))
        }
      </Row>

      {/* 分页  */}
      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <Pagination showQuickJumper defaultCurrent={1} total={tempData.total} onChange={onChange} />
      </div>
    </>
  )
}
const WrappedHeader = Form.create({ name: 'header' })(header);

export default WrappedHeader