import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, Tabs, Radio, DatePicker, message, Upload, Table, Pagination } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import moment from 'moment';
import router from 'umi/router';
import apis from '../../../../../services/apis';
import BuildSelect from '../../../../../components/SelectButton/BuildSelect';
import AuthButton from '@/components/AuthButton';
import styles from './style.less';
import request from '../../../../../utils/request';
import Room from '@/pages/house/house/edit/components/HouseGrid/Room';

const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const { TextArea } = Input;

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

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

  // 查询列表
  const getList = (params) => {
    request({ ...apis.house.paidOrderList, params: { ...params, raiseId:raiseId, payStatus:type },}).then((data) => {
        console.log(data)
        setData(data)
    })
  }
  
  function toDecimal2 (x){
    var f = parseFloat(x);
    if (isNaN(f)) {
      return false;
    }
    var f = Math.round(x * 100) / 100;
    var s = f.toString();
    var rs = s.indexOf('.');
    if (rs < 0) {
      rs = s.length;
      s += '.';
    }
    while (s.length <= rs + 2) {
      s += '0';
    }
    console.log(s)
    return s;
  }
  function regFenToYuan(fen){
    var num = fen;
    num = fen * 0.01;
    num += '';
    var reg = num.indexOf('.') > -1 ? /(\d{1,3})(?=(?:\d{3})+\.)/g : /(\d{1,3})(?=(?:\d{3})+$)/g;
    num = num.replace(reg, '$1');
    console.log(num, 'yuan')
    num = toDecimal2(num)
    return num
  }

  const columns = [
    {
      title: '缴费单编号',
      dataIndex: 'orderId',
      key: 'orderId',
      align: 'center',
    },
    {
      title: '认筹单编号',
      dataIndex: 'raiseRecordId',
      key: 'raiseRecordId',
      align: 'center',
    },
    {
      title: '用户手机号',
      dataIndex: 'tel',
      key: 'tel',
      align: 'center',
    },
    {
      title: '微信订单号',
      dataIndex: 'tradeNo',
      key: 'tradeNo',
      align: 'center',
    },
    {
      title: '实付金额',
      dataIndex: 'totalFee',
      key: 'totalFee',
      align: 'center',
      render: (x,row) => <><span>{row.totalFee != null ? regFenToYuan(row.totalFee) : null}</span></>,
    },
    {
      title: '支付成功时间',
      dataIndex: 'payTime',
      key: 'payTime',
      align: 'center',
      render: (x, row) => <><span>{row.payTime != null ? `${moment(row.payTime).format('YYYY-MM-DD HH:mm:ss')}` : null}</span></>,
    },
    {
      title: '缴费状态',
      // dataIndex: 'payStatus1',
      // key: 'payStatus1',
      align: 'center',
      render: (text, record) => (<><span>{record.payStatus === 'paid' ? '已缴费': record.payStatus === 'refunded' ? '已退费' : ''}</span></>),
    },
    // {
    //   title: '退费结果',
    //   // dataIndex: 'payStatus2',
    //   // key: 'payStatus2',
    //   align: 'center',
    //   render: (text, record) => (<><span>{record.payStatus === 'refunded' ? '已退费':'未退费'}</span></>),
    // },
    // {
    //   title: '退费单编号',
    //   dataIndex: 'refundNo',
    //   key: 'refundNo',
    //   align: 'center',
    // },
  ];
  
  const changePageNum = (pageNumber) => {
      getList({ pageNum: pageNumber, pageSize: 10, raiseId : raiseId, payStatus:type, ...props.form.getFieldsValue() })
  }

  // 提交事件
const handleSubmit = (e, values) => {
  console.log('submitValuesubmitValuesubmitValue', values)
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        let {liveTime, ...submitValue} = values
        if (submitValue.payStartTime != null){
          submitValue.payStartTime = moment(submitValue.payStartTime).format('YYYY-MM-DD HH:mm:ss')
        }
        if (submitValue.payEndTime != null){
          submitValue.payEndTime = moment(submitValue.payEndTime).format('YYYY-MM-DD HH:mm:ss')
        }
        getList({ pageNum: 1, pageSize: 10, raiseId : raiseId, payStatus:type, ...submitValue })
      }
    });
  }

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

  const { getFieldDecorator } = props.form
  return (

    <>
      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
        <Form.Item>
          {getFieldDecorator('orderId')(
            <Input placeholder="缴费单编号"/>
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('raiseRecordId')(
            <Input placeholder="认筹单编号"/>
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('tel')(
            <Input placeholder="用户手机号"/>
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('tradeNo')(
            <Input placeholder="微信订单号"/>
          )}
        </Form.Item>
        {/* <Form.Item>
          {getFieldDecorator('refundNo')(
            <Input placeholder="退费单编号"/>
          )}
        </Form.Item> */}
        <Form.Item>
          {getFieldDecorator('payStatus')(
            <Select style={{ width: '180px' }} placeholder="缴费状态">
              <Option value="paid">已缴费</Option>
              <Option value="unpaid">未缴费</Option>
            </Select>,
          )}
        </Form.Item>
        {/* <Form.Item>
          {getFieldDecorator('shareType')(
            <Select style={{ width: '180px' }} placeholder="退费结果">
               <Option value="housePost">不限</Option>
               <Option value="houseApp">成功</Option>
               <Option value="houseApp">失败</Option>
            </Select>,
          )}
        </Form.Item>  */}
        <Form.Item>
          {getFieldDecorator('payStartTime')(
            <DatePicker placeholder="支付成功开始时间"/>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('payEndTime')(
            <DatePicker placeholder="支付成功结束时间"/>,
          )}
        </Form.Item>  
        <Form.Item>
        <AuthButton name="admin.extendContent.search" noRight={null}>
          <Button type="primary" htmlType="submit" className={styles.searchBtn}>
            搜索
          </Button>
          </AuthButton>
          <Button style={{ marginLeft: 8 }} onClick={handleReset}>
              重置
            </Button>
        </Form.Item>
      </Form>
      <div style={{marginTop:'20px', marginBottom:'20px'}}><span>共筛选出{data.total}条数据</span></div>  
      <Table dataSource={data.records} columns={columns} pagination={false} rowKey="carouseFigureList"/>
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
        <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={changePageNum} current={data.current}/>
      </div>
    </>
  )
}
const PaymentChips = Form.create({ name: 'header' })(header);

export default PaymentChips
