import { ComponentClass } from 'react'
import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import './index.scss'
import SdFormid from '../sdFormid';

type PageOwnProps = {
  children?: any // 替换note
  className?: string
  onClick?: any
  cover?: any
  title: any
  note?: any
  disabled?: boolean
}

type IProps = PageOwnProps

interface Index {
  props: IProps;
}

class Index extends Component {

  static options = {
    addGlobalClass: true
  }

  handleClick = (...args) => {
    this.props.onClick(...args)
  }

  render() {
    const {
      title,
      disabled,
      note,
      cover
    } = this.props

    const className = `sd-card  ${this.props.className || ''} `

    return (
      <SdFormid disabled={disabled} onClick={this.handleClick}>
        <View className={className}>
          <View className='sd-card-cover'>
            <Image className='sd-card-cover-img' mode='widthFix' src={cover} />
          </View>
          <View className='sd-card-body'>
            <View className='sd-card-title'>
              <Text className='sd-ell'>{title}</Text>
            </View>
            {
              note &&
              <View className='sd-card-note'>
                <Text className='sd-ell'>{note}</Text>
              </View>
            }
            {this.props.children}
          </View>
        </View>
      </SdFormid>
    )
  }
}

export default Index as ComponentClass<PageOwnProps>