import Taro from '@tarojs/taro'
import { View, Image, Text, Block } from '@tarojs/components'
import CtsThumb from '../thumb'
import dateformat from 'dateformat'

let date_bg1 = `${Taro['common'].imgUrlTeam}date_bg1.png`
let date_bg2 = `${Taro['common'].imgUrlTeam}date_bg2.png`

import classNames from 'classnames'
import PropTypes, { InferProps } from 'prop-types'
import CtsComponent from '../../common/component'
import { CtsLogProps } from 'types/log'

// 记录等级样式
let recordTypeStatus = {
  1: 'color-btn',
  2: 'color-orange-sub',
  3: 'color-danger'
}

/**
 * 施工记录详情组件
 */
export default class CtsLog extends CtsComponent<CtsLogProps> {
  // static options = {
  //   addGlobalClass: true
  // }

  public static defaultProps: CtsLogProps
  public static propTypes: InferProps<CtsLogProps>

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

  // 工人头像渲染
  private renderThumb(lists: any[]): any {
    return lists.map((item, index) => {
      return <CtsThumb key={String(index)} headImg={item.headImg} name={item.workerName} />
    })
  }

  public render(): JSX.Element {
    let { className, data, isDetail, isAuth } = this.props

    // 期限剩余/过期天数
    let dateDiff: number = 0
    if (data.limitDate && data.createTime) {
      dateDiff = (new Date(dateformat(data.limitDate.replace(/-/g, '/'), 'yyyy/mm/dd')).getTime() - new Date(dateformat(data.createTime.replace(/-/g, '/'), 'yyyy/mm/dd')).getTime()) / (1000 * 60 * 60 * 24)
    }

    // 跳转url路径前缀，jgb是/packageA，其他版是/ggb
    let url: string = ''
    if (Taro['common'].apiLink === '/jgb') {
      url = '/packageB'
    } else {
      url = '/ggb'
    }

    return (
      <View className={classNames('cts-log', className)}>
        <View className='cts-log-content' onClick={() => { !isDetail && Taro.navigateTo({ url: `${url}/pages/construction/construction_detail/construction_detail?projectId=${data.projectId}&recordId=${data.recordId}&isAuth=${isAuth}` }) }}>
          <View className='item-left'>
            <CtsThumb headImg={data.recordUserHeadImg} name={data.recordUserName} />
          </View>
          <View className='item-right'>
            <View className='title'>
              <View className='name'>
                <Text>{data.recordUserName}</Text>
                {
                  data.groupName &&
                  <Text className='group-name'>{data.groupName}</Text>
                }
              </View>
              <View className={classNames('status', recordTypeStatus[data.recordLevel])}>#{data.recordLabel}</View>
            </View>

            {
              data.createTime &&
              <View className='time'>
                <View className='date'>{dateformat(data.createTime.replace(/-/g, '/'), 'yyyy.mm.dd HH:MM')}</View>
              </View>
            }

            {
              data.workItems &&
              <View className='info'>{data.workItems}</View>
            }

            {
              data.recordContent &&
              <View className='info-sub'>{data.recordContent}</View>
            }

            {
              data.recordAttachments && data.recordAttachments.length > 0 &&
              <View className='imgs-list'>
                {
                  data.recordAttachments.map((item, index) => {
                    return <Image key={String(index)} src={item} mode='scaleToFill' onClick={() => { isDetail && Taro['common'].previewImage(item, data.recordAttachments) }} />
                  })
                }
              </View>
            }

            {
              data.limitDate &&
              <View className='record-time'>
                <Text className='iconfont icongongshi'></Text>

                {
                  // 列表只显示日期，详情都显示
                  !isDetail ?
                    <View className='record-time-text'>{data.limitDate}</View>
                    :
                    <Block>
                      <View className='record-time-text'>期限整改 {data.limitDate}</View>
                      {
                        // 不等于0，并且小于等于30天，并且大于等于-30天
                        dateDiff !== 0 && dateDiff <= 30 && dateDiff >= -30 &&
                        <View className='record-time-status'>
                          <Text>{dateDiff > 0 ? '剩余' : '过期'}{dateDiff > 0 ? dateDiff : Math.abs(dateDiff)}天</Text>
                          <Image src={dateDiff > 0 ? date_bg1 : date_bg2} mode='widthFix' />
                        </View>
                      }
                    </Block>
                }
              </View>
            }

            {
              data.recordArea &&
              <View className='area'>
                <Text className='iconfont iconshigongquyu'></Text>
                <View className='area-text'>{data.recordArea}</View>
              </View>
            }

            {
              // 详情才显示
              isDetail && data.assignmentWorkers && data.assignmentWorkers.length > 0 &&
              <View className='worker-info' onClick={() => { Taro.navigateTo({ url: `${url}/pages/construction/construction_person_detail/construction_person_detail?recordId=${data.recordId}` }) }}>
                <Text className='iconfont iconicon_gongren'></Text>
                <View className='worker-info-list'>{this.renderThumb(data.assignmentWorkers)}</View>
                <View className='worker-info-text'>共计{data.assignmentWorkers.length}人</View>
              </View>
            }

            {
              // 详情才显示
              isDetail && data.assignmentGroups.length > 0 &&
              <View className='group'>
                <Text className='iconfont iconzu'></Text>
                <View className='text'>{data.assignmentGroups[0]}</View>
              </View>
            }

            {
              data.recordAddress &&
              <View className='address'>
                <Text className='iconfont iconicon_dibiao'></Text>
                <View className='text'>{data.recordAddress}</View>
              </View>
            }

            {
              // 列表才显示
              !isDetail && data.recordCommentCount > 0 && data.recordCommentListVO &&
              <View className='comment'>
                {
                  data.recordCommentCount > 1 &&
                  <View className='comment-more'>
                    <Text className='iconfont iconhouyirianniu'></Text>
                    <Text>此条日志共有{data.recordCommentCount}条回复,最新一条如下</Text>
                    <Text>(查看全部)</Text>
                  </View>
                }

                <View className='comment-list'>
                  <View className='comment-list-item'>
                    <View className='comment-left'>
                      <CtsThumb headImg={data.recordCommentListVO.headImg} name={data.recordCommentListVO.username} />
                    </View>
                    <View className='comment-right'>
                      <View className='comment-title'>
                        <Text className='comment-name'>{data.recordCommentListVO.username}：</Text>
                        <Text className='comment-text'>{data.recordCommentListVO.content}</Text>
                      </View>

                      {
                        data.recordCommentListVO && data.recordCommentListVO.commentAttachmentImgList.length > 0 &&
                        <View className='imgs-list'>
                          {
                            data.recordCommentListVO.commentAttachmentImgList.map((item, index) => {
                              return <Image key={String(index)} src={item} mode='scaleToFill' />
                            })
                          }
                        </View>
                      }

                      {
                        data.recordCommentListVO && data.recordCommentListVO.createTime &&
                        <View className='time'>
                          <View className='date'>{dateformat(data.recordCommentListVO.createTime.replace(/-/g, '/'), 'yyyy.mm.dd HH:MM')} {data.recordCommentListVO.commentLabel === '2' ? '确认此条日志' : ''}</View>
                        </View>
                      }

                    </View>
                  </View>
                </View>
              </View>
            }

            {
              // 有权限操作，并且是列表才显示
              isAuth && !isDetail &&
              <View className='construction-operation'>
                <View className='operation-btn' onClick={(e) => { e.stopPropagation(); Taro['common'].makePhoneCall(data.recordUserMobile) }}>
                  <Text className='iconfont iconlianxi'></Text>
                  <Text className='btn-text'>联系</Text>
                </View>
                {/* <View className='operation-btn'>
                <Text className='iconfont iconfenxiang'></Text>
                <Text className='btn-text'>分享</Text>
              </View> */}
                <View className='operation-btn' onClick={(e) => { e.stopPropagation(); Taro.navigateTo({ url: `${url}/pages/construction/comment/comment?type=1&recordId=${data.recordId}` }) }}>
                  <Text className='iconfont iconpinglun'></Text>
                  <Text className='btn-text'>评论</Text>
                </View>

                {
                  // 是否有确认权限
                  data.canConfirm &&
                  (
                    // 是否已确认
                    data.myConfirmed ?
                      <View className='operation-btn'>
                        <Text className='confirm'>已确认</Text>
                      </View>
                      :
                      <View className='operation-btn' onClick={(e) => { e.stopPropagation(); Taro.navigateTo({ url: `${url}/pages/construction/comment/comment?type=2&recordId=${data.recordId}` }) }}>
                        <Text className='iconfont iconqueren'></Text>
                        <Text className='btn-text'>确认</Text>
                      </View>
                  )
                }
              </View>
            }
          </View>
        </View>
      </View>
    )
  }
}

CtsLog.defaultProps = {
  data: {},
  isDetail: false,
  isAuth: true
}

CtsLog.propTypes = {
  data: PropTypes.object,
  isDetail: PropTypes.bool,
  isAuth: PropTypes.bool
}