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';

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

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

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

  // 查询列表
  const getList = (params) => {
    request({ ...apis.taliveActivity.taLiveVisit, liveActivityId : liveActivityId, params: { ...params },}).then((data) => {
        console.log(data)
        setData(data)
    })
  }
  
  const columns = [
    {
      title: '头像',
      align: 'center',
      render: (text, records) => <img src={records.photoOravatar} width={50} height={50} />,
    },
    {
      title: '昵称',
      dataIndex: 'nameOrnick',
      key: 'nameOrnick',
      align: 'center',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
      align: 'center',
    },
    {
      title: '身份',
      dataIndex: 'sharePersonType',
      key: 'sharePersonType',
      align: 'center',
      render: (sharePersonType) => <span>{ sharePersonType == 'Realty Consultant' ? '置业顾问' : sharePersonType == 'customer' || sharePersonType === 'estate agent'? '用户' : '游客' }</span>
    },
    {
      title: '访问时间',
      dataIndex: 'createDate',
      key: 'createDate',
      align: 'center',
      render: (x, row) => <><span>{moment(row.createDate).format('YYYY-MM-DD HH:mm:ss')}</span></>
    },
    // {
    //   title: '进入场景',
    //   dataIndex: 'sceneName',
    //   key: 'sceneName',
    //   align: 'center',
    //   render: (x, row) => <span>{ row.sceneName === 'mini_program_code' ? '扫码进入' : row.sceneName === 'search' ? '自主进入' : '小程序分享进入' }</span>
    // },
    {
      title: '访问内容',
      dataIndex: 'liveActivityTitle',
      key: 'liveActivityTitle',
      align: 'center',
      render: (x, row) => <span>直播活动{ row.liveActivityTitle }的活动详情</span>
    },
  ];
  
  const changePageNum = (pageNumber) => {
      getList({ pageNum: pageNumber, pageSize: 10, liveActivityId : liveActivityId, ...props.form.getFieldsValue() })
  }

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

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

  const { getFieldDecorator } = props.form
  return (

    <>
      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
        {/* <Form.Item>
          {getFieldDecorator('sceneType')(
            <Select style={{ width: '180px' }} placeholder="进入场景">
              <Option value="mini_program_code">扫码进入</Option>
              <Option value="share">小程序分享进入</Option>
              <Option value="search">自主进入</Option>
            </Select>,
          )}
        </Form.Item> */}
        <Form.Item>
          {getFieldDecorator('personType')(
            <Select style={{ width: '180px' }} placeholder="身份">
              <Option value="Realty Consultant">置业顾问</Option>
              <Option value="customer">用户</Option>
              <Option value="drift">游客</Option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('phone')(
            <Input 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>
      <span>共筛选出{data.total}条记录</span>
      <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 VisitRecord = Form.create({ name: 'header' })(header);
export default VisitRecord
