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

const toEditList = (drainageId) => () => {
  console.log(drainageId,'12344567')
  router.push({
    pathname: '/activity/drainage/Detail',
    query: {
      drainageId
    },
  });
}



const data = [

  {
    Id: '1',
    name: 'zls',
    // StartTime:'',
    // EndTime:'',
    number: 33,
  }


];

const header = (props) => {
  // const [data, setData] = useState({ data: [] })
  const [datas, setDatas] = useState([])//表格数据
  const [date, setDate] = useState({})
  const [formsdate, setFormsDate] = useState({})
  //   const [page, changePage] = useState({})
  useEffect(() => {

    gettaDrainage({ pageNum: 1, pageSize: 10 })
    setDate({
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
    })
    
  }, [])

  function gettaDrainage (params) {
    request({ ...apis.activity.taDrainage, params: params  }).then((data) => {
      setDatas(data)
      console.log(data.records, '_213_')
    }).catch((err) => {
      console.log(err)
      message.info(err.msg || err.message)
    })
  }

  const deleteDrainage = (drainageIid) => () => {
    Modal.confirm({
      title: '确认删除该引流？',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        request({ ...apis.activity.deletetaDrainage,urlData: { id: drainageIid }, }).then((data) => {
          message.info('操作成功！')
          gettaDrainage({ pageNum: 1, pageSize: 10 })
        }).catch((err) => {
          console.log('111111',err)
          message.info(err.msg || err.message)
        })
      }
    });
  }
  
  const columns = [
    {
      title: 'H5项目编号',
      dataIndex: 'drainageId',
      key: 'drainageId',
      align: 'center',
    },
    {
      title: 'H5项目名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      render: (text, datas) => <div style={ { color: '#66B3FF' } } onClick= {() => addshowModal(datas)} >{ datas.name }</div>,
    },
    {
      title: 'appid',
      dataIndex: 'appid',
      key: 'appid',
      align: 'center',
      // render: (text, datas) => <div style={ { color: '#66B3FF' } } onClick= {() => addshowModal(datas)} >{ datas.name }</div>,
    },
    {
      title: 'secret',
      dataIndex: 'appSecret',
      key: 'appSecret',
      align: 'center',
      // render: (text, datas) => <div style={ { color: '#66B3FF' } } onClick= {() => addshowModal(datas)} >{ datas.name }</div>,
    },
    {
      title: '新建时间',
      dataIndex: 'createDate',
      key: 'createDate',
      align: 'center',
      render: (x, row) => (
        <>
          <span>{ row.createDate && moment(row.createDate).format('YYYY-MM-DD hh:mm:ss') }</span>
        </>
      ),
    },
    {
      title: '截止时间',
      dataIndex: 'endDate',
      key: 'endDate',
      align: 'center',
      render: (x, row) => (
        <>
          <span>{ row.endDate && moment(row.endDate).format('YYYY-MM-DD hh:mm:ss') }</span>
        </>
      ),
    },
    {
      title: '参与数',
      dataIndex: 'enlistNum',
      key: 'enlistNum',
      align: 'center',
      // render:
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (text, datas) => (
        <>
          <span style={{ right: '20px', top: '20px', fontSize: ' 0.106rem', zIndex: 1, color: '#FF7E48', cursor: 'pointer' }} onClick={toEditList(datas.drainageId)}>
            查看详情
            </span>
  
          <span style={{ right: '20px', bottom: ' 10px', fontSize: ' 0.106rem', color: '#FF7E48', cursor: 'pointer', marginLeft: 20 }} onClick={deleteDrainage(datas.drainageId)}>
            删除
            </span>
        </>
      ),
    },
  ];
  const Forms = props => {
   
    console.log(date,'---------------')
    console.log(formsdate,'---------------')
    console.log(formsdate,'22222222')
    const fields = [
      {
        label: 'H5项目名称',
        name: 'name',
        type: FieldTypes.Text,
        placeholder:"请输入H5项目名称",
        value: formsdate.name,

      },
      {
        label: '截止时间',
        name: 'endDate',
        type: FieldTypes.DatePicker,
        value:formsdate.endDate ? moment(formsdate.endDate, 'YYYY-MM-DD HH:mm') : null
        // render: <DatePicker placeholder="截止时间" value= {formsdate.endDate} />,
      },


    ]

    const handleSubmit = val => {
      console.log(date,'111---------------')
    console.log(formsdate,'111---------------')
    console.log(formsdate,'11122222222')
      // data: { ...submitValue }

      console.log(formsdate.drainageId,'9999999999999')
      if (formsdate.drainageId) {
        // { ...apis.activity.deletetaDrainage,urlData: { id: drainageIid }, }
        request({ ...apis.activity.updatetaDrainage, urlData: { id: formsdate.drainageId }, data: val}).then((data) => {
          message.info('操作成功！')
          // gettaDrainage({ pageNum: 1, pageSize: 10 })
        }).catch((err) => {
          console.log('111111',err)
          message.info(err.msg || err.message)
        })
       
      } else {

     

        request({ ...apis.activity.addtaDrainage, data: val }).then((data) => {
          message.info("保存成功")
          console.log(data, '22222')
          
        }).catch((err) => {
          message.error(err.msg || err.message)
        })
      }
      setDate({
        visible: false,
      });
      gettaDrainage({ pageNum: 1, pageSize: 10 })
    }

    const handleCancel = val => {
      setDate({
        visible: false,
      });
    }

    return <XForm onSubmit={handleSubmit} onCancel={handleCancel}  fields={fields}></XForm>
    
  }




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

  

  function addshowModal (datas) {

    // alert(datas.drainageId)
console.log(datas,'22222222')
    setFormsDate({
      drainageId:datas.drainageId,
      name:datas.name,
      endDate:datas.endDate,
    })
    console.log(formsdate,'22222222')
    setDate({
      visible: true,
    });
  };
  function showModal () {
    setFormsDate({
      drainageId:'',
      name:'',
      endDate:'',
    })
    setDate({
      visible: true,
    });
  };
  const changePageNum = pageNumber => {
    gettaDrainage({ pageNum: pageNumber, pageSize: 10 })
}

  function handleOk () {


    setDate({
      ModalText: 'The modal will be closed after two seconds',
      confirmLoading: true,
    });
    function setTimeout () {
      setDate({
        visible: false,
        confirmLoading: false,
      });
    };
  };

  function handleCancel () {
    console.log('Clicked cancel button');
    setDate({
      visible: false,
    });
  };
  function handleSubmit(e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      console.log('values', values)
      if (!err) {
        console.log('values', values)
        gettaDrainage({ pageNum: 1, pageSize: 10, ...values })
      }
    });
  }

  const { getFieldDecorator } = props.form;
  const { visible, confirmLoading, ModalText } = date;
  return (
    <>
      <div>
        <Form layout="inline" onSubmit={handleSubmit}>
          <Form.Item>
            {getFieldDecorator('drainageId')(
              <Input
                // prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                placeholder="H5项目编号"
              />,
              // {getFieldDecorator('name', {
              // })(<Input/>)}
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('name')(
              <Input
                // prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                placeholder="H5项目名称"
              />,
            )}
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className={styles.searchBtn} onClick>
              搜索
          </Button>
            <Button style={{ marginLeft: 8 }} onClick={handleReset}>
              重置
            </Button>
          </Form.Item>
        </Form>
        {/* <AuthButton name="admin.buildingDynamic.add.post" noRight={null}> */}
        <Button type="danger" className={styles.addBtn} onClick={showModal}>新增</Button>

        <Modal
          title="新建H5项目"
          visible={visible}
          //  onOk={handleOk}
          confirmLoading={confirmLoading}
          onCancel={handleCancel}
          footer={null}
        >
          <Forms />
        </Modal>
        <Table columns={columns} dataSource={datas.records} pagination={false} rowKey="drainageList"/>
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
       <Pagination showQuickJumper defaultCurrent={1} total={datas.total} onChange={(e) => changePageNum(e)} />
      </div>
      </div>
    </>
  )
}
const WrappedHeader = Form.create({ name: 'header' })(header);

export default WrappedHeader
