import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal,Breadcrumb } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import styles from '../../style/GoodsList.less';
import router from 'umi/router';
import BuildSelect from '../../../components/SelectButton/BuildSelect'
import apis from '../../../services/apis';
import request from '../../../utils/request'
import AuthButton from '@/components/AuthButton';

const { Option } = Select;
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':'小程序首页分享配图'}])
        }
        
    })
  }
  
    // 跳转到编辑商品
  const toEditCustom = (imgId) => () => {
    router.push({
      pathname: '/carouselFigure/customImg/edit',
      query: {
        imgId
      },
    });
  }

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

    <>
      <Table dataSource={data}>
        <Column title="图片" dataIndex="imgUrl" key="imgUrl" 
        render={(text, record) => (
        <img src={record.imgUrl} height="120px" width="150px" />
        )}/>
        <Column title="类型" dataIndex="imgType" key="imgType" 
        render={(text, record) => (
          <span>
            {record.imgType === 'index' ?'首页分享':'请编辑'}
          </span>
          )}
        />
        <Column title="说明" dataIndex="imgDesc" key="imgDesc" />
        <Column title="操作" 
        dataIndex="handle" 
        key="handle" 
        render={(text, record) => (
          <AuthButton name="admin.custom.put" noRight={null}>
            <span style={{ color: '#FF925C', cursor: 'pointer' }} onClick={toEditCustom(record.imgId)}>
              编辑<Icon type="form" className={styles.edit} />
            </span>
          </AuthButton>
          )}/>/>
      </Table>,
    </>
  )
}
const WrappedHeader = Form.create({ name: 'header' })(header);

export default WrappedHeader
