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) => {
    request({ ...apis.third.thirdPartyMiniapp, params: { ...params },}).then((data) => {
        console.log(data)
        setData(data)
    })
  }

  //重置搜索
  const handleReset = () => {
    props.form.resetFields();
  }

  const toEditThirdParty =  (configId) => () => {
    router.push({
      pathname: '/third/editThirdParty',
      query: {
        configId
      },
    });
  }

  const columns = [
    {
      title: 'appid',
      dataIndex: 'appid',
      key: 'appid',
      align: 'center',
    },
    {
      title: 'appSecret',
      dataIndex: 'appSecret',
      key: 'appSecret',
      align: 'center',
    },
    {
      title: '过期时间',
      dataIndex: 'expirationDate',
      key: 'expirationDate',
      align: 'center',
      render: (x, row) => <><span>{moment(row.expirationDate).format('YYYY-MM-DD')}</span></>
    },
    {
      title: '操作',
      dataIndex: 'handle',
      key: 'handle',
      align: 'center',
      render: (x,row) => (
        <>
          <AuthButton name="admin.buildingDynamic.update.put" noRight={null}>
            <span style={{ color: '#FF925C', cursor: 'pointer' }} onClick={toEditThirdParty(row.configId)}>编辑<Icon type="form" className={styles.edit} /></span>
          </AuthButton>
        </>
      )
    },
  ];
   
  
  const changePageNum = (pageNumber) => {
      getList({ pageNum: pageNumber, pageSize: 10 })
  }
 

  const { getFieldDecorator } = props.form
  return (

    <>
      <AuthButton name="admin.buildingDynamic.add.post" noRight={null}>
        <Button type="danger" className={styles.addBtn} onClick={toEditThirdParty()}>新增</Button>
      </AuthButton>
      <Table rowKey="messageList" 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
