import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, Tabs, Radio, DatePicker, message } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import moment from 'moment';
import router from 'umi/router';
import styles from '../style/GoodsList.less';
import BuildSelect from '../../components/SelectButton/BuildSelect2'
import CitySelect from '../../components/SelectButton/CitySelect2'
import { createForm, FieldTypes } from '../../components/XForm';
import Wangedit from '../../components/Wangedit/Wangedit'
import apis from '../../services/apis';
import request from '../../utils/request'
import SelectHelp from './SelectHelp';
import SelectGroup from './SelectGroup';
import SalesBatchGroup from './SalesBatchGroup';
import LiveGroup from './LiveGroup';
import SelectNews from './SelectNews';
import SelectActivity from './SelectActivity';
import SelectH5 from './SelectH5';
import SelectMall from './SelectMall';
import SelectNotice from './SelectNotice';
import SelectTpNews from './SelectTpNews';

const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
/**
 *
 *
 * @param {*} props
 * @returns
 */
 const Edit = props => {
  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 buildingId = ''
  let cityId=''
  let locationType = false
  let locationTypeIndex = true
  let locationTypeNews = false
  let isHaveActive=false
  let isCanChoose=true
  let mallVisible = false
  let noticeVisible = false
  let tpNewsVisible = false

  const setExtraData = (data) => {
    console.log(data, 'data');
    if(data.isHaveActive!=undefined){
      isHaveActive=data.isHaveActive
      if(!isHaveActive) {
        // data.contentType=null
        data.buildingId=null
      }
    }

    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';
    mallVisible = data.contentType === 'mall';
    noticeVisible = data.contentType === 'notice';
    tpNewsVisible = data.contentType === 'tpNews';

    cityId=data.cityId
    buildingId = data.buildingId
    locationType = data.showPosition === 'mall';
    locationTypeIndex = data.showPosition === 'index';
    locationTypeNews = data.showPosition === 'news';
    console.log(mallVisible, 'locationType');
  }

  const setExtraData1 = (data) => {
     if((data.contentType=='h5'  && data.buildingId == null) || data.contentType==''||data.contentType=='nothing' || (data.contentType=='live' && data.buildingId == null)){
        isHaveActive=false
     }else{
        isHaveActive=true
     }

    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';
    buildingId = data.buildingId
    locationType = data.showPosition === 'mall';
    locationTypeIndex = data.showPosition === 'index';
    locationTypeNews = data.showPosition === 'news';
    h5Visible = data.contentType === 'h5';
    mallVisible = data.contentType === 'mall';
    noticeVisible = data.contentType === 'notice';
    tpNewsVisible = data.contentType === 'tpNews';
    console.log(mallVisible, 'locationType');
  }


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

  const XForm = createForm({ onValuesChange: handleFormValueChange })

  return props => {
    const [tab, changeTab] = useState('basic')
    const { contentId } = props.location.query
    const [data, setData] = useState({})

    if (contentId) {
      isCanChoose=false
      // eslint-disable-next-line react-hooks/rules-of-hooks
      useEffect(() => {
        getDetail(contentId);
      }, [])

      // 查询列表
      const getDetail = contentId => {
        request({ ...apis.carsuseFigure.getExtendContent, urlData: { id: contentId } }).then(data => {
            console.log(data)
            setExtraData1(data)
            setData(data)
        })
      }
    }else{
      isCanChoose=true
    }

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

      const fields = [
        // {
        //   label: '是否关联项目',
        //   name: 'isHaveActive',
        //   type: FieldTypes.Switch,
        //   value:isHaveActive,
        //   hidden: () => !isCanChoose,
        //   rules: [
        //     { required: true,message: '是否城市活动' },
        //   ],
        // },
        // {
        //   label: '所属项目',
        //   name: 'buildingId',
        //   render: <BuildSelect />,
        //   hidden: () => !isHaveActive,
        //   value: data.buildingId,
        //   rules: [
        //     { required: true, message: '请选择所属项目' },
        //   ],
        // },
        // {
        //   label: '展示城市',
        //   name: 'cityId',
        //   render: <CitySelect />,
        //   hidden: () => isHaveActive,
        //   value: data.cityId,
        //   rules: [
        //     { required: true, message: '请选择展示城市' },
        //   ],
        // },
        {
          label: '发布位置',
          name: 'showPosition',
          type: FieldTypes.Select,
          dict: [{
            label: '首页',
            value: 'index',
          },
          {
            label: '积分商城',
            value: 'mall',
          },
          {
            label: '物业',
            value: 'property',
          }],
          value: data.showPosition,
          rules: [
            { required: true, message: '请选择发布位置' },
          ],
        },
        {
          label: () => ('轮播图'),
          name: 'image',
          type: FieldTypes.ImageUploader,
          value: data.image,
          help: () => ('建议图片尺寸：750*250px，比例3:1,格式：jpg，用于banner轮播'),
          rules: [
            { required: true, message: '请上传轮播图' },
          ],
        },
        // {
        //   label: '类型',
        //   name: 'contentType',
        //   type: FieldTypes.Select,
        //   hidden: () => isHaveActive,
        //   dict: [{
        //     label: 'h5',
        //     value: 'h5',
        //   },
        //   {
        //     label: '直播活动详情',
        //     value: 'live',
        //   }],
        //   value: data.contentType,
        //   rules: [
        //     { required: true, message: '请选择类型' },
        //   ],
        // },
        // {
        //   label: '标题',
        //   name: 'title',
        //   type: FieldTypes.Text,
        //   value: data.title,
        //   hidden: true,
        //   rules: [
        //     { required: true, message: '请输入标题' },
        //   ],
        // },
        {
          label: '类型',
          name: 'contentType',
          type: FieldTypes.Select,
          // hidden: () => !locationTypeIndex,
          dict: [
            {
              label: '公告',
              value: 'notice',
            },
            {
              label: '服务',
              value: 'tpNews',
            },
            {
              label: '活动',
              value: 'activity',
            },
            // {
            //   label: '项目',
            //   value: 'project',
            // },
            // {
            //   label: '资讯',
            //   value: 'news',
            // },
            {
              label: '商城',
              value: 'mall',
            },
            {
              label: '无',
              value: 'nothing',
            },
            // {
            //   label: '其他',
            //   value: 'other',
            // },
            // {
            //   label: '拼团',
            //   value: 'group',
            // },
            // {
            //   label: '助力',
            //   value: 'help',
            // },
            // {
            //   label: 'h5',
            //   value: 'h5',
            // },
            // {
            //   label: '销售批次详情',
            //   value: 'salesBatch',
            // },
            // {
            //   label: '直播活动详情',
            //   value: 'live',
            // }
          ],
          value: data.contentType,
          rules: [
            { required: true, message: '请选择类型' },
          ],
        },
        // {
        //   label: '类型',
        //   name: 'contentType',
        //   type: FieldTypes.Select,
        //   hidden: () => !locationType,
        //   dict: [
        //   {
        //     label: '积分商城',
        //     value: 'mall',
        //   },
        // ],
        //   value: data.contentType,
        //   rules: [
        //     { required: true, message: '请选择类型' },
        //   ],
        // },
        // {
        //   label: '类型',
        //   name: 'contentType',
        //   type: FieldTypes.Select,
        //   hidden: () => !locationTypeNews,
        //   dict: [
        //     {
        //       label: '资讯',
        //       value: 'news',
        //     },
        // ],
        //   value: data.contentType,
        //   rules: [
        //     { required: true, message: '请选择类型' },
        //   ],
        // },
        {
          label: '发布活动',
          name: 'targetId',
          render: <SelectActivity buildingId={() => buildingId} />,
          hidden: () => !activityVisible,
          value: data.targetId,
          rules: [
            { required: true, message: '请选择发布活动' },
          ],
        },
        {
          label: '发布商品',
          name: 'targetId',
          render: <SelectMall buildingId={() => buildingId}/>,
          hidden: () => !mallVisible,
          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: 'targetId',
        //   render: <SelectNews buildingId={() => buildingId} />,
        //   hidden: () => !newsVisible,
        //   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={() => 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,
        },
        {
          label: '权重',
          name: 'orderNo',
          type: FieldTypes.Number,
          value: data.orderNo,
          help: "数值越大越靠前",
        },
      ]

      const handleSubmit = val => {
        // console.log(val,"232323")
        val.showType = 'banner'
        // 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 onSubmit={handleSubmit} onCancel={cancelPage} fields={fields}></XForm>
    );
  }
 }


export default Edit()
