import Taro, { Component } from '@tarojs/taro'
import { connect } from '@tarojs/redux'
import * as actions from '@actions/user'
import './index.scss'
import Poster from './poster'
import { agentCurrent } from '@services/agent'
import BackHomeBtn from '@components/BackHomeBtn'
import { getMiniQrcode } from '@services/common'
const topImg = 'https://estateagents.oss-cn-shanghai.aliyuncs.com/miniapp/images/index/top.jpg'
@connect(state => state.user, { ...actions })

export default class Index extends Component {
  config = {
    navigationBarTitleText: '我的主页'
  }
  state = {
    posterShow: 'none',
    posterData: {},
    posterVisible: false,
    agent: {},
    qrcode: ''
  }
  componentWillMount() {
    agentCurrent().then(res => {
      this.setState({
        agent: res
      })
      const payload = {
        "scene": `id=${res.personId}&from=poster&recommender=${res.personId}&agentCode=${res.agentCode}`,
        "page": 'pages/agent/become/index',
      }
      getMiniQrcode(payload).then(qrcode => {
        this.setState({
          qrcode,//小程序二维码
        })
      })
    })

  }
  onShareAppMessage = () => {
    const { agent: { nickname, personId, agentCode } } = this.state
    return {
      title: `${nickname}邀请你成为经纪人`,
      path: `/pages/agent/become/index?id=${personId}&from=share&recommender=${personId}&agentCode=${agentCode}`,//分享地址
      imageUrl: topImg
    }
  }
  getPosterData = () => {
    return new Promise(resolve => {
      const { posterData } = this.state
      if (posterData.qrcode) {
        resolve(posterData)
        return
      }
      const { userInfo: { person } } = this.props
      const { agent: { avatarurl, phone, agentCode }, qrcode } = this.state
      let data = {
        codeImg: qrcode,
        avatarurl: avatarurl,//访问者头像
        poster: topImg,//banner
        phone: phone,
        code: agentCode
      }
      resolve(data)
    })
  }
  // 开始生成海报
  toggleMakePosterModal = (flag) => {
    if (flag) {
      this.getPosterData().then(posterData => {
        this.setState({
          posterVisible: !!flag,
          posterData
        })
      })
    }
    else {
      this.setState({
        posterVisible: !!flag
      })
    }
  }
  render() {
    const { posterVisible, posterData, posterShow, agent, qrcode } = this.state
    return (
      <Block>
        {/* 生成海报 */}
        {posterVisible && (<Poster data={posterData} toggle={this.toggleMakePosterModal}></Poster>)}
        <View className='page'>
          <Image src={topImg} className='top_img' mode='aspectFill'></Image>
          <View className='agent_info'>
            <Image src={agent.avatarurl} className='agent_avatar'></Image>
            <View className='agent_info-center'>
              <View>手机号：<Text className='agent_info-tel'>{agent.tel || agent.phone}</Text></View>
              <View>我的推荐码：<Text className='agent_info-code'>{agent.agentCode}</Text></View>
            </View>
            <Image src={qrcode} className='agent_code'></Image>
          </View>
          <View className='agent_btn'>
            <Button className='agent_btn-save' onClick={() => { this.toggleMakePosterModal(true) }}>保存海报</Button>
            <Button className='agent_btn-share' open-type="share">分享好友</Button>
          </View>
        </View>
        <BackHomeBtn></BackHomeBtn>
      </Block>

    )
  }
}
