import React, { useMemo, useRef, useEffect, useState } from 'react';

import { message, Radio } from 'antd';
import apis from '@/services/apis';
import router from 'umi/router';
import BuildSelect from '@/components/SelectButton/BuildSelect2';
import NewsTypeSelect from '@/components/SelectButton/NewTypeSelect';
import XForm, { FieldTypes } from '@/components/XForm';
import Wangedit from '@/components/Wangedit/Wangedit';
import request from '@/utils/request';

const Basic = props => {
  const { newsId } = props;

  const [dynamicData, setDynamicData] = useState({});
  const [changeBuildingId, setChangeBuildingIdData] = useState('');
  const [newsDetailType, setNewsDetailType] = useState(1);

  useEffect(() => {
    if (newsId) {
      getDynamicData(newsId);
    }
  }, [newsId]);

  // 查询详情
  const getDynamicData = newsId => {
    request({ ...apis.news.get, urlData: { id: newsId } })
      .then(data => {
        setDynamicData(data);
        console.log(data, 'sss');
        setNewsDetailType(Number(data.newsDetailType));
      })
      .catch(err => {
        console.log(err);
        message.info(err.msg || err.message);
      });
  };

  const handleBuildingChange = e => {
    console.log(e);
    setChangeBuildingIdData(e);
  };

  const fields = [
    {
      label: '意向项目',
      name: 'buildingId',
      render: <BuildSelect onChange={e => handleBuildingChange(e)} />,
      value: dynamicData.buildingId,
      rules: [{ required: true, message: '请选择所属项目' }],
    },
    {
      label: '资讯列表图',
      name: 'newsImg',
      type: FieldTypes.ImageUploader,
      value: dynamicData.newsImg,
      help: '建议图片尺寸：320*240px，比例5:4,格式：jpg，用于资讯列表',
      rules: [{ required: true, message: '请选择资讯列表' }],
    },
    {
      label: '资讯标题',
      name: 'newsName',
      type: FieldTypes.Text,
      value: dynamicData.newsName,
      rules: [{ required: true, message: '请输入资讯标题' }],
    },
    {
      label: '资讯详情',
      name: 'newsDetailType',
      render: (
        <Radio.Group
          onChange={e => {
            console.log(e.target.value, '3333');
            setNewsDetailType(e.target.value);
          }}
        >
          <Radio value={1}>自定义</Radio>
          <Radio value={0}>公众号链接</Radio>
        </Radio.Group>
      ),
      value: newsDetailType,
      rules: [{ required: true, message: '请选择资讯类型' }],
    },
    {
      label: '详情内容',
      name: 'newsDetail',
      render: <Wangedit />,
      hidden: newsDetailType == 0,
      value: dynamicData.newsDetail,
      rules: [{ required: true, message: '请输入详情内容' }],
    },
    {
      label: '公众号链接',
      name: 'newsDetail',
      type: FieldTypes.Text,
      hidden: newsDetailType == 1,
      value: dynamicData.newsDetail,
      help: '只能填写同一主体公众号的文章链接',
      rules: [{ required: true, message: '请输入公众号链接' }],
    },
  ];

  const handleSubmit = val => {
    console.log(dynamicData, '12312345');
    let { ...submitValue } = val;

    if (newsId) {
      submitValue.newsId = newsId;
      request({ ...apis.news.put, urlData: { id: newsId }, data: { ...submitValue } })
        .then(data => {
          // cancelPage();
          message.info('保存成功');
          console.log(data, 'data1');
        })
        .catch(err => {
          message.info(err.msg || err.message);
        });
    } else {
      request({ ...apis.news.post, data: { ...submitValue } })
        .then(data => {
          // cancelPage();
          message.info('保存成功');
          router.go(-1);
          console.log(data, 'data2');
        })
        .catch(err => {
          message.info(err.msg || err.message);
        });
    }
  };

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

  return <XForm onSubmit={handleSubmit} onCancel={cancelPage} fields={fields}></XForm>;
};

export default Basic;
