import React, { useState } from 'react';
import { Table, Input, InputNumber, Popconfirm, Form, Tag } from 'antd';
import reqwest from 'reqwest';
import  './Table.less';
import { useForm } from 'antd/lib/form/Form';

const columns = [
    {
      title: '平台',
      dataIndex: 'Platform',
      editable: false,
      key: 'Platform',
    //   width: "8%",
    },
    {
      title: 'userid',
      dataIndex: 'UserId',
      editable: false,
      key: 'UserId',
    //   width: "7%",
    },
    {
        title: '名称',
        dataIndex: 'UserName',
        editable: false,
        key: 'UserName',
        // width: "7%",
    },
    {
        title: '标签',
        dataIndex: 'Tags',
        editable: false,
        render: tags => (
            <>
              { 
              tags != null ?
              tags.map( tag => {
                let color = "purple";
                if (tag.length < 3) {
                    color = 'green';
                } else if (tag.length < 6) {
                    color = 'geekblue';
                } else if (tag.length < 9) {
                    color = 'volcano';
                }
   
                return (
                  <Tag color={color} key={tag}>
                    {tag}
                  </Tag>
                );
              } 
            
              ) : null}
            </> )
    },
    {
        title: '粉丝数(关注)',
        dataIndex: 'Followers',
        key: 'Followers',
        width: "8%",
    },
    {
        title: '礼物数(币|钱)',
        dataIndex: 'Gratuity',
        key: 'Gratuity',
        width: "8%",
    },
    {
        title: '数据更新时间',
        dataIndex: 'UpdateTime',
        key: 'UpdateTime',
        // width: "7%",
    },
  ];


 

  const getRandomuserParams = params => {
    return {
      psize: params.pagination.pageSize,
      page: params.pagination.current,
      // ...params,
    };
  };


  

class DataTable extends React.Component {



    state = {
        data: [],
        platform: "openrec",
        pagination: {
          current: 1,
          pageSize: 20,
          position: ["topLeft"],
        },
        loading: false,
      };

      expandedRow = (record) => {

        const ecolumns = [ 
        {
           title: 'uid',
           dataIndex: 'Uid',
           key: 'Uid',
         },
        {
            title: '直播地址',
            dataIndex: 'LiveUrl',
            key: 'LiveUrl',
        },
        {
             title: '直播标题',
             dataIndex: 'LiveTitle',
             key: 'LiveTitle',
         },
         {
             title: '近直播开始时间',
             dataIndex: 'LiveStartTime',
             key: 'LiveStartTime',
         },
         {
             title: '近直播结束时间',
             dataIndex: 'LiveEndTime',
             key: 'LiveEndTime',
         },
         ];

         var data = [record];
         return <Table  rowClassName="subtable" size="small"  bordered={true}  columns={ecolumns} dataSource={data} pagination={false} />;
       };
    
      updatePlatform(p) {

        const { pagination } = this.state;
        pagination.current = 1;
        this.setState({platform:p}, ()=>{
            this.fetch({      
                pagination 
            });
        });
        
      }
    
      componentDidMount() {
        const {platform} = this.state;
        this.updatePlatform(platform);
      }
    
      handleTableChange = (pagination, filters, sorter) => {
        // console.log(filters, sorter);
        this.fetch({
          sortField: sorter.field,
          sortOrder: sorter.order,
          pagination,
          ...filters,
        });
      };
    
      fetch = (params = {}) => {
        this.setState({ loading: true });
        const {platform} = this.state;
        console.log(platform);
        reqwest({
          url: 'http://localhost:5500/' + platform + '/query',
          method: 'get',
          type: 'json',
          data: getRandomuserParams(params),
        }).then(data => {
          var result = JSON.parse(data)
          this.setState({
            loading: false,
            data: result.Data?result.Data:[],
            pagination: {
              ...params.pagination,
              total: 100000,
            },
          });
        });
      };
    
      render() {
          
        const { data, pagination, loading } = this.state;
        return (
          <Table
            bordered={true}
            size={"middle"}
            // scroll={{ x: "150vh", y:"800" }}
            columns={columns}
            dataSource={data}
            pagination={pagination}
            loading={loading}
            onChange={this.handleTableChange}
            expandable={{  
                expandedRowRender: this.expandedRow
            }}
          />
        );
      }
};


export default DataTable;
//