import React from 'react'
import router from 'umi/router'
import { Button, Input } from 'antd'
import { withSearchList } from '@/layouts/SearchList'
import { fetch, apis } from '@/utils/request'

const SearchList = withSearchList({ name: 'miniapp-theme' })
const queryTheme = fetch(apis.system.miniappTheme.list)

function MiniappTheme(props) {

  const handleAdd = () => {
    router.push('/system/miniapp-theme/edit')
    return;
  }

  const handleEdit = (theme) => {
    router.push(`/system/miniapp-theme/edit?id=${theme.themeId}`)
    return;
  }

  // 动作按钮
  const AddBtn = (<Button type="primary" icon="plus" onClick={handleAdd}>新增</Button>)

  // 搜索配置
  const searchConf = {
    // fields: https://www.npmjs.com/package/@zjxpcyc/xrc-form2
    fields: [
      {
        label: '主题名称',
        name: 'themeTitle',
        placeholder: '请填写主题名称',
        node: Input,
      },
    ],
    // onSubmit: () => {},
    // onCancel: () => {},
  }

  // table 配置
  const bodyConf = {
    columns: [
      {title: '主题名称', dataIndex: 'themeTitle', key: 'themeTitle'},
      {title: '启用时间', dataIndex: 'startTime', key: 'startTime'},
      {title: '结束时间', dataIndex: 'endTime', key: 'endTime'},
      {
        title: '当前状态',
        dataIndex: 'status',
        key: 'status',
        render: (status) => {
          return status == 1 ? <Tag color="success">正常</Tag> : <Tag color="error">无效</Tag>
        }
      },
      {
        title: '',
        key: 'action',
        render: (_, theme) => {
          return <Button type="link" onClick={theme => handleEdit(theme)}>编辑</Button>
        },
      },
    ]
  }

  // 分页设置
  const pagination = {}

  // 接口相关
  const serviceFunc = params => new Promise((resolve) => {
    queryTheme(params).then(res => {
      const {records, ...pageConf } = res
      resolve([records, pageConf])
    })
  })

  return (
    <SearchList
      title="小程序主题设置"
      actions={AddBtn}
      search={searchConf}
      body={bodyConf}
      pagination={pagination}
      service={serviceFunc}
    />
  )
}

export default MiniappTheme
