import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, Tabs, Radio, DatePicker, message, Upload } 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 XForm, { FieldTypes } from '../../../../../components/XForm';
import apis from '../../../../../services/apis';
import BuildSelect from '../../../../../components/SelectButton/BuildSelect';
import request from '../../../../../utils/request';
import SalesBatchHelpDoc from './SalesBatchHelpDoc';
import MiniQRCode from '@/components/MiniQRCode';

const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const { TextArea } = Input;

const Base = props => {
  const salesBatchId = props.salesBatchId.batchId
  const [ saleBatchData, setSaleBatchData ] = useState({})
  const [showHelp, setShowHelp] = useState(false)
  
  if(salesBatchId){
    useEffect(() => {
      getSaleBatchData(salesBatchId);
    },[])

  // 查询列表
  const getSaleBatchData = (salesBatchId) => {
    request({ ...apis.house.getTaSalesBatch, urlData: {id: salesBatchId} }).then((data) => {
        setSaleBatchData(data)
    })
  }
  }

  const cancelPage = () =>{
    router.push({
      pathname: '/house/house/list',
    });
  }
  const fields = [
    {
      label: '销售批次名',
      name: 'salesBatchName',
      type: FieldTypes.Text,
      value: saleBatchData.salesBatchName,
      rules: [
        {
          required: true,
          message: '销售批次名不合法',
          max:20,
        },
      ],
    },
    {
      label: '销售楼盘',
      name: 'buildingId',
      render: <BuildSelect />,
      value: saleBatchData.buildingId,
      rules: [
        {
          required: true,
          message: '请选择销售楼盘',
        },
      ],
    },
    {
      label: '备注',
      name: 'remark',
      type: FieldTypes.Text,
      value: saleBatchData.remark,
      rules: [
        {
          message: '最多20字',
          max:20
        }
      ],
    },
    {
      label: '发布状态',
      name: 'status',
      type: FieldTypes.Select,
      dict: [{label:"否",value:0},{label:"是",value:1}],
      value: saleBatchData.status != null ? saleBatchData.status : 1,
      rules: [
        {
          required: true,
          message: '请选择发布状态',
        },
      ],
    },
    {
      label: '房源显示价格',
      name: 'displayHousePrice',
      type: FieldTypes.Select,
      dict: [{label:"否",value:false},{label:"是",value:true}],
      value: saleBatchData.displayHousePrice != null ? saleBatchData.displayHousePrice : true,
      rules: [
        {
          required: true,
          message: '请选择房源显示价格',
        },
      ],
    },
    // {
    //   label: '预选时间',
    //   name: 'preSelectTime',
    //   type: FieldTypes.RangePicker,
    //   props: {showTime : 'HH:mm:ss' },
    //   value: saleBatchData.preselectionStartTime != null ? [moment(saleBatchData.preselectionStartTime, 'YYYY-MM-DD HH:mm:ss'), moment(saleBatchData.preselectionEndTime, 'YYYY-MM-DD HH:mm:ss')] : null,
    //   rules: [
    //     { required: true, message: '请选择预选时间' },
    //   ],
    // },
    {
      label: '分栋鸟瞰图',
      name: 'aerialViewImg',
      type: FieldTypes.ImageUploader,
      value: saleBatchData.aerialViewImg,
      help: '建议图片尺寸：690*388px，比例16::9，格式：jpg，文件小于300KB。分栋鸟瞰图会显示在楼盘详情页面。用户点击进入查看全部发布房源。可以适当在图中添加引导语。',
      rules: [
        {
          required: true,
          message: '请选择分栋鸟瞰图',
        },
      ],
    },
    {
      label: '扫码查看房源列表',
      name: 'qrCode',
      // type: FieldTypes.ImageUploader,
      value: saleBatchData.qrCode,
      // props: { disabled: true },
      render: <MiniQRCode targetId={saleBatchData.salesBatchId} page="onlineSelling/pages/houseList/index" />
    },
    {
      label: '说明',
      name: 'buildingId',
      render: <Icon type="question-circle" theme="filled" style={{ fontSize: '18px', color: '#F00' }} onClick={() => setShowHelp(true)} />,
      value: saleBatchData.buildingId,
    },
  ]
  
    const handleSubmit = values => { 
      let {preSelectTime, ...submitValue} = values
        if(null != preSelectTime && preSelectTime.length > 0){
          const [preselectionStartTime, preselectionEndTime] = preSelectTime
          submitValue.preselectionStartTime = moment(preselectionStartTime).format('YYYY-MM-DD HH:mm:ss');
          submitValue.preselectionEndTime = moment(preselectionEndTime).format('YYYY-MM-DD HH:mm:ss');
        }else{
          submitValue.preselectionStartTime = null
          submitValue.preselectionEndTime = null
        }        
        console.log(submitValue)
        request({ ...apis.house.updateTaSalesBatch, urlData: {id: salesBatchId},data: submitValue, }).then((data) => {
          message.info("保存成功")
          // cancelPage()
        }).catch((err) => {
        message.info(err.msg || err.message)
      })
    }
    
  return (
    <>
      <XForm onSubmit={handleSubmit} onCancel={cancelPage} fields={fields}></XForm>
      <SalesBatchHelpDoc visible={showHelp} onCancel={() => setShowHelp(false)} />
    </>
  );
}

export default Base
