import React, { useState, useEffect } from 'react';
import { Modal, message } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import styles from '../style/GoodsList.less';
import moment from 'moment';
import router from 'umi/router';
import BuildSelect from '../../components/SelectButton/BuildSelect'
import { FieldTypes, createForm } from '../../components/XForm';
import Wangedit from '../../components/Wangedit/Wangedit';
import SelectActivity from './SelectActivity';
import SelectNews from './SelectNews';
import apis from '../../services/apis';
import request from '../../utils/request'
import SelectHelp from './SelectHelp';
import SelectGroup from './SelectGroup';

/**
 *
 *
 * @param {*} props
 * @returns
 */
 const createEditor = () => {
  let contentVisible = false
  let activityVisible = false
  let newsVisible = false
  let helpVisible = false
  let groupVisible = false
  let buildingId = ''

  const setExtraData = (data) => {
    contentVisible = data.contentType === 'other';
    activityVisible = data.contentType === 'activity';
    newsVisible = data.contentType === 'news';
    helpVisible = data.contentType === 'help';
    groupVisible = data.contentType === 'group';

    buildingId = data.buildingId
  }
  
  const handleFormValueChange = (props, changedValues, allValues) => {
    setExtraData(allValues)
  }

  const XForm = createForm({ onValuesChange: handleFormValueChange })

  return (props) => {
    const [ tab, changeTab ] = useState('basic')
    const contentId = props.location.query.contentId
    const [ data, setData ] = useState({})
  
    if(contentId){
      useEffect(() => {
        getDetail(contentId);
      },[])
  
      // 查询列表
      const getDetail = (contentId) => {
        request({ ...apis.carsuseFigure.getExtendContent,urlData:{id: contentId}}).then((data) => {
          setExtraData(data)
          setData(data)
        })
      }
    }
  
    const cancelPage = () =>{
      router.push({
        pathname: '/carouselFigure/advertisingList',
      });
    }
   
    const fields = [
      {
        label: '所属项目',
        name: 'buildingId',
        render: <BuildSelect />,
        value: data.buildingId,
      },
      {
        label: '商品图片',
        name: 'image',
        type: FieldTypes.ImageUploader,
        value: data.image,
        help: '建议图片尺寸：640px*960px',
      },
      {
        label: '标题',
        name: 'title',
        type: FieldTypes.Text,
        value: data.title,
      },
      {
        label: '类型',
        name: 'contentType',
        type: FieldTypes.Select,
        dict: [{
          label: '活动',
          value: 'activity'
        },
        {
          label: '项目',
          value: 'project'
        },
        {
          label: '资讯',
          value: 'news'
        },
        {
          label: '其他',
          value: 'other'
        },
        {
          label: '拼团',
          value: 'group'
        },
        {
          label: '助力',
          value: 'help'
        }],
        value: data.contentType,
      },
      {
        label: '发布活动',
        name: 'targetId',
        render: <SelectActivity buildingId={() => buildingId} />,
        hidden: () => !activityVisible,
        value: data.targetId,
      },
      {
        label: '发布资讯',
        name: 'targetId',
        render: <SelectNews buildingId={() => buildingId} />,
        hidden: () => !newsVisible,
        value: data.targetId,
      },
      {
        label: '发布内容',
        name: 'content',
        render: <Wangedit />,
        value: data.content,
        hidden: () => !contentVisible,
      },
      {
        label: '发布助力',
        name: 'targetId',
        render: <SelectHelp buildingId={() => buildingId} />,
        hidden: () => !helpVisible,
        value: data.targetId,
      },
      {
        label: '发布拼团',
        name: 'targetId',
        render: <SelectGroup buildingId={() => buildingId} />,
        hidden: () => !groupVisible,
        value: data.targetId,
      },
      {
        label: '状态',
        name: 'status',
        type: FieldTypes.Select,
        dict: [{
          label: "启用",
          value: 1
        },
        {
          label: "停用",
          value: 0
        },],
        value: data.status != null ? data.status : 1,
      },
    ]
    
    const handleSubmit = val => { 
      val.showType = 'screen'
      if(contentId){
        request({ ...apis.carsuseFigure.updataExtendContent,urlData:{id: contentId}, data: val,}).then((data) => {
          cancelPage()
        }).catch((err) => {
          message.info(err.msg || err.message)
        })
      }else{
        request({ ...apis.carsuseFigure.addExtendContent, data: val,}).then((data) => {
          cancelPage()
        }).catch((err) => {
          message.info(err.msg || err.message)
        })
      }
    }
  
  
    return (
      <XForm onSubmit={handleSubmit} onCancel={cancelPage} onValuesChange={handleFormValueChange} fields={fields}></XForm>
    );
   }
 }
 
export default createEditor()