import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, message, Table, Divider, 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 moment from 'moment';
import SelectCity from '../../../components/SelectButton/CitySelect'
import BuildSelect from '../../../components/SelectButton/BuildSelect'
import apis from '../../../services/apis';
import request from '../../../utils/request';
import AuthButton from '@/components/AuthButton';

const { Option } = Select;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

const header = props => {
  const [ data, setData ] = useState({})
//   const [page, changePage] = useState({})

  useEffect(() => {
    getList({ pageNum: 1, pageSize: 10 });
  },[])

  // 查询列表
  const getList = (params) => {
      console.log(params);
    request({ ...apis.groupActivity.list, params: { ...params } }).then((data) => {
        console.log(data)
        setData(data)
    })
  }

  
// 跳转到拼团活动新增
const toEditActivity = (groupActivityId) => () => {
    router.push({
      pathname: '/activity/groupActivity/editGroupActivity',
      query: {
        groupActivityId
      },
    });
  }
  
  /**
   *
   *
   * @param {*} props
   * @returns
   */
  
  const columns = [
    {
      title: '活动标题',
      dataIndex: 'activityName',
      key: 'activityName',
      align: 'center',
    },
    {
      title: '活动时间',
      dataIndex: 'startTime',
      key: 'startTime',
      align: 'center',
      render: (x, row) => <><span>{`${moment(row.startTime).format('YYYY-MM-DD HH:mm:ss')} —— ${moment(row.endTime).format('YYYY-MM-DD HH:mm:ss')}`}</span></>
    },
    {
        title: '所需积分',
        dataIndex: 'integral',
        key: 'integral',
        align: 'center',
      },
    {
      title: '已参与人数',
      dataIndex: 'participateNum',
      key: 'participateNum',
      align: 'center',
    },
    {
      title: '成团数',
      dataIndex: 'groupBuyPeople',
      key: 'groupBuyPeople',
      align: 'center',
    },  
    {
      title: '状态',
      dataIndex: 'activityStatus',
      key: 'activityStatus',
      align: 'center',
      render: (text, records) => {
        if (records.activityStatus === 0) { return '进行中' }
        if (records.activityStatus === 1) { return '未开始' }
        if (records.activityStatus === 2) { return '已结束' }
      },
    },
    {
      title: '操作',
      dataIndex: 'handle',
      key: 'handle',
      align: 'center',
      render: (x, row) => (
        <>
          {row.activityStatus === 0 &&
          <AuthButton name="admin.taShareActivity.list.get" noRight={null}>
        
            <span style={{ color: '#1990FF', cursor: 'pointer' }} onClick={ getSignList.bind(this, row.groupActivityId)}>拼团记录<Icon type="snippets" className={styles.shoppingCart} /></span>
            <span style={{ color: '#1990FF', cursor: 'pointer' }} onClick={endGroupActivity(row)}>结束活动<Icon type="poweroff" className={styles.edit} /></span>
            <span style={{ color: '#1990FF', marginRight: '20px', cursor: 'pointer' }} onClick={topGroupActivity(row, row.weight)}>{ row.weight === 1 ? '取消置顶' : '置顶' }<Icon type="vertical-align-top" className={styles.edit} /></span>
            <span style={{ color: '#1990FF', marginRight: '20px', cursor: 'pointer' }} onClick={recommendGroupActivity(row)}>{ row.sort === true ? '取消推荐首页' : '推荐首页' }<Icon type="vertical-align-top" className={styles.edit} /></span>
        </AuthButton> }

          {row.activityStatus === 1 &&
           <AuthButton name="admin.taShareActivity.list.get" noRight={null}>
                      <span style={{ color: '#FF925C', cursor: 'pointer' }} onClick={toEditActivity(row.groupActivityId)}>编辑<Icon type="form" className={styles.edit} /></span>
                      <span style={{ color: '#1990FF', cursor: 'pointer' }} onClick={endGroupActivity(row)}>结束活动<Icon type="poweroff" className={styles.edit} /></span>
                      <span style={{ color: '#1990FF', marginRight: '20px', cursor: 'pointer' }} onClick={topGroupActivity(row, row.weight)}>{ row.weight === 1 ? '取消置顶' : '置顶' }<Icon type="vertical-align-top" className={styles.edit} /></span>
            <span style={{ color: '#1990FF', marginRight: '20px', cursor: 'pointer' }} onClick={recommendGroupActivity(row)}>{ row.sort === true ? '取消推荐首页' : '推荐首页' }<Icon type="vertical-align-top" className={styles.edit} /></span>
        </AuthButton>
          }

          {row.activityStatus === 2 &&
        <AuthButton name="admin.taShareActivity.list.get" noRight={null}>
           <span style={{ color: '#1990FF', cursor: 'pointer' }} onClick={ getSignList.bind(this, row.groupActivityId)}>拼团记录<Icon type="snippets" className={styles.shoppingCart} /></span>
           <span style={{ color: '#1990FF', marginRight: '20px', cursor: 'pointer' }} onClick={topGroupActivity(row, row.weight)}>{ row.weight === 1 ? '取消置顶' : '置顶' }<Icon type="vertical-align-top" className={styles.edit} /></span>
            <span style={{ color: '#1990FF', marginRight: '20px', cursor: 'pointer' }} onClick={recommendGroupActivity(row)}>{ row.sort === true ? '取消推荐首页' : '推荐首页' }<Icon type="vertical-align-top" className={styles.edit} /></span>
        </AuthButton>
          }
        </>
      ),
    },
  ];
  const getSignList = groupActivityId => {
      router.push({
          pathname: '/activity/groupActivity/helpRecord',
          query: {
            groupActivityId,
          },
        });
  }
  
  const finishDynamic = (row) => {
      Modal.confirm({
          title: '结束以后将无法编辑, 是否继续?',
          okText: '确定',
          cancelText: '取消',
          onOk() {
              request({ ...apis.activity.finish, data: {dynamicId: row.dynamicId, top: ""} }).then((data) => {
                  console.log(data)
                  message.info('操作成功！')
                  getList({ pageNum: 1, pageSize: 10 })
              }).catch((err) => {
                  console.log(err)
                  message.info(err.msg || err.message)
              })
          },
        });
  }
  
  //结束活动
  const endGroupActivity = (row) => () => {
      request({ ...apis.groupActivity.finish, urlData: { id: row.groupActivityId} }).then((data) => {
          console.log(data)
          message.info('操作成功！')
          getList({ pageNum: 1, pageSize: 10 })
      }).catch((err) => {
          console.log(err)
          message.info(err.msg || err.message)
      })
  }

  //置顶
  const topGroupActivity = (row, weight) => () => {
    request({ ...apis.groupActivity.top, data: { groupActivityId: row.groupActivityId, weight: weight } }).then((data) => {
        console.log(data)
        message.info('操作成功！')
        getList({ pageNum: 1, pageSize: 10 })
    }).catch((err) => {
        console.log(err)
        message.info(err.msg || err.message)
    })
  }

  //首页推荐
  const recommendGroupActivity = (row, code) => () => {
    request({ ...apis.groupActivity.top, data: { groupActivityId: row.groupActivityId, sort: row.sort } }).then((data) => {
        console.log(data)
        message.info('操作成功！')
        getList({ pageNum: 1, pageSize: 10 })
    }).catch((err) => {
        console.log(err)
        message.info(err.msg || err.message)
    })
  }
    
  //发布活动
  const sendDynamic = (row) => {
      request({ ...apis.activity.send, urlData: {id: row.dynamicId}}).then((data) => {
          message.info('操作成功！')
          getList({ pageNum: 1, pageSize: 10 });
      }).catch(err => {
          console.log(err)
          message.info(err.msg || err.message)
      })
  }
  
  const changePageNum = 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 })
      }
    });
  }

   //重置搜索
   function handleReset() {
    props.form.resetFields();
  }


  const { getFieldDecorator } = props.form
  return (

    <>
      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
        <Form.Item>
          {getFieldDecorator('cityId')(
            <SelectCity />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('buildingId')(
            <BuildSelect />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('activityName')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="请输入标题"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('activityStatus')(
            <Select style={{ width: '180px' }} placeholder="活动状态">
              <Option value="0">进行中</Option>
              <Option value="1">未开始</Option>
              <Option value="2">已结束</Option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" className={styles.searchBtn}>
            搜索
          </Button>
          <Button style={{ marginLeft: 8 }} onClick={handleReset}>
              重置
            </Button>
        </Form.Item>
      </Form>
      <AuthButton name="admin.taShareActivity.post" noRight={null}>
        <Button type="danger" className={styles.addBtn} onClick={toEditActivity()}>新增</Button>
      </AuthButton>
      <Table dataSource={data.records} columns={columns} pagination={false} rowKey="activityList"/>
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
        <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={changePageNum} current={data.current} />
      </div>
    </>
  )
}
const WrappedHeader = Form.create({ name: 'header' })(header);

export default WrappedHeader