import React, { useState, useEffect } from 'react';
import { Button, notification } from 'antd';
import AuthButton from '@/components/AuthButton'
import request from '@/utils/request';
import apis from '@/services/apis';
import Form from './Form';
import List from './List';

export default props => {
  const { history } = props;
  const { query } = history.location;
  const { id } = query;
  const [loading, setLoading] = useState(false);
  const [visible, setVisible] = useState(false);
  const [data, setData] = useState([]);
  const [panoramaList, setPanoramaList] = useState([]);

  useEffect(() => {
    console.log(props);
    getList();
    getPanoramaList();
  }, [id]);

  //获取户型列表
  function getPanoramaList(record) {
    // 网路请求
    request({ ...apis.paorama.panoramaApartList, params: { buildingId: id } })
      .then(res => {
        setPanoramaList(res);
      })
      .catch(err => {
        this.openNotificationWithIcon('error', err);
      });
  }

  function getList(params) {
    setLoading(true);
    // 网路请求
    request({
      ...apis.paorama.list,
      urlData: { id },
      params: { ...params, apartmentType: 'apart' },
    })
      .then(res => {
        setLoading(false);
        setData(res);
      })
      .catch(err => {
        setLoading(false);
        notification.error({
          message: err.message,
          description: '',
        });
      });
  }

  const onSuccess = () => {
    setVisible(false);
    getList();
  };
  function onDelete(record) {
    request({ ...apis.paorama.delete, urlData: { id: record.panoramaId } })
      .then(res => {
        notification.success({ message: '删除成功' });
        getList();
      })
      .catch(err => {
        notification.error({
          message: err.message,
        });
      });
  }
  return (
    <div>
      <div>
        <AuthButton name="building.panorama.add">
          <Button type="primary" onClick={() => setVisible(true)}>
            新增全景
          </Button>
        </AuthButton>
      </div>
      <Form
        visible={visible}
        buildingId={id}
        panoramaList={panoramaList}
        onCancel={() => setVisible(false)}
        onSuccess={onSuccess}
      />
      <List data={data} loading={loading} onDelete={onDelete} />
    </div>
  );
};
