import React, { useState, useEffect, useRef } from 'react';
import { Button, Modal, message, Input } from 'antd';
import request, { apis } from '@/utils/request';
import AuthButton from '@/components/AuthButton'
import Form from './Form';
import List from './List';
import ModalForm from '../components/ModalForm';

export default props => {
  const [visible, setVisible] = useState(false);
  const { history } = props;
  const { query } = history.location;
  const { id } = query;

  const [loading, setLoading] = useState(false);
  const [reNameData, setReNameData] = useState({ visible: false, data: {} });
  const [list, setList] = useState([]);
  const [value, setValue] = useState('');
  const [confirmLoading, setConfirmLoading] = useState(false);
  const albumRef = useRef();

  const getList = () => {
    // const urlData = { id };
    // const params = { apartmentType: 'apart' };

    setLoading(true);

    request({
      ...apis.building.buildingApartment,
      urlData: { id },
      params: { apartmentType: 'photo' },
    })
      .then(res => {
        setList(res);
        setLoading(false);
      })
      .catch(err => {
        console.error(err.message || err);
        setLoading(false);
      });
  };

  const handleEdit = record => {
    albumRef.current = record;
    setVisible(true);
  };

  function handleDelete(record) {
    Modal.confirm({
      title: '确认删除当前相册',
      // content: 'Bla bla ...',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        request({ ...apis.building.buildingApartmentDelete, urlData: { id: record.apartmentId } })
          .then(() => {
            console.log('删除成功');
            message.success('删除成功');
            getList();
          })
          .catch(err => {
            console.log('删除失败');
          });
      },
    });
  }

  const updateApartment = data => {
  // const values= {}

    // setLoading(true);

    return request({
      ...apis.building.buildingApartmentUpdate,
      // urlData: { id: data.apartmentId },
      data

    })
    //   .then(() => {
    //     console.log('删除成功');
    //     message.success('删除成功');
    //     getList();
    //   })
    //   .catch(err => {
    //     console.log('删除失败');
    //   });
    // deleteData({ urlData })
    //   .then(() => {
    //     getList();
    //     message.success('删除成功');
    //     setLoading(false);
    //   })
    //   .catch(err => {
    //     console.error(err.message || err);
    //     setLoading(false);
    //   });
  };

  const handleSuccess = () => {
    getList();
    setVisible(false);
  };

  const onRename = record => {
    // getList();
    setValue(record.apartmentName);
    setReNameData({ visible: true, data: record });
  };

  useEffect(() => {
    getList();
  }, [id]);

  const handleOk = () => {
    // getList();
    const { data } = reNameData;
    setConfirmLoading(true);
    const values={}
    // // values.buildingId=data.buildingId
    // values.apartmentType = 'photo'
    // values.apartmentName = value
    // values.img = data.img.map((item, index) => ({ imgType: 'aparment', url: item, orderNo: index }))
    values.img = data.buildingImgList
    values.apartmentId=data.apartmentId
    values.buildingId = data.buildingId;
    values.apartmentName = value
    values.apartmentType = 'photo'
    console.log(values,'values')
    updateApartment({ ...values }).then(res => {
      setReNameData({ visible: false, data: {} });
      setConfirmLoading(false);
      getList()
    });
  };

  return (
    <div>
      <div>
        <AuthButton name="building.photo.add">
          <Button type="primary" onClick={() => setVisible(true)}>
            新增相册
          </Button>
        </AuthButton>
      </div>
      <Form
        visible={visible}
        buildingId={id}
        onCancel={() => setVisible(false)}
        onSuccess={() => handleSuccess()}
      />
      <List
        loading={loading}
        dataList={list}
        onEdit={handleEdit}
        onRename={onRename}
        onDelete={handleDelete}
        updateImg={updateApartment}
      />
      <Modal
        title="相册名称"
        visible={reNameData.visible}
        onCancel={() => {
          setReNameData({ visible: false });
        }}
        // onOk={this.handleOk}
        // confirmLoading={confirmLoading}
        // onCancel={this.handleCancel}
        // footer={true}
        destroyOnClose={true}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        // onSubmit={handleSubmit}
      >
        <Input
          value={value}
          onChange={e => {
            setValue(e.target.value);
            // reNameData.data.apartmentName = e.target.value;
          }}
        ></Input>
      </Modal>
    </div>
  );
};
