import React, { useState, useEffect, useRef } 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/BuildSelect2'
import CitySelect from '../../components/SelectButton/CitySelect2'
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';
import SelectH5 from './SelectH5';
import SelectNotice from './SelectNotice';
import SelectTpNews from './SelectTpNews';
import SalesBatchGroup from './SalesBatchGroup';
import LiveGroup from './LiveGroup';
/**
 *
 *
 * @param {*} props
 * @returns
 */
const createEditor = () => {
  let contentVisible = false
  let activityVisible = false
  let newsVisible = false
  let helpVisible = false
  let groupVisible = false
  let salesBatchVisible = false
  let liveVisible = false
  let h5Visible = false
  let noticeVisible = false
  let tpNewsVisible = false
  let buildingId = ''
  let cityId = ''
  let isHaveActive = false
  let isCanChoose = true
  let isHavePosition = false
  let islet = true

  const setExtraData = (data) => {
    if (data.isHaveActive !== undefined) {
      isHaveActive = data.isHaveActive
      if (!isHaveActive) {
        // data.contentType=null
        data.buildingId = null
      }
    }
    islet = isHaveActive
    if (data.showPosition == 'index') {
      isHavePosition = true;
    } else {
      isHavePosition = false;
    }

    // if (data.contentType == 'h5' || data.contentType=='live') {
    //   isHaveActive = true;
    // } else {
    //   isHaveActive = false;
    // }

    contentVisible = data.contentType === 'other';
    activityVisible = data.contentType === 'activity';
    newsVisible = data.contentType === 'news';
    helpVisible = data.contentType === 'help';
    groupVisible = data.contentType === 'group';
    salesBatchVisible = data.contentType === 'salesBatch';
    liveVisible = data.contentType === 'live';
    h5Visible = data.contentType === 'h5';
    noticeVisible = data.contentType === 'notice';
    tpNewsVisible = data.contentType === 'tpNews';

    cityId = data.cityId
    // console.log(data.buildingId, ' data.buildingId')
    buildingId = data.buildingId
  }

  const setExtraData1 = data => {
    console.log(data, "data.buildingIddata.buildingId2")
    islet = data.isHaveActive

    // if ((data.contentType === 'h5' && data.buildingId == null) || data.contentType === '' || data.contentType === 'nothing' || (data.contentType === 'live' && data.buildingId == null)) {
    //   isHaveActive = false
    // } else {
    //   isHaveActive = true
    // }
    // if (!isHaveActivea && data.contentType === 'h5') {
    //   // data.contentType=null
    //   data.buildingId = null
    // }

    // if (data.isHaveActive !== undefined) {
    //   isHaveActive = data.isHaveActive
    //   if (!isHaveActive) {
    //     // data.contentType=null
    //     data.buildingId = null
    //   }
    // }
    // if (data.showPosition == 'index') {
    //   isHavePosition = true;
    // } else {
    //   isHavePosition = false;
    // }

    contentVisible = data.contentType === 'other';
    activityVisible = data.contentType === 'activity';
    newsVisible = data.contentType === 'news';
    helpVisible = data.contentType === 'help';
    groupVisible = data.contentType === 'group';
    salesBatchVisible = data.contentType === 'salesBatch';
    liveVisible = data.contentType === 'live';
    h5Visible = data.contentType === 'h5';
    noticeVisible = data.contentType === 'notice';
    tpNewsVisible = data.contentType === 'tpNews';

    console.log(data.buildingId, ' data.buildingId')
    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({})
    const formRef = useRef(null);

    // 查询列表
    const getDetail = contentId => {
      request({ ...apis.carsuseFigure.getExtendContent, urlData: { id: contentId } }).then((data) => {
        setExtraData1(data)
        setData(data)
      })
    }
    useEffect(() => {
      if (contentId) {
        isCanChoose = false
        getDetail(contentId);
      } else {
        isCanChoose = true
      }
    }, [])

    const cancelPage = () => {
      isCanChoose = true
      router.push({
        pathname: '/carouselFigure/advertisingList',
      });
    }

    const fields = [
      // {
      //   label: '是否关联项目',
      //   name: 'isHaveActive',
      //   type: FieldTypes.Switch,
      //   value: isHaveActive,
      //   hidden: () => !isCanChoose,
      //   props: {
      //     onChange: () => {
      //       const type = formRef.current.props.form.getFieldValue('contentType')
      //       if (formRef.current && (type !== 'live' && type !== 'h5')) {
      //         console.log(formRef.current.props.form.getFieldValue('contentType'), '2222')
      //         formRef.current.props.form.resetFields(['contentType', []]);
      //       }
      //     },
      //   },
      //   rules: [
      //     { required: true, message: '是否城市活动' },
      //   ],
      // },
      // {
      //   label: '发布位置',
      //   name: 'showPosition',
      //   type: FieldTypes.Select,
      //   value: isHaveActive,
      //   dict: [{
      //     label: '首页',
      //     value: 'index',
      //   },
      //   {
      //     label: '项目',
      //     value: 'building',
      //   }],
      //   value: data.showPosition,
      //   rules: [
      //     { required: true, message: '请选择发布位置' },
      //   ],
      // },
      // {
      //   label: '所属项目',
      //   name: 'buildingId',
      //   render: <BuildSelect />,
      //   value: data.buildingId,
      //   hidden: () => !isHaveActive && isHavePosition,
      //   rules: [
      //     { required: true, message: '请选择所属项目' },
      //   ],
      // },
      // {
      //   label: '展示城市',
      //   name: 'cityId',
      //   render: <CitySelect />,
      //   hidden: () => !isHavePosition || isHaveActive,
      //   value: data.cityId,
      //   rules: [
      //     { required: true, message: '请选择展示城市' },
      //   ],
      // },
      {
        label: '开屏广告',
        name: 'image',
        type: FieldTypes.ImageUploader,
        value: data.image,
        help: '建议图片尺寸：640*960px，比例2:3,格式：jpg，用于开屏广告',
        rules: [
          { required: true, message: '请上传图片' },
        ],
      },
      // {
      //   label: '类型',
      //   name: 'contentType',
      //   type: FieldTypes.Select,
      //   hidden: () => isHaveActive,
      //   dict: [{
      //     label: 'H5活动详情',
      //     value: 'h5',
      //   },
      //   {
      //     label: '直播活动详情',
      //     value: 'live',
      //   },
      //   {
      //     label: '其它',
      //     value: 'others',
      //   }],
      //   value: data.contentType,
      //   rules: [
      //     { required: true, message: '请选择类型' },
      //   ],
      // },
      // {
      //   label: '标题',
      //   name: 'title',
      //   type: FieldTypes.Text,
      //   hidden: true,
      //   value: data.title,
      //   rules: [
      //     { required: true, message: '请输入标题' },
      //   ],
      // },
      {
        label: '类型',
        name: 'contentType',
        // hidden: () => !isHaveActive,
        type: FieldTypes.Select,
        dict: [
          {
            label: '公告',
            value: 'notice'
          },
          {
            label: '服务',
            value: 'tpNews'
          },
          {
            label: '活动',
            value: 'activity'
          },
          // {
          //   label: '项目详情',
          //   value: 'project'
          // },
          {
            label: '资讯',
            value: 'news'
          },
          {
            label: '无',
            value: 'nothing'
          },
          // {
          //   label: '拼团活动详情',
          //   value: 'group'
          // },
          // {
          //   label: '助力活动详情',
          //   value: 'help'
          // },
          // {
          //   label: 'H5活动详情',
          //   value: 'h5',
          // },
          // {
          //   label: '在线选房详情',
          //   value: 'salesBatch',
          // },
          // {
          //   label: '直播活动详情',
          //   value: 'live',
          // }
        ],
        value: data.contentType,
        rules: [
          { required: true, message: '请选择类型' },
        ],
      },
      // {
      //   label: '发布H5活动',
      //   name: 'targetId',
      //   render: <SelectH5 buildingId={() => islet ? buildingId : ''} />,
      //   hidden: () => !h5Visible,
      //   value: data.targetId,
      //   rules: [
      //     { required: true, message: '请选择发布H5' },
      //   ],
      // },
      {
        label: '发布活动',
        name: 'targetId',
        render: <SelectActivity buildingId={() => buildingId} />,
        hidden: () => !activityVisible,
        value: data.targetId,
        rules: [
          { required: true, message: '请选择发布活动' },
        ],
      },
      {
        label: '发布资讯',
        name: 'targetId',
        render: <SelectNews buildingId={() => buildingId} />,
        hidden: () => !newsVisible,
        value: data.targetId,
        rules: [
          { required: true, message: '请选择发布资讯' },
        ],
      },
      {
        label: '发布公告',
        name: 'targetId',
        render: <SelectNotice buildingId={() => buildingId} />,
        hidden: () => !noticeVisible,
        value: data.targetId,
        rules: [
          { required: true, message: '请选择发布公告' },
        ],
      },
      {
        label: '发布服务',
        name: 'targetId',
        render: <SelectTpNews buildingId={() => buildingId} />,
        hidden: () => !tpNewsVisible,
        value: data.targetId,
        rules: [
          { required: true, message: '请选择发布服务' },
        ],
      },
      // {
      //   label: '发布内容',
      //   name: 'content',
      //   render: <Wangedit />,
      //   value: data.content,
      //   hidden: () => !contentVisible,
      //   rules: [
      //     { required: true, message: '请选择发布内容' },
      //   ],
      // },
      // {
      //   label: '发布助力',
      //   name: 'targetId',
      //   render: <SelectHelp buildingId={() => buildingId} />,
      //   hidden: () => !helpVisible,
      //   value: data.targetId,
      //   rules: [
      //     { required: true, message: '请选择发布助力' },
      //   ],
      // },
      // {
      //   label: '发布拼团',
      //   name: 'targetId',
      //   render: <SelectGroup buildingId={() => buildingId} />,
      //   hidden: () => !groupVisible,
      //   value: data.targetId,
      //   rules: [
      //     { required: true, message: '请选择发布拼团' },
      //   ],
      // },
      // {
      //   label: '发布销售批次',
      //   name: 'targetId',
      //   render: <SalesBatchGroup buildingId={() => buildingId} />,
      //   hidden: () => !salesBatchVisible,
      //   value: data.targetId,
      //   rules: [
      //     { required: true, message: '请选择发布销售批次' },
      //   ],
      // },
      // {
      //   label: '发布直播活动',
      //   name: 'targetId',
      //   render: <LiveGroup buildingId={() => islet ? buildingId : ''} />,
      //   hidden: () => !liveVisible,
      //   value: data.targetId,
      //   rules: [
      //     { required: true, message: '请选择发布直播活动' },
      //   ],
      // },
      {
        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 (!isHaveActive && val.targetId) {
        if (!val.contentType) {
          val.contentType = 'h5'
        }
      }
      if (!isHaveActive && !val.targetId) {
        val.contentType = ''
      }
      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 wrappedComponentRef={formRef} onSubmit={handleSubmit} onCancel={cancelPage} onValuesChange={handleFormValueChange} fields={fields}></XForm>
    );
  }
}

export default createEditor()
