// import { ITempItem } from '../..'
import { ComponentClass } from 'react'
import Taro, { Component } from '@tarojs/taro'
import { ITempItem } from '@/reducers/counter'
import { View, Text, Image } from '@tarojs/components'

import './index.scss'

type IProps = ITempItem

interface PageState {}
interface PageOwnProps {}

interface TempItem {
  props: IProps
  state: PageState
}

class TempItem extends Component {
  goDetail = () => {
    const { templateId, filmId } = this.props
    // Taro.navigateTo({ url: '/pages/home/device/my_film/index' })
    if (filmId) {
      Taro.navigateTo({ url: `/pages/home/tempaltes/film_detail?filmId=${filmId}` })
      // Taro.navigateTo({ url: `/pages/home/device/my_film/index` })
    } else {
      Taro.navigateTo({ url: `/pages/home/tempaltes/detail?templateId=${templateId}` })
    }
  }

  render() {
    const { templateName, templateUrl: url, filmName, equipmentCount, templateShow } = this.props
    return (
      <View className="temp-item" onClick={this.goDetail}>
        <Image
          lazyLoad
          className={templateShow === 'HORIZONTAL' ? 'temp-img' : 'temp-img temp-img2'}
          src={url.split(',')[0]}
        />
        <Text className="temp-name">{templateName || filmName}</Text>
        {equipmentCount !== undefined ? (
          <Text className="equipment-count">播放设备:{equipmentCount}台</Text>
        ) : null}
      </View>
    )
  }
}
export default TempItem as ComponentClass<PageOwnProps, PageState>