import React, { useState, useEffect } from 'react';
import styles from './index.less';


import { Upload, Modal,Row,Col,Input,List,Card, Button } from 'antd';
import { PlusOutlined,PictureFilled } from '@ant-design/icons';



import Picture from './Picture';
import { getUrlPicName } from '../../utils/string';
const PictureOptions = (props:any) => {

  const { value, onChange } = props
  const [rowkey,setRoKey]=useState(0)
  const [fileList, setFileList] = useState([])
  const [fileListLen, setFileListLen] = useState(0)
  const add = () => {
    setFileListLen(fileListLen + 1)
    setFileList(fileList => ([...fileList, { uid:fileListLen + 1 ,index: fileListLen + 1, name: null, pic: null }]))    
  }
  useEffect(() => {
    var tmp = value
    if (tmp != null&&tmp.length>0&&(typeof tmp[0])=="object") {
      console.log("图片集合使用默认值")
      console.log(tmp)
      var initArray = new Array()
      tmp.map((item: any, index: any) => {
        if (item.pic == null) {
          item.pic = getUrlPicName(item.url)          
        }
        initArray.push({
          index: index,
          name: item.name,
          pic: item.pic,
          url: item.url,
          uid: index,
          status:"Done"})
      })
      console.log(initArray)
      setFileList(initArray)
      setFileListLen(initArray.length + 1)
      onChange( CheckParm(initArray))
    }
  }, [value])
  
  const Delete = (index: any, e: any) => {

    var tmp = fileList
    tmp.splice(index, 1);
    setFileList(fileList => ([...tmp]))
    onChange( CheckParm(tmp))
  }
  const CheckParm = (values: Array<any>) => {
    var tmp = new Array()
    values.map((item, index) => {
      if (item.name != null && item.pic != null) {
        tmp.push(item.name+"&"+item.pic)
      } else {        
        tmp=[]
      }
    })

    return tmp
  }
  const DeletePictureName = (index: any, values: any) => {
    var tmp = fileList
    tmp[index].pic = null   

    console.log(tmp)
    setFileList(fileList => ([...tmp]))
    console.log( CheckParm(tmp));
    
    onChange( CheckParm(tmp))
  }
  const PictureName=(index: any,values:any) => {
    var tmp = fileList
    console.log(fileList)
    tmp[index].pic = values 
    tmp[index].url = null 
    console.log("图片文件发生改变")
    console.log(CheckParm(tmp))
    onChange( CheckParm(tmp))
  }
  const InputGet = (index: any, e: any) => {    
    var tmp = fileList
    if ((e.target.value).length == 0) {
      tmp[index].name = null
    } else {
      tmp[index].name = e.target.value
    }
    console.log(tmp)
    console.log(CheckParm(tmp));
    
    onChange(CheckParm(tmp))
  }
  return (
    <div>
   
      {
        fileList.map((item, index) => {  
          return (
            <Row key={item.index}>
              <Col><Picture  onSubmit={PictureName.bind(this, index)} onDelete={DeletePictureName.bind(this, index)} data={props.data} defaultValue={item.url!=null? [item]:null} disabled={props.disabled} /></Col>
              {/* defaultValue={[item]}                        */}
              <Col>
                <Row><Input placeholder={"Facility Name"} onChange={InputGet.bind(this, index)} defaultValue={item.name} disabled={props.disabled}/></Row> 
                {
                  props.disabled ? null :
                  <Row style={{ marginTop: 20 }}><a onClick={Delete.bind(this, index)}>delete</a></Row>
                }
              </Col>
            </Row>
          )
        })
      }

      <div>
        {
          props.disabled?null:
          <Button type="primary" onClick={add}>Add New</Button>
        }
       
      </div>   

    </div>
  );
};

export default PictureOptions;



