import { ComponentClass } from 'react'
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Label } from '@tarojs/components'
import './index.scss'
interface DataInterface {
  content: any,
  divideTime: any,
  avatar: any,
  contentType: any,
  isRead: any,
}
type PageOwnProps = {
  className?: string
  chat: DataInterface
  selfSend: boolean
  onCaseClick?: any
}

type IProps = PageOwnProps

interface Index {
  props: IProps;
}

class Index extends Component {

  static options = {
    addGlobalClass: true
  }

  handleClick = () => {
    this.props.onCaseClick(this.props.chat.content.caseId)
  }
  handleImageClick = () => {
    Taro.previewImage({
      urls: [this.props.chat.content]
    })
  }

  render() {
    const { chat: item, selfSend } = this.props

    return (
      <View className={'sd-chat-item ' + (this.props.className || '')}>
        {
          item.divideTime &&
          <View className='sd-chat-item-divide'>
            <Text className='sd-chat-item-time'>{item.divideTime}</Text>
          </View>
        }

        <View className={'sd-chat-item-main ' + (selfSend ? ' sd-chat-item-reverse' : '')}  >
          {/* 头像 */}
          <Image className='sd-chat-item-avatar' src={item.avatar}></Image>
          {/* 内容 */}
          <View className='sd-chat-item-content '>
            {/* 文本 */}
            {item.contentType === 0 &&
              <View className='sd-chat-item-text '>
                {item.content}
              </View>
            }
            {/* 图片 */}
            {item.contentType === 1 &&
              <Image onClick={this.handleImageClick} mode='widthFix' className='sd-chat-item-img ' src={item.content}></Image>
            }
            {/* 案例 */}
            {item.contentType === 2 &&
              <View className='sd-chat-item-case' onClick={this.handleClick}>
                <Image mode='widthFix' className='sd-chat-item-case-img' src={item.content.backgroudurl}></Image>
                <View className='sd-chat-item-case-txt'>{item.content.title}</View>
              </View>
            }
            {/* 工地 */}
            {item.contentType === 3 &&
              <View className='sd-chat-item-building' onClick={this.handleClick}>
                <Image mode='widthFix' className='sd-chat-item-building-img' src={item.content.image}></Image>
                <View className='sd-chat-item-building-txt'>{item.content.name}</View>
                <Label className='sd-chat-item-building-process'>{item.content.process}</Label>
              </View>
            }
          </View>
          {/* 已读 */}
          <View className='sd-chat-item-read'>
            {
              selfSend &&
              <View className={(item.isRead ? 'sd-chat-item-read-text ' : 'sd-chat-item-read-text sd-chat-item-unread')}>{item.isRead ? '已读' : '未读'}</View>
            }
          </View>
        </View>
      </View>
    )
  }
}

export default Index as ComponentClass<PageOwnProps>