import Taro, { Component } from '@tarojs/taro';
import Authorize from '@components/authorize'
import './index.scss'
import { AtTabs, AtTabsPane } from 'taro-ui'
import "taro-ui/dist/style/components/tabs.scss"
import { savePoint, updatePoint } from '@services/common'
import { queryMyCustomer } from '@services/person'
import { connect } from '@tarojs/redux'
import Analysis from './analysis'

@connect(({ user, city }) => ({ user, city }))
export default class customer extends Taro.Component {

  config = {
    navigationBarTitleText: '盘客工具'
  }

  state = {
    current: 0,
    recordId: undefined, // 埋点ID
    customerNum: {},
  }

  componentWillUnmount() {
    const { recordId } = this.state
    recordId && updatePoint(recordId)
  }
  componentDidShow() {
    Taro.showLoading()
    this.loadInfo()

  }

  loadInfo() {
    queryMyCustomer().then(res => {

      this.setState({
        customerNum: res || {}
      })
      Taro.hideLoading()
    })
  }


  handleClick(value) {
    this.setState({
      current: value
    }, )
  }
  toTransactionCustomer() {
    Taro.navigateTo({
      url: `/pages/person/customerAnalysis/transactionCustomer/index`
    })
  }
  toFollowUpCustomer() {
    Taro.navigateTo({
      url: `/pages/person/customerAnalysis/followUpCustomer/index`
    })
  }

  render() {
    const tabList = [{ title: '客户分析' }, { title: '我的客户' }]
    const { customerNum } = this.state
    return (
      <AtTabs className="tab-box" current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
        <AtTabsPane current={this.state.current} index={0} >
          <View >
            <Analysis></Analysis>
          </View>
        </AtTabsPane>
        <AtTabsPane current={this.state.current} index={1}>
          <View style="padding:10px 20px; display: flex;flex-wrap: wrap;align-content: flex-start;justify-content: space-between;">
            <View className="my-customer" onClick={this.toFollowUpCustomer} style="border-right:1px solid rgba(0,0,0,0.12)">
              <Image mode="widthFix" src={require('@assets/person/genjin.png')} className='img'></Image>
              <View className="name">跟进客户</View>
              <View className="num">{customerNum.followSum || 0}人</View>
            </View>
            <View className="my-customer" onClick={this.toTransactionCustomer}>
              <Image mode="widthFix" src={require('@assets/person/chengjiao.png')} className='img'></Image>
              <View className="name">成交客户</View>
              <View className="name">{customerNum.clinchSum || 0}人</View>
            </View>
          </View>
        </AtTabsPane>
      </AtTabs>
    )
  }
}