import React, { useState, useEffect } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Form, Pagination, Card, Button, Icon, Tooltip, message,   notification, Modal, Table } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import className from 'classnames';
import Cell from '../../../components/Cell';
import styles from './style.less';
import { fetch, apis } from '../../../utils/request';
import request from '../../../utils/request';
import AuthButton from '@/components/AuthButton';



function header(props) {
  // 获取初始化数据
  const [ data, setData ] = useState({})

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

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

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

  const changePageNum = (pageNumber) => {
    getList({ pageNum: pageNumber, pageSize: 10 })
  }


  // 跳转到编辑资讯
  const toEditNews = (id) => () => {
    router.push({
      pathname: '/channel/edit',
      query: {
        id
      },
    });
  }

  
  const changeNewsStatus = (row, newsId) => () => {
    const title = row.status === 0 ? '确定启用吗': '停用后，此账号将无法登录渠道代理商后台'
    Modal.confirm({
      title: title,
      okText: '确认',
      cancelText: '取消',
      onOk() {
        if(row.status === 0){
          request({ ...apis.channel.put, urlData: { id: newsId }, data: { ...row, status: 1 } }).then((data) => {
            message.info('操作成功！')
            getList({ pageNum: 1, pageSize: 10 });
          }).catch((err) => {
            console.log(err)
            message.info(err.msg || err.message)
          })
        }else{
          request({ ...apis.channel.put, urlData: { id: newsId }, data: { ...row, status: 0 } }).then((data) => {
            message.info('操作成功！')
            getList({ pageNum: 1, pageSize: 10 });
          }).catch((err) => {
            console.log(err)
            message.info(err.msg || err.message)
          })
        }
        
      }
    });
  }
  /**
   *
   *
   * @param {*} props
   * @returns
   */
  const columns = [
    {
      title: '渠道代理',
      dataIndex: 'channelProxyName',
      key: 'channelProxyName',
      align: 'center',
    },
    {
      title: '账号名',
      dataIndex: 'userName',
      key: 'userName',
      align: 'center',
      render: (x, row) => <span>{row.userName === null || row.userName === '' ? row.channelTel : row.userName}</span>,
    },
    {
      title: '小程序总数',
      dataIndex: 'appMaxNum',
      key: 'appMaxNum',
      align: 'center',

    },
    {
      title: '现有小程序',
      dataIndex: 'appCurrentNum',
      key: 'appCurrentNum',
      align: 'center',
      render: (appCurrentNum) => <span>{appCurrentNum === 0 || appCurrentNum == null ? 0 : appCurrentNum}</span>,
    },
    {
      title: '服务到期时间',
      dataIndex: 'expireDate',
      key: 'expireDate',
      align: 'center',
      render: (x, row) => <><span>{`${moment(row.expireDate).format('YYYY-MM-DD')}`}</span></>,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      render: (status) => <span>{status === 1 ? '启动' : '停用'}</span>,
    },
    {
      title: '操作',
      dataIndex: 'handle',
      key: 'handle',
      align: 'center',
      render: (x, row) => (
        <>
          <AuthButton name="admin.taNewsType.id.delete" noRight={null}>
            <span style={{ color: '#EF273A', marginRight: '20px', cursor: 'pointer' }} onClick={changeNewsStatus(row, row.channelId)}>
              {row.status == 1 ? '停用' : '启用'}<Icon type="shopping-cart" className={styles.shoppingCart} />
            </span>
          </AuthButton>
          <AuthButton name="admin.taNewsType.id.put" noRight={null}>
            <span style={{ color: '#FF925C', cursor: 'pointer' }} onClick={toEditNews(row.channelId)}>
              编辑<Icon type="form" className={styles.edit} />
            </span>
          </AuthButton>
        </>
      ),
    },
  ];
  function handleReset() {
    props.form.resetFields();
    getList({ pageNum: 1, pageSize: 10 })
  }

  const { getFieldDecorator } = props.form
  return (

    <>
      <AuthButton name="admin.taNewsType.post" noRight={null}>
        <Button type="danger" className={styles.addBtn} onClick={toEditNews()}>新增</Button>
      </AuthButton>
      <Table rowKey="newsType" dataSource={data.records} columns={columns} pagination={false} />
      <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