import React, { useState } from 'react';
import {  Avatar, Button,message } 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';
import BuildingSelect from '@/components/SelectButton/BuildSelect';



/**
 *
 *
 * @param {*} props
 * @returns
 */
function Recommend(props) {
  const [exportLoding,setExportLoding] = useState(false)

  function toAudit(cuurentId) {
    router.push({
      pathname: '/customer/recommend/customer/audit',
      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: 'picture',
    //   key: 'picture',
    //   render: (_, record) => <Avatar shape="square" src={record.picture} size={64} icon="user" />,
    // },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      // eslint-disable-next-line no-nested-ternary
      render: (_, record) => <><span>{record.sex === 1 ? '男' : record.sex === 2 ? '女' : '未知'}</span></>,
    },
    {
      title: '意向项目',
      dataIndex: 'buildingName',
      key: 'buildingName',
    },
    {
      title: '推荐人',
      dataIndex: 'recommendPersonName',
      key: 'recommendPersonName',
      render: (_, record) => <><span>{(record.recommendPersonName  ? record.recommendPersonName : '') + " " + (record.recommendPhone  ? record.recommendPhone : '')}</span></>,
    },
    {
      title: '推荐时间',
      dataIndex: 'createDate',
      key: 'createDate',
      render: (_, record) => <><span>{record.createDate && moment(record.createDate).format('YYYY-MM-DD')}</span></>,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (_, record) => <><span>{record.status === '1' ? '未到访' : record.status === '2' ? '已到访' : record.status === '3' ? '无效' : ''}</span></>,
    },
    {
      title: '操作',
      dataIndex: 'customerId',
      key: 'customerId',
      render: (_, record) => (
        <>{record.status === '1' ? (
          <AuthButton name="customer.channel.verify">
            <Button type='link' onClick={() => toAudit(record.channelCustomerId)}>审核</Button>
          </AuthButton>
        ) : (
          <Button type='link' onClick={() => toAudit(record.channelCustomerId)}>查看详情</Button>
        )
          
          }
          {/* {
            <AuthButton name="admin.customer.recommend.verify.id.put" noRight={null}>
              {record.verifyStatus === 0 ? <span style={{ color: 'rgba(239,39,58,1)', cursor: 'pointer' }} onClick={() => toAudit(record.customerId)}>审核</span> : ''}
            </AuthButton>
          } */}
        </>
      ),
    },
  ]

 const searchFields=[
     {
      name: 'buildingId',
      label: '项目',
      placeholder: '项目',
      render: () => <BuildingSelect style={{width: 160}} />
    },
  {
    name: 'name',
    label: '姓名',
    placeholder: '请输入姓名',
  },
  {
    name: 'phone',
    label: '电话',
    placeholder: '请输入电话',
  },
  {
    name: 'recommendPersonName',
    label: '推荐人',
    placeholder: '请输入推荐人姓名',
  },
  {
    name: 'recommendPhone',
    label: '推荐人电话',
    placeholder: '请输入推荐人电话电话',
  },
  {
    name: 'status',
    label: '状态',
    placeholder: '请选择状态',
    type: 'select',
    options: [
      {label: '未到访', value: '1'},
      {label: '已到访', value: '2'},
      {label: '无效', value: '3'}
    ]
  },
 ]

 const actionRender = () => {
    
  return (
    <Button type="danger" loading={exportLoding} onClick={() => exportRecommendCustomer()}>
      导出
    </Button>
  );
};

  return (
    <>
      <QueryTable
          rowKey="recommendCustomer"
          api={apis.customer.recommender}
          searchFields={searchFields}
          columns={columns}
          postData={data => {
            data.type='customer'
            return data;
          }}
          actionRender={actionRender}
        />
    
    </>
  );
}

export default Recommend
