import React, { useState } from 'react';
import { Button, Form, Input, Select, Radio, notification } from 'antd';
import ImageUpload from '@/components/XForm/ImageUpload';
import AuthButton from '@/components/AuthButton'
import request from '@/utils/request';
import apis from '@/services/apis';
import ModalForm from '../components/ModalForm';

const fullWidth = { width: '100%' };
const { Option } = Select;

const AMForm = props => {
  const { visible, onCancel, form, panoramaList, onSuccess } = props;
  const { getFieldDecorator, setFieldsValue, resetFields, validateFields } = form;
  const [panoramaType, setPanoramaType] = useState('apartment');

  function submitData(e) {
    e.preventDefault();
    validateFields((err, values) => {
      if (err) {
        console.error(err);
        return;
      }
      const data = values;
      data.buildingId = props.buildingId;
      const api = apis.paorama.add;

      // 网路请求
      request({ ...api, data: { ...data } })
        .then(() => {
          notification.success({ message: '操作成功' });
          onSuccess();
        })
        .catch(err => {
          notification.error({ message: 'err' });
          props.onCancel();
        });
    });
  }

  return (
    <ModalForm title="全景设置" visible={visible} onCancel={onCancel} modalProps={{destroyOnClose:true}} onSubmit={submitData}>
      <Form.Item label="全景类型">
        {getFieldDecorator('panoramaType', {
          initialValue:panoramaType,
          rules: [{ required: true, message: '请选择全景类型' }],
        })(
          <Radio.Group onChange={e => setPanoramaType(e.target.value)} buttonStyle="solid">
            <Radio.Button value="apartment">户型</Radio.Button>
            <Radio.Button value="building">项目</Radio.Button>
          </Radio.Group>,
        )}
      </Form.Item>
      {/* {panoramaType == 'apartment' && (
        <Form.Item label="全景内容">
          {getFieldDecorator('apartmentId', {
            rules: [{ required: true, message: '请选择全景内容' }],
          })(
            <Select placeholder="户型" style={fullWidth}>
              {panoramaList?.map(item => (
                <Option key={item.apartmentId} value={item.apartmentId}>
                  {item.apartmentName}
                </Option>
              ))}
            </Select>,
          )}
        </Form.Item>
      )}
      {panoramaType == 'building' && (
        <Form.Item label="全景内容">
          {getFieldDecorator('content', {
            rules: [{ required: true, message: '请输入全景内容' }],
          })(<Input placeholder="请简述全景内容" />)}
        </Form.Item>
      )} */}
      <Form.Item label="选择封面" help="建议图片尺寸750px*600px，比例5:4,格式：jpg">
        {getFieldDecorator('coverImg', {
          rules: [{ required: true, message: '请上传封面图片' }],
        })(<ImageUpload />)}
      </Form.Item>
      <Form.Item label="链接地址">
        {getFieldDecorator('panoramaLink', {
          rules: [{ required: true, message: '请输入链接地址' }],
        })(<Input />)}
      </Form.Item>
      <Form.Item label=" " colon={false} style={{ marginTop: '2em' }}>
        <AuthButton name="building.panorama.add">
          <Button style={{ marginLeft: '4em' }} type="primary" htmlType="submit">
            保存
          </Button>
        </AuthButton>
        <Button style={{ marginLeft: '2em' }} onClick={props.onCancel}>
          取消
        </Button>
      </Form.Item>
    </ModalForm>
  );
};

export default Form.create({})(AMForm);
