import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, Tabs, Radio, DatePicker, message, Upload, Table, Modal } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import moment from 'moment';
import router from 'umi/router';
import { fetch } from '../../../../utils/request';
import apis from '../../../../services/apis';
import XForm, { FieldTypes } from '../../../../components/XForm';
import ApartmentSelect from '../../../../components/HouseSelect/ApartmentSelect';
import request from '@/utils/request';

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

function HouseBatchAdd(props) {

const [data, setData] = useState({list: [], total: 0})

const [uploadFile, setUploadFile] = useState(null)

const uploadExcel = fetch(apis.house.uploadExcel)

const uploaderProps = {
  name: 'file',
  accept: '.xls, .xlsx',
  showUploadList: false,
  customRequest({
    action,
    file,
    headers,
    onError,
    onProgress,
    onSuccess,
    withCredentials,
  }) {
     
    const data = new FormData()
    data.append('file', file)
    data.append('salesBatchId', props.location.query.salesBatchId)
    data.append('buildingId', props.location.query.buildingId)

    setUploadFile(file)

    uploadExcel({ data }).then((res) => {
      setData(res)
      onSuccess(res, file);
    }).catch(onError);

    return {
      abort() {
        console.log('upload progress is aborted.');
      },
    };
  },
}

//取消
function handleCancel(){
  router.push({
    pathname: '/house/house/edit',
    query: {
      id: props.location.query.salesBatchId,
      buildingId: props.location.query.buildingId,
    },
  });
}

function batchSaveHouse() {
  if(null == uploadFile){
    message.error('请先上传房源数据，再提交')
    return
  }
  const uploadData = new FormData()
  uploadData.append('file', uploadFile)
  uploadData.append('salesBatchId', props.location.query.salesBatchId)
  uploadData.append('buildingId', props.location.query.buildingId)

  request({ ...apis.house.saveExcelValue, data: uploadData,headers: "content-type=multipart/form-data" }).then(res => {
    Modal.info({
      title: '新增房源成功',
      content: '请确认全部数据正常，然后在房源详情页 销售批次栏 选择 发布状态 为“是” 将房源 发布到小程序。如需要置业顾问或用户分享，请在房源详情中配套海报图和分享图。',
      okText: '确定',
      onOk() {
        router.push({
          pathname: '/house/house/edit',
          query: {
            id: props.location.query.salesBatchId,
            buildingId: props.location.query.buildingId,
          },
        });
      },
    });
    
  }).catch(err => {
    // openNotificationWithIcon('error', err.message)
  })
}

const columns = [
  {
    title: '期/区',
    dataIndex: 'termName',
    key: 'termName',
  },
  {
    title: '楼栋',
    dataIndex: 'blockName',
    key: 'blockName',
  },
  {
    title: '单元',
    dataIndex: 'unitName',
    key: 'unitName',
  },
  {
    title: '层',
    dataIndex: 'floorName',
    key: 'floorName',
  },
  {
    title: '房号',
    dataIndex: 'roomName',
    key: 'roomName',
  },
  {
    title: '价格（万元）',
    dataIndex: 'price',
    key: 'price',
  },
  {
    title: '预选基础热度',
    dataIndex: 'heat',
    key: 'heat',
  },
  {
    title: '发布状态',
    dataIndex: 'status',
    key: 'status',
    render: status => <><span>{status == 0 ? '否' : status == 1 ? '是' : ''}</span></>,
  },
]


return (
  <>
    <div style={{ marginBottom: '30px' }} ><span>1.导入房源先下载模板--></span><a href="http://njcj.oss-cn-shanghai.aliyuncs.com/%E6%88%BF%E6%BA%90%E6%A8%A1%E6%9D%BF.xlsx" download="房源模板.xlsx"><Button type="primary" htmlType="submit">下载模板</Button></a></div>
    <div style={{ marginBottom: '30px' }}>2.使用excel打开模板文件，编辑房源数据并保存</div>
    <div style={{ marginBottom: '30px' }}><span>3.将编辑好的文件上传--></span><Upload {...uploaderProps}><Button type="primary" htmlType="submit">上传</Button></Upload></div>
    <span>4.检查导入的数据是否正常 ↓，不正常则重新编辑保存再次上传，请仔细阅读模板中的编辑规则</span>
    <Table dataSource={data.list} columns={columns} pagination={{ total: data.total }} style={{ marginTop: '20px' }} rowKey="House" />

    <div style={{ marginTop: '30px' }}>5.全部正常请点击提交</div>
    <Button type="primary" onClick={() => batchSaveHouse()}>提交</Button>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span>暂时未确定房源?  --></span><Button onClick={() => handleCancel()}>以后处理</Button>
  </>
)
}
export default HouseBatchAdd
