import React, { useState, useEffect, useRef } from 'react';
import styles from './css/Detail.less';
import { Input ,Form,Row,Col,Upload,Spin, Button,Descriptions} from 'antd';

import { Link, useIntl, connect, Dispatch } from 'umi';
import TextArea from 'antd/lib/input/TextArea';

import { PlusOutlined } from '@ant-design/icons';

import Line from '../../components/Line/Line';
import TitleBack from '../../components/TitleBack/TitleBack';
import PictureOptionsRow from '../../components/PictureOptions/PictureOptionsRow';
import { getCookie } from '@/utils/method';
import { timestampToTime } from '@/utils/time';
import { validateMessages } from '@/utils/params';

const treatStatus=["Pending","Processed"]

const Detail = (props:any) => {


  const [editorFlag, setEditorFlag] = useState(true);

  const { dispatch, location,CurDataDetail } = props;
  const fromRef=useRef(null)
  const RA = (index:any,values: any) => { dispatch({ type: 'CommunityService/RA', playload: { index: index, body: values } }) };

  const [curString, setCurString] = useState({ readyState: false})
  const [loading, setLoading] = useState(false)

  const [headTitle, setHeadTitle] = useState("");

  const headTitles = [
    "Reply To Community maintenance",
    "Reply To Shelf life Service",
    "Reply To Owner Complaints",
    "Reply To Report Online",
    "Reply To Problem Feedback"]

  useEffect(() => {

    if ((location.pathname).indexOf("/Edit")>-1) {
      setEditorFlag(true)
    } else {
      setEditorFlag(false)
    }

    RA(21,{
      serviceType: location.query.serviceType,
      id: location.query.id
    })
    setHeadTitle(headTitles[parseInt(location.query.serviceType)- 1])
    setLoading(true)

  },[location.pathname]);
  useEffect(() => {

    if (CurDataDetail != null && curString.readyState == true) {
      console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@")
      console.log(CurDataDetail)
      if (!editorFlag) {
        var tmp = { replyContent: CurDataDetail.replyContent, file: CurDataDetail.replyImgUrl }
        fromRef.current.setFieldsValue(tmp)
      }
      setLoading(false)
    }
  }, [CurDataDetail])
  useEffect(()=>{
    setCurString({ readyState: true })
    console.log("页面准备好了")
  },[])

  const onFinish = (values:any) => {
    console.log(values)
    var val = values;
    val.handleName =getCookie("name")
    val.handleContacts=getCookie("phone")
    val.type =""+ location.query.serviceType
    val.id = location.query.id
    val.userId =  location.query.user_id
    val.communityId =  location.query.community_id
    val.handleStatus = "1"
    // val.file=fileList
    console.log('Success:', val)
    RA(22, val);
    setLoading(true)
  };

  const titleProps = {
    sublist: CurDataDetail != null?['Status : ' + treatStatus[CurDataDetail.status], 'Create Time : ' + CurDataDetail.time]:null,
    title: headTitle
  }

  return (

      <div>
        {CurDataDetail != null ?
      <>
      <Spin spinning={loading}>
      <div className={styles.base}>
      <TitleBack {...titleProps}  />

      <Descriptions>
        <Descriptions.Item >{CurDataDetail.community}</Descriptions.Item>
        <Descriptions.Item  span={2}>{CurDataDetail.home}</Descriptions.Item>
        <Descriptions.Item label="Address" span={3}>{CurDataDetail.address} </Descriptions.Item>
          <Descriptions.Item label="User Name">{CurDataDetail.name}</Descriptions.Item>
          <Descriptions.Item label="Contact Details">{CurDataDetail.phone} </Descriptions.Item>
        <Descriptions.Item >{CurDataDetail.email}</Descriptions.Item>
      </Descriptions>
      <Row gutter={16}>
        <Col span={3}>Description:</Col>
        <Col><TextArea style={{ width: 394, height: 80,padding:8 }} autoSize={false} disabled value={CurDataDetail.content}/></Col>
      </Row>
      <Row gutter={16} style={{marginTop:20}}>
        <Col span={3}>Picture:</Col>
        <Col>{
          CurDataDetail!=null?
            <PictureOptionsRow
            action="/tos/communtiy/service/reply/img"
            disabled={true}
            defaultValue={CurDataDetail.pictrues}
            data={{
              userToken: "token",
              imageType: 'tosCommunityImageReply',
              extends: "",
            }}
            //
          />:null
        }</Col>
      </Row>

      <Line />

      <Form ref={fromRef} name="basic" onFinish={onFinish} validateMessages={validateMessages}>
        {!editorFlag ?
          <Row gutter={16}>
            <Col>Response:</Col>
            <Col  span={6}>{getCookie("name")}</Col>
            <Col>Contract Detail:</Col>
            <Col>{getCookie("phone")}</Col>
          </Row>
          : null}
        <Row gutter={16} style={{ marginTop: 20 }}>
        <Col span={3}>Solution & Conclusion:</Col>
        <Col ><Form.Item name="replyContent" rules={[{required:true,max:300}]} ><TextArea  style={{padding:8, width: 394, height: 80 }} autoSize={false} disabled={!editorFlag}  /></Form.Item></Col>
        </Row>
        <Row gutter={16}>
          <Col span={3}></Col>
          <Col >
                    {/* putSubmit={PictureOptionsRowRef}  */}
                    {
                      CurDataDetail.replyImgUrl != null ? <>
                    <Form.Item name="file">
                      <PictureOptionsRow
                        action="/tos/communtiy/service/reply/img"
                        disabled={!editorFlag}
                        data={{
                        userToken: "token",
                        imageType: 'tosCommunityImageReply',
                        extends: "",
                      }} />
                    </Form.Item>
                    </>:null
                    }





        </Col>
        </Row>
      {
        editorFlag ?
        <><Line /><Row><Col span={3}></Col><Col><Form.Item><Button type="primary" htmlType="submit">Submit</Button></Form.Item></Col></Row></>:null
      }
            </Form>
            </div>
            </Spin>
            </>
        : null}
        </div>
  );
};

function mapStateToProps(state:any) {
  const { CurDataDetail } = state.CommunityService;
  return {
    CurDataDetail
  };
}
export default connect(mapStateToProps)(Detail);

