import React, { useEffect, useState } from 'react';
import { Button, Collapse, Popconfirm } from 'antd';
import ImageListUpload from '@/components/XForm/ImageListUpload';
import AuthButton from '@/components/AuthButton'

const { Panel } = Collapse;

const ImageList = props => {
  const { data,updateImg } = props;
  const [imageList, setImageList] = useState([]);

  function getImgUrl() {
    return (data.buildingImgList || []).map(item => item.url);
  }

  function onImageChange(e) {
    setImageList(e)
    console.log(e,'onImageChange')
       
    // 新增加图片后，更新后端数据
    const img = e.map((item, index) => ({ imgType: 'aparment', url: item, orderNo: index }))
    updateImg({ ...data, img }).then(res=>{

    })
  }

  useEffect(() => {
    setImageList(getImgUrl());
  }, [data]);

  return <ImageListUpload value={imageList} disabled onChange={onImageChange} unlimited={false} />;
};

export default props => {
  const { dataList = [] } = props;

  const Extra = item => (
    <>
      <AuthButton name="building.photo.rename">
        <Button type="link" size="small" onClick={(e)=>{e.stopPropagation(),props.onRename(item)}}>
          重命名
        </Button>
      </AuthButton>
      <AuthButton name="building.photo.delete">
        <Button
          type="link"
          size="small"
          style={{ color: 'red' }}
          onClick={e =>{ e.stopPropagation(),props.onDelete(item)} }
        >
          删除
        </Button>
      </AuthButton>
    </>
  );

  return (
    <Collapse defaultActiveKey={['0']} expandIconPosition="right" style={{ marginTop: '2em' }}>
      {dataList.map((row, index) => {
        return (
          <Panel header={row.apartmentName} key={index} extra={Extra(row)}>
            <ImageList data={row} updateImg={props.updateImg}></ImageList>
          </Panel>
        );
      })}
    </Collapse>
  );
};
