import React, { useState, useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
import getCustomHeader from '@/components/token-header';
import PageHead from '@/components/page-head';
import { ajax } from '@/utils';
import {
    Table,
    Dialog,
    Form,
    Input,
    Checkbox,
    Message,
    Pagination,
  } from '@alifd/next';
import styles from './index.module.scss';

const { Column } = Table;

let edit = {};
const FormItem = Form.Item;
const SEARCHLABEL = {buyerId:'买家ID',storeId:'商铺ID',itemId:'商品ID',orderId:'订单号',skuId:'skuID',gradeValue:'评分分数'};

const Comment = ({ data={} }) => {
  const [contentData, setContent] = useState(data);
  const [replyId, setReplyId] = useState('');
  const [page, setPage] = useState(1);
  const [lastQueryRequest, setLastQuery] = useState({});
  const [total, setTotal] = useState(data.totalCount);
  const { commentList } = contentData;
  const refreshComment = async() => {
    const commentData = await ajax({
      api: 'getReply',
      method: 'post',
      data: JSON.stringify({ onlyOnline: false, exceptFunction: false }),
      type: 'json',
      contentType: 'application/json',
      headers: getCustomHeader()
    });
    if (commentData.success) {
      setContent(commentData.result);
    }
  }
  const tableRender = (value: any, index: number, record: Object) => {
    if (record.replyCommentList.length) return;
    return (
        <span onClick={() => {
          setReplyId(record.commentId);
        }}>
          立即聊天
        </span>
    );
  };
  const commentTextRender = (value: any, index: number, record: Object) => {
    return (
      <>
        <p>{record.commentText}</p>
        {
          record.replyCommentList.map(item => {
            return(
              <p className={styles.replyComment}>回复内容：{item.replyText}</p>
            )
          })
        }
      </>
    )
  }
  const ReplyDialog = () => {
    return (
      <Dialog
        title="回复留言"
        visible={!!replyId}
        footer={false}
        onClose={() => {setReplyId('')}}
      >
        <Form>
          <FormItem label='replyText:' key='replyText'>
            <Input.TextArea id='replyText' name='replyText' style={{width:'300px'}}/>
          </FormItem>
          <Form.Submit type="primary" validate onClick={async(successData, errorData) => {
            if (!errorData) {
              const commentData = await ajax({
                api: 'replyComment',
                method: 'post',
                data: JSON.stringify({...successData, originalCommentId: replyId}),
                type: 'json',
                contentType: 'application/json',
                headers: getCustomHeader()
              });
              if (commentData.success) {
                refreshComment();
                setReplyId('');
              } else {
                Message.error(commentData.message);
              }
            } else {
              console.log(errorData);
            }
          }}>
            回复
          </Form.Submit>
        </Form>
      </Dialog>
    )
  }
  const MoreFilter = ({}) => {
    return (
      <div style={{marginTop:'45px'}}>
        <Form inline labelAlign='inset'>
          {
            Object.keys(SEARCHLABEL).map(item => {
              let content;
              switch(item) {
                case 'enableCount':
                  content = (<Checkbox value="item" id={item} name={item}>{SEARCHLABEL[item]}</Checkbox>)
                  break;
                default:
                  content = (<Input style={{width:'200px'}} id={item} name={item} />);
                  break;
              }
              return (
                <FormItem label={item!=='enableCount' && `${SEARCHLABEL[item]}:`} key={item}>
                  {content}
                </FormItem>
              )
            })
          }
          <Form.Submit type="primary" validate onClick={async(successData, errorData) => {
            if (!errorData) {
              const commentData = await ajax({
                api: 'getReply',
                method: 'post',
                data: JSON.stringify({ ...successData, enableCount: true }),
                type: 'json',
                contentType: 'application/json',
                headers: getCustomHeader()
              });
              if (commentData.success) {
                setContent(commentData.result);
                setPage(1);
                const {totalCount} = commentData.result;
                const {buyerId, storeId, itemId, orderId, skuId, gradeValue, enableCount} = commentData.result.lastQueryRequest;
                setLastQuery({buyerId, storeId, itemId, orderId, skuId, gradeValue, enableCount});
                setTotal(totalCount);
              }
            } else {
              console.log(errorData);
            }
          }}>
            查询
          </Form.Submit>
        </Form>
      </div>
    )
  }
  return (
    <div className={styles.listEmployeeBox}>
    <PageHead title="评价管理" />
      <div className={styles.contentBox}>
        <div className={styles.contentHead}>
        <MoreFilter />
        </div>
        <Table hasBorder={false} dataSource={commentList}>
          <Column title="订单号码" dataIndex="orderId" width={"20%"} />
          <Column title="商品" dataIndex="skuDesc" width={"20%"} />
          <Column title="产品评价" cell={commentTextRender} width={"40%"} />
          <Column title="回复" cell={tableRender} width={"20%"} />
        </Table>
        {!!commentList.length && (<Pagination
          className={styles.contentPag}
          current={page}
          pageSize={20}
          total={total}
          onChange={async (page: number) => {
            const commentData = await ajax({
              api: 'getReply',
              method: 'post',
              data: JSON.stringify({ ...lastQueryRequest, currentPageNum: page, pageSize: 20 }),
              type: 'json',
              contentType: 'application/json',
              headers: getCustomHeader()
            });
            if (commentData.success) {
              setContent(commentData.result);
              setPage(page);
            }
          }}
        />)}
        <ReplyDialog />
      </div>
    </div>
  );
};

export default Comment;