import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Menu,Table,Space,Upload,Modal, Button } from 'antd';

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



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

function getBase64(file: Blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

const stylesList5 = [
  styles.box5item2,
  styles.box5item3,
  styles.box5item4
]
const stylesList8 = [
  styles.box8item01,
  styles.box8item01,
  styles.box8item01
]
const Template = (props) => {

  const [picList] = useState(['https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png']);

  const [previewVisible, setPreviewVisible] = useState(false);
  const [previewImage, setPreviewImage] = useState("");
  const [previewTitle, setPreviewTitle] = useState("");
  const [fileList, setFileList] = useState([]);

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

  const { location } = props;
  
  useEffect(() => {
 
    if (location.pathname=="/runTest2") {
      setEditorFlag(true)     
    } else {
      setEditorFlag(false)
    }    
  },[location.pathname]);


  const uploadButton = (
    <div>
      <PlusOutlined />
      <div className="ant-upload-text">Upload</div>
    </div>
  );

  const handleCancel = () =>{ setPreviewVisible(false) };

  const handlePreview = async (file: { url: string; preview: string; originFileObj: Blob; name: any; }) => {
    if (!file.url && !file.preview) {
      file.preview =  await getBase64(file.originFileObj);
    }

    setPreviewImage((file.url || file.preview));
    setPreviewVisible(true);
    setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
  };

  const handleChange = (Obj:any) => {setFileList(Obj.fileList)}

  return (
    <div className={styles.base}>
      {/* 头部组件 */}
      <div className={styles.box}>
        <div className={styles.item1}>Payment Settings</div>
        <button className={styles.item3}>返回</button>
      </div>

      
            {/* 内容组件 */}
      <div  className={styles.box1}>
        <div className={styles.box1item1}>Sunshine Stanford </div>
        <div className={styles.box1item2}>03#06-2050</div>
      </div>
      <div  className={styles.box2}>
        <div className={styles.box2item1}>Albert Street,175,Singapore,Albert,Bugis,Victoria Street,Rochor,Central Singapore 189969</div>
      </div>
      <div  className={styles.box3}>
        <div className={styles.box3item1}>User Name</div>
        <div className={styles.box3item2}>Josephine </div>
        <div className={styles.box3item3}>Contact Details</div>
        <div className={styles.box3item4}>13657724536</div>
        <div className={styles.box3item5}>371712650@qq.com</div>
      </div>
      <div  className={styles.box4}>
        <div className={styles.box4item1}>Warranty Details</div>
        <div className={styles.box4item2}>
        垃圾分类（英文名为：Garbage classification），一般是指按一定规定或标准将垃圾分类储存、分类投放和分类搬运，从而转变成公共资源的一系列活动的总称。分类的目的是提高垃圾的资源价值和经济价值，力争物尽其用。
垃圾在分类储存阶段属于公众的私有品，垃圾经公众分类投放后成为公众所在小区或社区的区域性准公共资源，垃圾分类搬运到垃圾集中点或转运站后成为没有排除性的公共资源。从国内外各城市对生活垃圾分类的方法来看，大致都是根据垃圾的成分、产生量，结合本地垃圾的资源利用和处理方式来进行分类的。
进行垃圾分类收集可以减少垃圾处理量和处理设备，降低处理成本，减少土地资源的消耗，具有社会、经济、生态等几方面的效益。
        </div>
      </div>
      <div  className={styles.box5}>
        <div className={styles.box5item1}>Picture</div>
        {
          stylesList5.map((item, index) => {
            return (
              picList[index] != null ? (
                <div className={item} key={"stylesList5_" + index}>
                  <img alt="pic1" style={{ width: 80, height: 80 }} src={picList[0]} />
                </div>) : (<div key={"stylesList5_" + index} />)
            )
          })
        }
      </div>
      
      <div className={styles.line}></div>

      <div className={styles.box6}>
        <div className={styles.box6item1}>response</div>
        <div className={styles.box6item2}><Input style={{ width: 200 }} placeholder="Please enter a Name" disabled={!editorFlag} /></div>

        <div className={styles.box6item3}>Contract Detail</div>
        <div className={styles.box6item4}><Input style={{ width: 300 }} placeholder="Please enter contrat number" disabled={!editorFlag} /></div>
      </div>

      <div className={styles.box7}>
        <div className={styles.box7item1}>Resolved Complaint</div>
        <div className={styles.box7item2}><TextArea style={{ width: 394, height: 80 }} autoSize={false} disabled={!editorFlag}/></div>        
      </div>

      <div className={fileList.length !=0?styles.box8:styles.box8min}>
        <div className={styles.box8item1}>Resolved Complaint</div>
        <div className={styles.box8item2}>
        {
            editorFlag ?
              (<div>
                <Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" listType="picture-card" fileList={fileList} onPreview={handlePreview} onChange={handleChange}>
                  {fileList.length >= 3 ? null : uploadButton}
                </Upload>              
                <Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
                  <img alt="picture" style={{ width: '100%' }} src={previewImage} />
                </Modal></div>) :                
              (<div>
                {
                  stylesList8.map((item, index) => {
                    return (
                      picList[index] != null ? (
                        <div className={item}  key={"stylesList8_" + index}>
                          <img alt="pic1" style={{ width: 80,height:80 }} src={picList[0]} />
                        </div>):(<div key={"stylesList8_" + index} />)
                    )
                  })
                }                             
                </div>)                               
        }</div>
      </div>
      {
        editorFlag ?
          (<div><div className={styles.line}></div><Button type="primary">summit</Button></div>):(<div/>)
      }
    </div>

  );
};


export default Template;

