import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Upload,Modal,Button,Space,Pagination,Tooltip, Radio, Checkbox } from 'antd';

import { Link, useIntl, connect, Dispatch } from 'umi';

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 Template = () => {

  const [namelist, setNamelist] = useState(['A']);

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

  const uploadButton = ( <div><PlusOutlined /> <div className="ant-upload-text">Upload</div></div>);
  const handleCancel = () => { setPreviewVisible(false) };
  const handleChange = (Obj: any) => { setFileList(Obj.fileList) }
  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 onCreate = () => {

    let newlist = [...namelist];
    newlist.push('D')
    console.log(newlist)
    setNamelist(newlist)
  }
  const onDelete = () => {
    let newlist = [...namelist];
    newlist.pop();
    setNamelist(newlist)
  }
  
  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}>Project</div>
        <div className={styles.box1item2}><Input.Search style={{width:200}} /></div>
      </div>

      <div className={styles.box2}>
        <div className={styles.box2item1}>Facility Name</div>
        <div className={styles.box2item2}><Input style={{ width: 200 }} /></div>
        <div className={styles.box2item3}>Management Expense</div>
        <div className={styles.box2item4}><Input style={{ width: 80 }} /></div>
        <div className={styles.box2item5}>Deposit</div>
        <div className={styles.box2item6}><Input style={{width:80}} /></div>
      </div>




        <div style={{marginBottom:20}}>Facility Category</div>
        <ul className={styles.ulist}>
       
        {
          namelist.map((item, index) => {
            return (
              <div key={"namelist"+index}>
                <li className={styles.llist}><div className={styles.alist2}>
                  <div className={styles.alist1}>
                      <Upload  action="https://www.mocky.io/v2/5cc8019d300000980a055e76" listType="picture-card" fileList={fileList} onPreview={handlePreview} onChange={handleChange}>
                        {fileList.length >= 1? null : uploadButton}
                      </Upload>              
                      <Modal  visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
                        <img  alt="picture" style={{ width: '100%' }} src={previewImage} />
                      </Modal> 
                  </div>
                  <div className={styles.alist2box}>
                      <div className={styles.alist2boxitem1}>Name</div>
                      <div className={styles.alist2boxitem2}><Input style={{width:120}}/></div>
                      <div className={styles.alist2boxitem3}><div style={{cursor:"pointer",color:"#FF5151",fontWeight:600}} onClick={onDelete}>Delete</div></div>
                  </div>
                  </div>
                </li>
            </div>
        )})
        }

        <li className={styles.llist}><div className={styles.alist3} onClick={onCreate}></div></li>
      </ul>
      
      <div><p className={styles.alist2boxNone}>none</p></div>

      <div className={styles.box3}>
        <div className={styles.box3item1}>Facility Category</div>
        <div className={styles.box3item2}>
          <div className={styles.box3group1}>         
                <Upload  action="https://www.mocky.io/v2/5cc8019d300000980a055e76" listType="picture-card" fileList={fileList} onPreview={handlePreview} onChange={handleChange}>
                  {fileList.length >= 1? null : uploadButton}
                </Upload>              
                <Modal  visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
                  <img  alt="picture" style={{ width: '100%' }} src={previewImage} />
              </Modal>  
          </div>
        </div>
      </div>
      
      <div className={styles.line}></div>

      <div className={styles.box5}>
        <div className={styles.box5item1}>Opening Hours</div>
        <div className={styles.box5item2}>09:00~20:00</div>
      </div>

      <div className={styles.box6}>
        <div className={styles.box6item1}>Settings For Booking</div>
        <div className={styles.box6item2}><Input style={{width:80}} /></div>
        <div className={styles.box6item3}>Cancel Appointment</div>
        <div className={styles.box6item4}><Input style={{width:80}}/></div>
        <div className={styles.box6item5}>No deposit,cancellation</div>
        <div className={styles.box6item6}><Input style={{width:80}}/></div>
        <div className={styles.box6item7}>Bookable</div>
      </div>
      
      <div className={styles.box7}>
        <div className={styles.box7item1}><Input style={{width:120}}/></div>
        <div className={styles.box7item2}><Input style={{width:80}}/></div>
      </div>

      <div className={styles.box8}>
        <div className={styles.box8item1}><Checkbox>Fixed Time Period For Each Appointment</Checkbox></div>
        <div className={styles.box8item2}><Input style={{width:100}}/></div>
        <div className={styles.box8item3}> —</div>
        <div className={styles.box8item4}><Input style={{width:100}}/></div>
      </div>

      <div  className={styles.line}></div>
      <Button type="primary" style={{ width: 80, height: 32 }}>提交</Button>

    </div>
  );
};


export default Template;
