import React, { useState, useRef } from 'react';
import { Button, message, Table, Popconfirm } from 'antd';
import router from 'umi/router';
import QueryTable from '@/components/QueryTable';
import AuthButton from '@/components/AuthButton';
import ChannelSelect from '@/components/SelectButton/channelSelect';
import withActions from '@/components/ActionList';
import EditIcon from '@/components/EditIcon';
import apis from '@/services/apis';
import request from '@/utils/request';
import Navigate from '@/components/Navigate';

// 跳转到添加页面
function toAdd() {
  router.push({
    pathname: '/channel/addChannel',
    query: {
      a: 'b',
    },
  });
}
// 跳编辑页面
function toedit(channelId) {
  // alert(channelId)
  router.push({
    pathname: '/channel/editChannel',
    query: {
      id: channelId,
    },
  });
}

// 经纪人页面
function toBroker(record) {
  // if (record.brokerCount === 0) {
  //   return
  // }
  router.push({
    pathname: '/channel/brokerList',
    query: {
      id: record.channelId,
    },
  });
}

// 引进注册用户
function toNewCustomer(record) {
  // if (record.brokerCount === 0) {
  //   return
  // }
  router.push({
    pathname: '/channel/newCustomer',
    query: {
      id: record.channelId,
      name: record.channelName,
      customerNum: record.customerNum,
    },
  });
}

export default function ChannelList(props) {
  const ref = useRef();

  // 跳编辑页面
  function toedit(channelId) {
    router.push({
      pathname: '/channel/Channel/Edit',
      query: {
        id: channelId,
      },
    });
  }

  const onDelete = row => {
    request({ ...apis.channelList.deleteChannel, urlData: { id: row.channelId } })
      .then(response => {
        message.info('删除成功');
        ref.current.reload();
        // getList({ pageNum: pageNum, pageSize: 10, ...fieldsValue });
      })
      .catch(error => {});
  };

  const searchFields = [
    {
      name: 'channelId',
      label: '渠道名称',
      placeholder: '请选择渠道',
      render: () => <ChannelSelect style={{ width: 160 }} />,
    },
  ];

  const tableColumns = [
    // {
    //   title: '商品图片',
    //   dataIndex: 'img',
    //   key: 'img',
    //   align: 'center',

    //   render: (text, record) => <img src={record.img} className={channels.touxiang} />,
    // },
    {
      title: '渠道代码',
      dataIndex: 'channelCode',
      key: 'channelCode',
      align: 'center',
    },
    {
      title: '渠道名称',
      dataIndex: 'channelName',
      key: 'channelName',
      align: 'center',
      render: (text, record) => (
        <AuthButton name="channel.edit" noRight={text}>
          <Navigate to={`/channel/Channel/Edit?id=${record.channelId}`}>{text}</Navigate>
        </AuthButton>
      ),
    },
    {
      title: '联系人',
      dataIndex: 'channelContact',
      key: 'channelContact',
      align: 'center',
    },
    {
      title: '联系电话',
      dataIndex: 'contactTel',
      key: 'contactTel',
      align: 'center',
    },
    {
      title: '经纪人数',
      dataIndex: 'brokerCount',
      key: 'brokerCount',
      align: 'center',
      render: (text, record) => <Navigate onClick={() => toBroker(record)}>{text}</Navigate>,
    },
    {
      title: '推荐客户有效数',
      dataIndex: 'recommendCount',
      key: 'recommendCount',
      align: 'center',
    },
    // {
    //   title: '邀请经纪人',
    //   dataIndex: 'customerNum',
    //   key: 'customerNum',
    //   align: 'center',
    // },
    {
      title: '操作',
      dataIndex: 'edit',
      key: 'edit',
      align: 'center',
      render: (text, record) => (
        <AuthButton name="channel.delete" noRight={null}>
          <Popconfirm title="确定要进行删除操作 ?" onConfirm={() => onDelete(record)}>
            <Button type="link">删除</Button>
          </Popconfirm>
        </AuthButton>
      ),
    },
  ];

  const actionRender = () => {
    return (
      <AuthButton name="channel.add" noRight={null}>
        <Button type="primary" icon="plus" onClick={() => toedit()}>
          新增
        </Button>
      </AuthButton>
    );
  };

  return (
    <QueryTable
      ref={ref}
      rowKey="channelList"
      api={apis.channelList.getList}
      searchFields={searchFields}
      columns={tableColumns}
      actionRender={actionRender}
    />
  );
}
