import Taro, { Component } from '@tarojs/taro';
import { connect } from '@tarojs/redux'
import * as actions from '@/actions/user'
import './index.scss'
import { transferImage } from '@/utils/tools'
import * as noticeType from '@/constants/common.js'

@connect(state => state.user, { ...actions })

export default class Index extends Component {
    state = {
        show: true,
    }
    static options = {
        addGlobalClass: true,
    };
    static defaultProps = {
        style: {},
        data: []
    }
    componentDidMount() {

    }
    //   悬浮框显示隐藏
    handleClick() {
        setTimeout(() => {
            this.setState({
                show: false
            })
        }, 260)
    }
    handleClickTwo() {
        setTimeout(() => {
            this.setState({
                show: true
            })
        }, 260)
    }
    // 拨打电话
    handleTelClick(data, e) {
        e.stopPropagation()
        Taro.makePhoneCall({
            phoneNumber: data.phone
        })
    }
    handleChatClick(data, e) {
        e.stopPropagation()
        
        const { userInfo: { miniApp: { tpls }, person: { personId, name, nickname } } } = this.props
        const tplId = (tpls.filter(x => x.tplType == noticeType.TPL_NOTICE && x.isSubscribe == true)[0] || {}).tplId
        const realname = name || nickname

        wx.requestSubscribeMessage({
            tmplIds: [tplId],
            success(res) {
            },
            fail(res) {

            },
            complete() {
                Taro.navigateTo({
                    url: `/pages/im/index?sendId=${personId}&sendName=${encodeURIComponent(realname)}&receiverId=${data.id}&receiverName=${encodeURIComponent(data.name)}`
                })
            }
        })
    }

    handleConsuItemClick(item) {
        Taro.navigateTo({
          url: `/pages/card/index?id=${item.id}`
        })
      }
    render() {
        const { show } = this.state
        const { data, style, smallStyle } = this.props
        return (
            <View >
                <View className={show ? "consultant show" : "consultant hide"} style={smallStyle} onClick={this.handleClick}  >
                    <Image src={require('@/assets/person/left.png')} className='left-img'></Image>
                    <Image src={transferImage(data.picture || require('@/assets/default-avatar.png'))} className='img'></Image>
                    <View className="text">{data.name || ''}</View>
                </View>
                <View className={show ? "consultant-more hide " : "consultant-more more-show "} style={style} >
                    <Image src={require('@/assets/person/cancel.png')} onClick={this.handleClickTwo} className='cancel-img'></Image>
                    <Image src={transferImage(data.picture || require('@/assets/default-avatar.png'))} className='touxiang' onClick={this.handleConsuItemClick.bind(this, data)}></Image>
                    <View className="text" onClick={this.handleConsuItemClick.bind(this, data)}>
                        <View className="name">{data.name || ''}</View>
                        <View className="company">{data.buildingName || ''}</View>
                    </View>
                    <Image src={require('@/assets/person/phone.png')} onClick={this.handleTelClick.bind(this, data)} className='phone-img'></Image>
                    <Image src={require('@/assets/person/message.png')} onClick={this.handleChatClick.bind(this, data)} className='message-img'></Image>
                </View>
            </View>
        );
    }
}