import React from 'react'
import { FilterTable } from 'wptpc-design'
import { Link } from 'dva/router'
import { thanos } from '@/conf/config'
import { Button } from 'antd'
import { Divider, message, Popconfirm } from 'antd'

const apiUrl = `${thanos}/thanos-admin/api/v1/group/list`

class GroupList extends React.PureComponent {
  state = {
    showModal: false,
    params: {}
  }

  filterSetting = {
    rfBtnsJsx: <Link
      to={{
        pathname: './group/add'
      }}
    ><Button>新增分组</Button></Link>,
    isClearSearch: true,
    formFields: [
      {
        label: '描述：',
        type: 'input',
        key: 'queryName',
        placeholder: '分组名称'
      }
    ]
    // 在接口请求前，可以修改给接口的入参
    // beforeSearchFunc: params => {
    //   params.pageNum = params.pageNum
    // }
  }

  // filtertable的列表配置
  tableSetting = {
    pagination: {
      pageSize: 10
    },
    columnConfig: [
      {
        title: 'ID',
        dataIndex: 'id'
      },
      {
        title: '分组名称',
        dataIndex: 'name'
      },
      {
        title: '描述',
        dataIndex: 'description'
      },
      {
        title: '前置函数',
        dataIndex: 'preScript'
      },
      {
        title: '后置函数',
        dataIndex: 'postScript'
      },
      {
        title: '创建人',
        dataIndex: 'createUser'
      },
      {
        title: '修改人',
        dataIndex: 'updateUser'
      },
      {
        title: '操作',
        dataIndex: 'actions',
        // 所有需要弹窗操作的都可以用编辑的逻辑；所有不需要弹窗的操作，比如上架、发布等，都可以用”删除“的逻辑
        render: (text, record) => (
          <span>
            <Link
              to={{
                pathname: './edit/' + record.name,
                state: record
              }}
            >编辑</Link>
            <Divider type="vertical"/>
            <Popconfirm
              title="确定删除"
              onConfirm={() => this.delItem(record)}>
              <a>删除</a>
            </Popconfirm>
          </span>)
      }
    ],
    getRefresh: refresh => {
      this.refresh = refresh
    }
  }

  render () {
    return (
      <div>
        <FilterTable filterSetting={this.filterSetting} tableSetting={this.tableSetting} apiUrl={apiUrl}
        />
      </div>
    )
  }
}

export default GroupList