import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'

import classNames from 'classnames'
import PropTypes, { InferProps } from 'prop-types'
import CtsComponent from '../../common/component'
import { CtsGroupStatusProps } from '@/types/group-status'

/**
 * 班组状态列表组件
 */
export default class CtsGroupStatus extends CtsComponent<CtsGroupStatusProps> {
  // static options = {
  //   addGlobalClass: true
  // }
  
  public static defaultProps: CtsGroupStatusProps
  public static propTypes: InferProps<CtsGroupStatusProps>

  public constructor(props: CtsGroupStatusProps) {
    super(props)
		this.state = {}
  }

  // 跳转到班组详情
  private toGroupDetail(item: any): void {
    const { mode } = this.props
    const { source, groupId, projectGroupWorkerId } = item
    let url: string = '/packageA/pages/group/group_detail/group_detail'
    if (mode === 'active') {
      url += `?source=${source}&searchId=${source === 1 ? groupId : projectGroupWorkerId}&mode=${mode}`
      Taro.setStorageSync('groupDetailUrl', url)
    } else if (mode === 'history') {
      url += `?source=${source}&groupId=${groupId}&pgWorkerId=${projectGroupWorkerId}&mode=${mode}`
      Taro.setStorageSync('groupDetailUrl', url)
    }
    // console.log(url)
    Taro.navigateTo({ url })
  }

  public render(): JSX.Element {
    const { className, groupList } = this.props
    return (
      <View className={classNames('cts-group-status', className)}>
        {
          groupList.map((item, index) => {
            return (
              <View
                className='cts-group-status-list'
                key={String(index)}
                onClick={this.toGroupDetail.bind(this, item)}
              >
                <View className='cts-group-status-title ellipsis'>{item.groupName}</View>
                <View className='cts-group-status-detail'>
                  {item.source === 2 ? <Text className='cts-group-status-detail1'>队长：{item.teamLeaderName || '无'}</Text> : null}
                  {item.source === 2 && item.selfBuilt ? <Text className='cts-group-status-detail2'>我是领班</Text> : null}
                  {item.source === 2 && !item.selfBuilt ? <Text className='cts-group-status-detail1'>领班：{item.leaderName || '无'}</Text> : null}
                  {item.source === 1 && item.selfBuilt ? <Text className='cts-group-status-detail3 ellipsis'>我创建的</Text> : null}
                  {item.source === 1 && !item.selfBuilt ? <Text className='cts-group-status-detail1'>组长：{item.leaderName || '无'}</Text> : null}
                </View>
                <View className='cts-group-status-name ellipsis'>{item.projectName}</View>
              </View>
            )
          })
        }

      </View>
    )
  }
}

CtsGroupStatus.defaultProps = {
  mode: 'active',
  groupList: [],
}

CtsGroupStatus.propTypes = {
  mode: PropTypes.string,
  groupList: PropTypes.array,
}