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 './BuildSelect/BuildSelect';
import SalesBatch from './SalesBatch/SalesBatch';
import request from '../../../../../utils/request';
import MiniQRCode from '@/components/MiniQRCode';

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

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

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

  const cancelPage = () =>{
    router.push({
      pathname: '/house/preSelect/list',
    });
  }
  const fields = [
    {
      label: '销售批次',
      name: 'salesBatchId',
      render: <SalesBatch type = 'false'/>,
      value: saleBatchData.salesBatchId,
      rules: [
        {
          required: true,
        },
      ],
    },
    {
      label: '销售楼盘',
      name: 'buildingId',
      render: <BuildSelect/>,
      value: saleBatchData.buildingId,
      rules: [
        {
          required: true,
          message: '请选择销售楼盘',
        },
      ],
    },
    {
      label: '备注',
      name: 'remark',
      render: <Input disabled/>,
      value: saleBatchData.remark,
      rules: [
        {
          message: '最多20字',
          max:20
        }
      ],
    },
    {
      label: '发布状态',
      name: 'status',
      type: FieldTypes.Select,
      props: {disabled:true},
      dict: [{label:"否",value:0},{label:"是",value:1}],
      value: saleBatchData.status != null ? saleBatchData.status : 1,
      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: '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.updateTaPreSelection, urlData: {id: preselectionId},data: submitValue, }).then((data) => {
          message.info("保存成功")
          cancelPage()
        }).catch((err) => {
        message.info(err.msg || err.message)
      })
    }
    
  return (
    <>
      <XForm onSubmit={handleSubmit} onCancel={cancelPage} fields={fields}></XForm>
    </>
  );
}

export default Base
