import React, { PureComponent, useMemo, 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';


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




function Recommend() {
  const [exportLoding, setExportLoding] = useState(false)
  //详情页面弹窗配置
  function toAudit(cuurentId) {
    router.push({
      pathname: '/home/recommend/audit',
      query: {
        id: cuurentId,
      },
    })

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

  }


  /**
   *导出数据（推荐用户）
   *
   */
  function exportRecommendCustomer() {
    setExportLoding(true)
    request({
      ...apis.customer.customerRecommendRecommenderExport,
      responseType: 'blob',
    }).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>{record.area = '江苏省南京市秦淮区'}</span></>,

    },
    {
      title: '意向项目',
      dataIndex: 'intention',
      key: 'intention',
      align: 'center',
      // render:(_,record)=><span>{record='香颂.蔚澜半岛'}</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.verifyStatus === 0 ? '待回访' : record.verifyStatus === 1 ? '已回访' : record.verifyStatus === 2 ? '无效' : ''}</span></>,
    },
    {
      title: '操作',
      dataIndex: 'customerId',
      key: 'customerId',
      align: 'center',

      render: (_, record) => (
        <><span style={{ color: 'rgba(239,39,58,1)', cursor: 'pointer' }} >
          {record.verifyStatus === 0 ? <span onClick={() => toAudit(record.customerId)}>审核</span>
            : record.verifyStatus === 1 ? <span onClick={() => toSee(record.customerId)}>查看详情</span>
              : record.verifyStatus === 2 ? <span onClick={() => toSee(record.customerId)}>查看详情</span>
                : ''}</span>
        </>
      ),
    },
  ]


  const searchFields = [

    {
      name: 'project',
      label: '意向项目',
      placeholder: '请输入意向项目',
    },

    {
      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="danger" loading={exportLoding} onClick={() => exportRecommendCustomer()}>
        导出
      </Button>
    );
  };

  return (
    <>
      <QueryTable
        rowKey="recommendCustomer"
        // recommendCustomer
        api={apis.searchHouse.list}
        searchFields={searchFields}
        columns={columns}
        actionRender={actionRender}
      />

    </>
  );
}

export default Recommend
