import React, { useState, useEffect } from 'react';
import {
  Form,
  Input,
  Button,
  Icon,
  Select,
  Card,
  Radio,
  DatePicker,
  message,
  Switch,
  InputNumber,
} from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import moment from 'moment';
import router from 'umi/router';
import FileUpload from '@/components/XForm/FileUpload';
import XForm, { FieldTypes, createForm } from '@/components/XForm';
import apis from '@/services/apis';
import BuildSelect2 from '@/components/SelectButton/BuildSelect2';
import LivePlatSelect from '@/components/SelectButton/LivePlatSelect';
import CitySelect3 from '@/components/SelectButton/CitySelect3';
import ImageUpload from '@/components/XForm/ImageUpload';
import request from '@/utils/request';
import Navigate from '@/components/Navigate';
import AuthButton from '@/components/AuthButton';

const header = props => {
  console.log(props);

  const { id } = props.location.query;

  const [data, setData] = useState({});

  // 查询详情
  const getData = () => {
    request({ ...apis.video.getDetail, urlData: { id } }).then(data => {
      data.videoUrl = [data.videoUrl];
      setData(data);
    });
  };

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

  const cancelPage = () => {
    router.go('-1');
  };

  function handleSubmit(e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      console.log(values, 'values');
      if (!err) {
        values.videoUrl = values?.videoUrl[0];
        // values.isNewHouse =  values.isNewHouse?1:0
        if (id) {
          request({
            ...apis.video.updata,
            urlData: { id: id },
            data: values,
          })
            .then(data => {
              message.info('保存成功');
              cancelPage();
            })
            .catch(err => {
              message.info(err.msg || err.message);
            });
        } else {
          request({
            ...apis.video.save,
            data: values,
          })
            .then(data => {
              message.info('保存成功');
              cancelPage();
            })
            .catch(err => {
              message.info(err.msg || err.message);
            });
        }
      }
    });
  }

  // 视频文件上传前 回调
  const fileUploadBeforeUpload = (file, fileList) => {
    return new Promise((resolve, reject) => {
      if (file.type === 'video/mp4' || file.type === '.mp4') {
        // setVideoImage(true)
        resolve(file);
      } else {
        notification.error({ message: '项目视频，仅支持MP4格式' });
        reject();
      }
    });
  };

  const { getFieldDecorator } = props.form;

  return (
    <Card>
      <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
        <Form.Item label="所属城市">
          {getFieldDecorator('cityId', {
            initialValue: data.cityId,
            rules: [{ required: true, message: ' 请输入所属城市' }],
          })(<CitySelect3 buildingId={props.form.getFieldValue('buildingId')} />)}
        </Form.Item>

        <Form.Item label="所属楼盘">
          {getFieldDecorator('buildingId', {
            initialValue: data.buildingId,
          })(<BuildSelect2 cityId={props.form.getFieldValue('cityId')} />)}
        </Form.Item>

        <Form.Item label="主图" help="建议尺寸：750px*600px，比例5:4，格式：jpg，用于：列表和详情">
          {getFieldDecorator('videImg', {
            initialValue: data.videImg,
            rules: [{ required: true, message: '请上传主图' }],
          })(<ImageUpload />)}
        </Form.Item>

        <Form.Item label="视频标题">
          {getFieldDecorator('name', {
            initialValue: data.name,
            rules: [{ required: true, message: '请输入视频标题' }],
          })(<Input maxLength={20} placeholder="请输入视频标题" />)}
        </Form.Item>

        <Form.Item label="是否新房">
          {getFieldDecorator('isNewHouse', {
            valuePropName: 'checked',
            initialValue: data.isNewHouse || false,
          })(<Switch />)}
        </Form.Item>

        <Form.Item label="简介">
          {getFieldDecorator('remark', {
            initialValue: data.remark,
            rules: [{ required: true, message: '请输入简介' }],
          })(<Input.TextArea row={4} />)}
        </Form.Item>

        <Form.Item label="视频">
          {getFieldDecorator('videoUrl', {
            initialValue: data.videoUrl || null,
            rules: [{ required: true, message: '请上传视频' }],
          })(
            <FileUpload
              accept=".mp4"
              beforeUpload={fileUploadBeforeUpload}
              //   label="上传视频"
              size={1}
            />,
          )}
        </Form.Item>

        <Form.Item label="权重">
          {getFieldDecorator('weight', {
            initialValue: data.weight,
            rules: [{ required: true, message: '请设置权重' }],
          })(<InputNumber placeholder="权重越大越靠前" style={{ width: '150px' }} />)}
        </Form.Item>

        <Form.Item wrapperCol={{ span: 15, offset: 7 }}>
          <AuthButton name="video.submit" noRight={null}>
            <Button type="primary" htmlType="submit" style={{ marginRight: '20px' }}>
              确定
            </Button>
          </AuthButton>

          <Button onClick={() => router.go(-1)}>取消</Button>
        </Form.Item>
      </Form>
    </Card>
  );
};

const VideoEdit = Form.create({ name: 'header' })(header);

export default VideoEdit;
