import React, { useState, useEffect } from 'react';
import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Radio, Tag, Tooltip, Tabs, Table, notification, Modal } from 'antd';
import moment from 'moment';
import request from '../../../../../utils/request';
import apis from '../../../../../services/apis';
import Styles from '../style.less';
import { router } from 'umi';
import ModalPanoramaImage from './modalPanoramaImage';

const { confirm } = Modal;


const saleType = [
  {
    id: 1,
    name: '待售',
  },
  {
    id: 2,
    name: '售罄',
  },
  {
    id: 3,
    name: '在售',
  },
]

const houseType = [
  {
    id: 1,
    name: '1室',
  },
  {
    id: 2,
    name: '2室',
  },
  {
    id: 3,
    name: '3室',
  },
  {
    id: 4,
    name: '4室',
  },
  {
    id: 5,
    name: '5室及以上',
  },
]

/**
 *图片设置
 *
 * @param {*} props
 * @returns
 */
function panoramaImage(props) {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [data, setData] = useState([])

  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [visibleData, setVisibleData] = useState({ visible: false, apartmentId: '', buildingId: '' })

  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    getList()
  }, [])

  function openNotificationWithIcon(type, message) {
    notification[type]({
      message,
      description:
        '',
    });
  }

  function getList(params) {
    // 网路请求
    request({ ...apis.paorama.list, urlData: { id: props.building.buildingId }, params: { ...params, apartmentType: 'apart' } }).then(res => {
      setData(res)
    }).catch(err => {
      openNotificationWithIcon('error', err.message)
    })
  }

  /**
   *回调事件
   *
   */
  function onModalChange() {
    getList()
    setVisibleData({ visible: false, apartmentId: '', buildingId: '' })
  }

  /**
   *打开编辑页
   *
   * @param {*} record
   */
  function showEdi(record) {
    // 网路请求
    request({ ...apis.paorama.panoramaApartList, params: { buildingId: props.building.buildingId } }).then(res => {
      setVisibleData({ visible: true, apartmentId: record === undefined ? '' : record.apartmentId, buildingId: props.building.buildingId, panoramaType: "apartment", panoramaList: res })
    }).catch(err => {
      this.openNotificationWithIcon('error', err)
    })
  }

  /**
   * 删除
   *
   * @param {*} record
   */
  function deleteApartment(record) {
    confirm({
      title: '确认删除当前数据?',
      content: '确定后成功删除，点击取消则放弃当前操作',
      okText: '确定',
      cancelText: '取消',
      onOk() {
        // 网路请求
        request({ ...apis.paorama.delete, urlData: { id: record.panoramaId } }).then(res => {
          getList()
          openNotificationWithIcon('success', '操作成功')
        }).catch(err => {
          // openNotificationWithIcon('error', err.message)
        })
      },
      onCancel() { },
    });
  }


  const columns = [
    {
      title: '封面图',
      dataIndex: 'coverImg',
      key: 'coverImg',
      render: (x, record) => <img style={{ width: '150px', height: '120px' }} src={x} alt="" />,
    },
    {
      title: '类型',
      dataIndex: 'panoramaType',
      key: 'panoramaType',
      render: (x, record) => <span>{x === "apartment" ? "户型" : "项目"}</span>,
    },
    {
      title: '内容',
      dataIndex: 'content',
      key: 'content',
    },
    {
      title: '链接地址',
      dataIndex: 'panoramaLink',
      key: 'panoramaLink',
    },
    {
      title: '操作',
      dataIndex: 'apartmentId',
      key: 'apartmentId',
      render: (_, record) => (
        <>
          <Button type="link" style={{ color: 'red' }} onClick={() => deleteApartment(record)}>删除</Button>
        </>
      ),
    },
  ]

  return (
    <>
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px', justifyContent: 'space-between' }}>
        <Button type="primary" onClick={() => showEdi()}>新增全景图</Button>
        <Button onClick={() => router.go(-1)}>返回</Button>
      </div>
      <Table dataSource={data} columns={columns} pagination={false} rowKey="imageSet" />

      {/* 编辑页 */}
      {/*  onSuccess是子组件传递事件信息  */}
      <ModalPanoramaImage visibleData={visibleData} key="ModalImage" onSuccess={() => onModalChange()} />
    </>
  )
}

export default panoramaImage
