import React, { useState, useEffect } from 'react';
import { Button, message, Table } from 'antd';
import router from 'umi/router';
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 channels from './channelList.less';
import Navigate from '@/components/Navigate';

const columns = [
  // {
  //   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) => <Navigate to={`/channel/editChannel?id=${record.channelId}`}>{text}</Navigate>,
  },
  {
    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',
    render: (text, record) => <Navigate onClick={() => toNewCustomer(record)}>{text}</Navigate>,
  },
  {
    title: '操作',
    dataIndex: '',
    key: '',
    align: 'center',
    render: withActions((text, record) => [
      <AuthButton name="admin.channel.id.put" noRight={null}>
        <EditIcon text="编辑" type="edit" onClick={() => toedit(record.channelId)} />
      </AuthButton>,
    ]),
  },
];

// 跳转到添加页面
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) {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [data, setData] = useState({ channelNmae: [], result: [] })
  const [channelNmae, setChannelNmae] = useState()
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    localStorage.removeItem('value');
    getList({ pageNum: 1, pageSize: 10 })
  }, [])

  function getList(params) {
    request({ ...apis.channelList.getList, params: { ...params } }).then((data) => {
      setData(data)
    }).catch((err) => {
      console.log(err)
      message.info(err.msg || err.message)
    })
  }
  // value 的值
  function handleChange(value) {
    // setQueryData({ ...queryData, channelId: value });
    localStorage.setItem('value', value);
  }
  // 查询
  function queryList() {

    getList({ pageNum: 1, pageSize: 10, channelId: channelNmae })
  }
  // 重置
  function reset() {
    setChannelNmae()
    getList({ pageNum: 1, pageSize: 10 })
  }

  // 跳编辑页
  function toEdit() {
    router.push({
      pathname: '/integralMall/editGoods',
      query: {
        a: 'b',
      },
    });
  }

  // 分页
  function onChange(pageNumber) {
    getList({ pageNum: pageNumber, pageSize: 10, channelId: channelNmae })
    // getList({ pageNum: pageNumber, pageSize: 10, ...values })
    // props.form.validateFields((err, values) => {
    //   if (!err) {
    //     getList({ pageNum: pageNumber, pageSize: 10, ...values })
    //   }
    // });
  }

  function onChannelChange(value) {
    setChannelNmae(value)
  }

  return (
    <>
      <div className={channels.searchBox}>
        <div>
          <span className={channels.selectName}>渠道名称</span>
          <ChannelSelect value={channelNmae} onChange={onChannelChange}></ChannelSelect>
          {/* 
          <Select defaultValue="请选择" style={{ width: 180 }} onChange={handleChange}>
            <option value="">全部</option>
            {data.channelNmae.map(Item =>
              <Option value={Item.channelId}> {Item.channelName} </Option>,
            )} */}
          {/* {listItems} */}
          {/* </Select> */}
        </div>
        <div >
          <AuthButton name="admin.channel.search" noRight={null}>
            <Button type="primary" onClick={() => queryList()}>搜索</Button>
          </AuthButton>
          <Button onClick={() => reset()} style={{ marginLeft: '8px' }}>重置</Button>
        </div>
      </div>
      <AuthButton name="admin.channel.post" noRight={null}>
        <Button type="danger" onClick={toAdd} className={channels.about} >新增</Button>
      </AuthButton>
      <Table dataSource={data.result.records} columns={columns} rowKey="channelList" pagination={{ pageSize: 10, total: data.result.total, onChange }} />
    </>
  )
}
