import Taro, { Component } from '@tarojs/taro';
import Authorize from '@/components/authorize'
import { View } from "@tarojs/components";
import dayjs from 'dayjs'
import './index.scss'
import { AtTabs, AtTabsPane, AtProgress } from 'taro-ui'
import "taro-ui/dist/style/components/tabs.scss"
import "taro-ui/dist/style/components/progress.scss";
import { savePoint, updatePoint } from '@/services/common'
import { querySexInfo, getEchartDailyInfo, getEchartMonthInfo } from '@/services/person'
import { connect } from '@tarojs/redux'
import LineChart from "../../../components/charts/Line";
const nothing = require('@/assets/person/nothing.png')

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

  config = {
    navigationBarTitleText: '客户分析',
  }

  state = {
    current: 0,
    recordId: undefined, // 埋点ID
    sexInfo: [],
    checkedWhich: 0,
    chartInfo: [],
    chartInfo2: [],
    chartInfo3: [],
  }

  componentWillUnmount() {
    const { recordId } = this.state
    recordId && updatePoint(recordId)
  }

  handleClick(value) {
    this.setState({
      checkedWhich: 0
    })
    if (value == '0') {
      querySexInfo('new').then(res => {
        this.setState({
          sexInfo: res.slice(0, 3) || []
        })
      })
      getEchartDailyInfo('new').then(res => {
        const arr = res.reverse()
        this.setState({
          chartInfo: arr.map(x => ({ name: `${dayjs(x.day).format('MM月DD日')}`, value: x.customerNum }))
        })
      })

    } else if (value == '1') {
      querySexInfo('follow').then(res => {
        this.setState({
          sexInfo: res.slice(0, 3) || []
        })
      })
      getEchartDailyInfo('follow').then(res => {

        const arr2 = res.reverse()
        this.setState({
          chartInfo2: arr2.map(x => ({ name: `${dayjs(x.day).format('MM月DD日')}`, value: x.customerNum }))
        })
      })
    } else {
      querySexInfo('visite').then(res => {
        this.setState({
          sexInfo: res.slice(0, 3) || []
        })
      })
      getEchartDailyInfo('visite').then(res => {
        const arr3 = res.reverse()
        this.setState({
          chartInfo3: arr3.map(x => ({ name: `${dayjs(x.day).format('MM月DD日')}`, value: x.customerNum }))
        })
      })
    }

    this.setState({
      current: value
    })

  }

  componentDidMount() {
    querySexInfo('new').then(res => {
      this.setState({
        sexInfo: res.slice(0, 3) || []
      })
    })
    this.changeDailyMonth(0)
    getEchartDailyInfo('new').then(res => {
      const arr = res.reverse()
      this.setState({
        chartInfo: arr.map(x => ({ name: `${dayjs(x.day).format('MM月DD日')}`, value: x.customerNum }))
      })
    })
  }
  changeDailyMonth(inx) {
    const { current } = this.state
    const params = current == 0 ? 'new' : current == 1 ? 'follow' : 'visite'

    if (inx == 0) {
      if (params == 'new') {
        getEchartDailyInfo(params).then(res => {
          const arr = res.reverse()
          this.setState({
            chartInfo: arr.map(x => ({ name: `${dayjs(x.day).format('MM月DD日')}`, value: x.customerNum })) || []
          })
        })
      } else if (params == 'follow') {
        getEchartDailyInfo(params).then(res => {
          const arr2 = res.reverse()
          this.setState({
            chartInfo2: arr2.map(x => ({ name: `${dayjs(x.day).format('MM月DD日')}`, value: x.customerNum })) || []
          })
        })
      } else {
        getEchartDailyInfo(params).then(res => {
          const arr3 = res.reverse()
          this.setState({
            chartInfo3: arr3.map(x => ({ name: `${dayjs(x.day).format('MM月DD日')}`, value: x.customerNum })) || []
          })
        })
      }
    } else {
      if (params == 'new') {
        getEchartMonthInfo(params).then(res => {
          const arr = res.reverse()
          this.setState({
            chartInfo: arr.map(x => ({ name: `${x.month.substr(4)}月`, value: x.customerNum })) || []
          })
        })
      } else if (params == 'follow') {
        getEchartMonthInfo(params).then(res => {
          const arr2 = res.reverse()
          this.setState({
            chartInfo2: arr2.map(x => ({ name: `${x.month.substr(4)}月`, value: x.customerNum })) || []
          })
        })
      } else {
        getEchartMonthInfo(params).then(res => {
          const arr3 = res.reverse()
          this.setState({
            chartInfo3: arr3.map(x => ({ name: `${x.month.substr(4)}月`, value: x.customerNum })) || []
          })
        })
      }
    }
    this.setState({
      checkedWhich: inx
    })

  }

  render() {

    const tabList = [{ title: '新增客户' }, { title: '跟进客户' }, { title: '到访客户' }]
    const dailyMonth = ['日', '月']
    const { sexInfo, chartInfo, chartInfo2, chartInfo3, checkedWhich, current, lineIds } = this.state

    return (
      <View>
        <AtTabs className="tab-bar" current={current} tabList={tabList} onClick={this.handleClick.bind(this)} swipeable={false}>
          <AtTabsPane current={current} index={0} >
            <View>
              <View style="height:40rpx;position: relative;margin-top:20rpx">
                <View className="daily-month" >
                  {
                    dailyMonth.map((item, index) => (
                      <View key={index + 'daily'} className={checkedWhich == index ? 'checked' : 'item'} onClick={this.changeDailyMonth.bind(this, index)}>
                        {item}
                      </View>))
                  }
                </View>
              </View>
              {
                chartInfo.length && current == 0 &&
                <LineChart source={chartInfo} />
              }
              {
                !chartInfo.length &&
                <View >
                  <Image style="width: 320rpx;height: 260rpx;margin: 60rpx auto 20rpx auto;display:block" src={nothing} />
                  <View style="text-align:center;color:#999;font-size:30rpx;margin-bottom:100rpx;">
                    暂无数据展示
                </View>
                </View>
              }
              {
                sexInfo.length &&
                <View>
                  <View style="height:20rpx;background:#f5f5f5;"> </View>
                  <View style="padding: 40rpx;">
                    <View style="font-size: 36rpx;color: #666;margin-bottom:20rpx;">性别</View>
                    {sexInfo.map((item, index) => (
                      <View key={index + 'sex1'} style="display: flex;align-items: center;"><View style="font-size: 32rpx;color: #666;min-width:80rpx">{item.genderType == 1 ? '男' : item.genderType == 2 ? '女' : '未知'}</View><AtProgress percent={(item.percentage * 100).toFixed(2)} strokeWidth={6} color={item.genderType == 1 ? '#BB9C79' : item.genderType == 2 ? '#F6B61D' : '#A2A2A2'} /></View>
                    ))
                    }
                  </View>
                </View>
              }
            </View>
          </AtTabsPane>
          <AtTabsPane current={current} index={1}>
            <View>
              <View style="height:40rpx;position: relative;margin-top:20rpx">
                <View className="daily-month" >
                  {
                    dailyMonth.map((item, index) => (
                      <View key={index + 'month'} className={checkedWhich == index ? 'checked' : 'item'} onClick={this.changeDailyMonth.bind(this, index)}>
                        {item}
                      </View>))
                  }
                </View>
              </View>
              {chartInfo2.length &&  current == 1 &&
                <LineChart source={chartInfo2} />
              }
              {
                !chartInfo2.length &&
                <View >
                  <Image style="width: 320rpx;height: 260rpx;margin: 60rpx auto 20rpx auto;display:block" src={nothing} />
                  <View style="text-align:center;color:#999;font-size:30rpx;margin-bottom:100rpx;">
                    暂无数据展示
                </View>
                </View>
              }
              {
                sexInfo.length &&
                <View>
                  <View style="height:20rpx;background:#f5f5f5;"> </View>
                  <View style="padding: 40rpx;">
                    <View style="font-size: 36rpx;color: #666;margin-bottom:20rpx;">性别</View>
                    {sexInfo.map((item, index) => (
                      <View key={index + 'sex2'} style="display: flex;align-items: center;"><View style="font-size: 32rpx;color: #666;min-width:80rpx">{item.genderType == 1 ? '男' : item.genderType == 2 ? '女' : '未知'}</View><AtProgress percent={(item.percentage * 100).toFixed(2)} strokeWidth={6} color={item.genderType == 1 ? '#BB9C79' : item.genderType == 2 ? '#F6B61D' : '#A2A2A2'} /></View>
                    ))
                    }
                  </View>
                </View>
              }
            </View>
          </AtTabsPane>
          <AtTabsPane current={current} index={2}>
            <View>
              <View style="height:40rpx;position: relative;margin-top:20rpx">
                <View className="daily-month" >
                  {
                    dailyMonth.map((item, index) => (
                      <View key={index + 'day'} className={checkedWhich == index ? 'checked' : 'item'} onClick={this.changeDailyMonth.bind(this, index)}>
                        {item}
                      </View>))
                  }
                </View>
              </View>
              {
                chartInfo3.length && current == 2 &&
                <LineChart source={chartInfo3} />
              }
              {
                !chartInfo3.length &&
                <View >
                  <Image style="width: 320rpx;height: 260rpx;margin: 60rpx auto 20rpx auto;display:block" src={nothing} />
                  <View style="text-align:center;color:#999;font-size:30rpx;margin-bottom:100rpx;">
                    暂无数据展示
                </View>
                </View>
              }
              {
                sexInfo.length &&
                <View>
                  <View style="height:20rpx;background:#f5f5f5;"> </View>
                  <View style="padding: 40rpx;">
                    <View style="font-size: 36rpx;color: #666;margin-bottom:20rpx;">性别</View>
                    {sexInfo.map((item, index) => (
                      <View key={index + 'sex3'} style="display: flex;align-items: center;"><View style="font-size: 32rpx;color: #666;min-width:80rpx">{item.genderType == 1 ? '男' : item.genderType == 2 ? '女' : '未知'}</View><AtProgress percent={(item.percentage * 100).toFixed(2)} strokeWidth={6} color={item.genderType == 1 ? '#BB9C79' : item.genderType == 2 ? '#F6B61D' : '#A2A2A2'} /></View>
                    ))
                    }
                  </View>
                </View>
              }
            </View>
          </AtTabsPane>
        </AtTabs>
      </View>
    )
  }
}