import React, { PureComponent, useMemo, useRef, useState } from 'react';
import { Avatar, Button } from 'antd';
import moment from 'moment';
import request from '../../../utils/request';
import apis from '../../../services/apis';
import QueryTable from '@/components/QueryTable'
import { router } from 'umi';
import AuthButton from '@/components/AuthButton';

/**
 *
 *
 * @param {*} props
 * @returns
 */




function Recommend() {

  const ref= useRef()
  const [exportLoding, setExportLoding] = useState(false)
  //详情页面弹窗配置
  function toAudit(row,type) {
    router.push({
      pathname: '/findRoom/overseas/audit',
      query: {
        id: row.id,
        type:type
      },
    })

  }
//   function toSee(cuurentId) {
//     router.push({
//       pathname: '/home/recommend/auditCopy',
//       query: {
//         id: cuurentId,
//       },
//     })

//   }


  /**
   *导出数据（推荐用户）
   *
   */
  function exportRecommendCustomer() {
    setExportLoding(true)
    request({
      ...apis.searchHouse.exportHouse,
      responseType: 'blob',
      params: {
        ...ref.current.getSearchData,
      },
    }).then(response => {
      console.log('exportRecommendCustomer: ', response)
      download(response)
    }).catch(error => {

    })
  }

  function download(data) {
    if (!data) {
      return
    }
    const url = window.URL.createObjectURL(new Blob([data]))
    const link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download', '海外需求.xlsx')
    document.body.append(link)
    link.click()
    setExportLoding(false)
  }
  const columns = [
    {
      title: '头像',
      dataIndex: 'avatarurl',
      key: 'avatarurl',
      align: 'center',
      render: (_, record) => <Avatar shape="square" src={record.avatarurl} size={64} />,
    },
    {
      title: '姓名',
      dataIndex: 'nickname',
      key: 'nickname',
      align: 'center',
      // render: (_, record) => <><span>{record.name = '曹建芳'}</span></>,
    },
    {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone',
      align: 'center',
    },
    {
      title: '性别',
      dataIndex: 'gender',
      key: 'gender',
      align: 'center',
      // eslint-disable-next-line no-nested-ternary
      render: (_, record) => <><span>{record.gender === '1' ? '男' : record.gender === '2' ? '女' : '未知'}</span></>,
    },
    {
      title: '意向国家/区域',
      dataIndex: 'intentArea',//意向区域
      key: 'intentArea',
      align: 'center',
      render: (_, record) => <><span>{JSON.parse(record.questionnaire)?.filter(x=>x.key=='intentArea')[0]?.result}</span></>,

    },
    {
      title: '购房预算',
      dataIndex: 'maxPrice',
      key: 'maxPrice',
      align: 'center',
      render:(x)=>x&&<span>{x/10000}万</span>

    },
    {
      title: '提交时间',
      dataIndex: 'createdTime',
      key: 'createdTime',
      align: 'center',
      render: (_, record) => <><span>{record.createdTime && moment(record.createdTime).format('YYYY-MM-DD HH:mm:ss')}</span></>,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      render: (_, record) => <><span>{record.status == '0' ? '待回访' : record.status == '1' ? '已回访' : record.status == '2' ? '无效' : ''}</span></>,
    },
    {
      title: '操作',
      dataIndex: 'customerId',
      key: 'customerId',
      align: 'center',

      render: (_, record) => (
        <>
          {record.status == '0' ? (
            <AuthButton name="house.abroad.reply" noRight={null}>
              <Button type="link" onClick={() => toAudit(record, 'edit')}>
                审核
              </Button>
            </AuthButton>
          ) : (
            <AuthButton name="house.abroad.detail" noRight={null}>
              <Button type="link" onClick={() => toAudit(record, 'detail')}>
                查看详情
              </Button>
            </AuthButton>
          )}
        </>
      ),
    },
  ]


  const searchFields = [
    {
      name: 'name',
      label: '姓名',
      placeholder: '请输入姓名',
    },
    {
      name: 'tel',
      label: '电话',
      placeholder: '请输入电话',
    },
    // {
    //   name: 'types',
    //   label: '类型',
    //   placeholder: '类型',
    //   type: 'select',
    //   options: [
    //     { label: '全部', value: '' },
    //     { label: '买房', value: '1' },
    //     { label: '租房', value: '2' },
    //     { label: '海外', value: '3' }
    //   ]
    // },
    {
      name: 'verifyStatus',
      label: '状态',
      placeholder: '请选择状态',
      type: 'select',
      placeholder: '全部',//错误
      options: [
        { label: '全部', value: '' },
        { label: '待回访', value: '0' },
        { label: '已回访', value: '1' },
        { label: '无效', value: '2' }
      ]
    },
  ]
  const actionRender = () => {
    return (
      <Button type='primary' loading={exportLoding} onClick={() => exportRecommendCustomer()}>
        导出
      </Button>
    );
  };

  return (
    <>
      <QueryTable
        rowKey="id"
        ref={ref}
        api={apis.searchHouse.list}
        searchFields={searchFields}
        columns={columns}
        postData={data => {
        
          data.type='3'
          return data;
        }}
        actionRender={actionRender}
      />

    </>
  );
}

export default Recommend
