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 apis from '../../../services/apis';
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 = (data) => () => {
    console.log(data,"11111")
    if(data.status === 1){
      Modal.confirm({
        title: '确认停用该角色？',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          request({ ...apis.staff.change, urlData: {id:data.userId,type:'off'}}).then((data) => {
            message.info("操作成功")
            props.onFresh()
          })
        }
      });
    }else{
      Modal.confirm({
        title: '确认启用该角色？',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          request({ ...apis.staff.change, urlData: {id:data.userId,type:'on'}}).then((data) => {
            message.info("操作成功")
            props.onFresh()
          })
        }
      });
    }
    
  }
  return (

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

        <Avatar src={data.avatar} style={{ width: 94, height: 94 }} />
        <Button type="link" style={{ marginLeft: '10px', color: '#FF925C', fontSize: '18px' }} onClick={toEditStaff(data.userId)}>
          编辑
                <Icon type="form" style={{ color: '#C0C4CC', marginLeft: '8px' }} />
        </Button>
        <Button type="link" style={{ fontSize: '18px', color: '#cacaca', position: 'absolute', top: '50px', right: '0' }} onClick={confirm(data)}>
          {data.status === 1 ? '停用' : '启用'}
                <Icon type={data.status===1?'close-circle':'form'} style={{ color: '#C0C4CC', marginLeft: '8px' }} />
        </Button>
        {/* <Button type="link" style={{ fontSize: '18px', color: '#FF925C', position: 'absolute', top: '50px', right: '0' }} onClick={confirm}>
          启用
                <Icon type="form" style={{ color: '#C0C4CC', marginLeft: '8px' }} />
        </Button> */}

      </div>
      <div>

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

        <p className={Styles.cardText} >姓名 : {data.userName}
        </p>
        <p className={Styles.statusText} > 状态 : {data.status === 1 ? '启用' : '停用'} </p>
        <p className={Styles.phoneText} >
          电话 : {data.phone}
        </p>
      </div>

    </Card>
  )
}

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

  const getList = (params) => {
    request({ ...apis.staff.taUser, 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" style={{ margin: '20px 0', padding: '2px 36px' }} onClick={toEditStaff()}>新增</Button>
      <Row style={{ padding: ' 0 10px' }}>
        {
          tempData.map((item, index) => (
            <Col span={6}>
              <CartBody data={item} onFresh={()=> getList({ pageNum: 1, pageSize: 10 })}/>
            </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