import React, { useState, useEffect } from 'react';
import { Form, Table } from 'antd';
import router from 'umi/router';
import AuthButton from '@/components/AuthButton';
import withActions from '@/components/ActionList';
import EditIcon from '@/components/EditIcon';
import Navigate from '@/components/Navigate';
import apis from '../../../services/apis';
import request from '../../../utils/request'

const { Column } = Table;

function header(props) {
  // 获取初始化数据
  const [data, setData] = useState([])

  useEffect(() => {
    getList({ pageNum: 1, pageSize: 10 });
  }, [])

  // 查询列表
  const getList = (params) => {
    request({ ...apis.carsuseFigure.customImg, params: { ...params }, }).then((data) => {
      console.log(data, "datadata")
      if (data.records.length > 0) {
        setData(data.records)
      } else {
        setData([
          { 'imgUrl': 'https://estateagents.oss-cn-shanghai.aliyuncs.com/miniapp/upload/images/1574145199853-97feda7895c65be33aa234a7b81b37f.jpg', 'imgType': 'index', 'imgDesc': '小程序首页分享配图' },
          { 'imgUrl': 'http://njcj.oss-cn-shanghai.aliyuncs.com/icon.png', 'imgType': 'indexNews', 'imgDesc': '首页资讯logo' }
        ])
      }

    })
  }

  // 跳转到编辑商品
  const toEditCustom = (imgId, imgType) => () => {
    router.push({
      pathname: '/carouselFigure/customImg/edit',
      query: {
        imgId,
        imgType: imgType
      },
    });
  }


  // const { getFieldDecorator } = props.form
  return (

    <>
      <Table dataSource={data}>
        <Column title="图片" dataIndex="imgUrl" key="imgUrl"
          render={(text, record) => (
            <Navigate onClick={toEditCustom(record.imgId, record.imgType)} ><img src={record.imgUrl} height="120px" width="150px" style={{ objectFit: 'contain' }} /></Navigate>
          )} />
        <Column title="类型" dataIndex="imgType" key="imgType"
          render={(text, record) => (
            <span>
              {record.imgType === 'index' ? '首页分享' : record.imgType === 'indexNews' ? '首页资讯' : '请编辑'}
            </span>
          )}
        />
        <Column title="说明" dataIndex="imgDesc" key="imgDesc" />
        <Column title="操作"
          dataIndex="handle"
          key="handle"
          render={withActions((text, record) => [
            <AuthButton name="admin.custom.put" noRight={null}>
              <EditIcon text="编辑" type="edit" onClick={toEditCustom(record.imgId, record.imgType)}></EditIcon>
            </AuthButton>,
          ])}
        />
      </Table>,
    </>
  )
}
const WrappedHeader = Form.create({ name: 'header' })(header);

export default WrappedHeader
