import Taro, { Component } from '@tarojs/taro';
import Authorize from '@components/authorize'
import { View } from "@tarojs/components";
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";


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

  config = {
    navigationBarTitleText: ''
  }

  state = {
    current: 0,
    recordId: undefined, // 埋点ID
    sexInfo: [],
    checkedWhich: 0,
    chartInfo: [
      // { name: '周一', value: '26' },
      // { name: '周二', value: '84' },
      // { name: '周三', value: '107' },
      // { name: '周四', value: '93' },
      // { name: '周五', value: '127' },
      // { name: '周六', value: '64' },
      // { name: '周日', value: '94' },
    ]
  }

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

  handleClick(value) {
    if (value == '0') {
      querySexInfo('new').then(res => {
        this.setState({
          sexInfo: res || []
        })
      })
    } else if (value == '1') {
      querySexInfo('follow').then(res => {
        this.setState({
          sexInfo: res || []
        })
      })
    } else {
      querySexInfo('visite ').then(res => {
        this.setState({
          sexInfo: res || []
        })
      })
    }

    this.setState({
      current: value
    })

  }

  componentDidMount() {
    querySexInfo('new').then(res => {
      this.setState({
        sexInfo: res || []
      })
    })
    getEchartDailyInfo('new').then(res => {
      let arr = []
      res.map((item, index) => {
        arr.push({ value: item.customerNum, name: item.day })
      })
      console.log(arr, "88888888888888888888888888888888888")
      this.setState({
        chartInfo: arr || []
      })
    })
  }
  changeDailyMonth(inx) {
    const { current } = this.state
    const params = current == 0 ? 'new' : current == 1 ? 'follow' : 'visite'
    if (inx == 0) {
      getEchartDailyInfo(params).then(res => {


        let arr = []
        res.map((item, index) => {
          arr.push({ value: item.customerNum, name: item.day })
        })
        console.log(arr, "88888888888888888888888888888888888")
        this.setState({
          chartInfo: arr || []
        })
      })
    } else {
      getEchartMonthInfo(params).then(res => {

        this.setState({
        })
      })
    }
    this.setState({
      checkedWhich: inx
    })

  }

  render() {

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

    return (
      <View>
        <AtTabs className="tab-bar" current={current} tabList={tabList} onClick={this.handleClick.bind(this)}>
          <AtTabsPane current={current} index={0} >
            <View>
              <View style="height:'40rpx;position: relative;">
                <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>
              <View style="width:100vw;height:530rpx">
                <LineChart source={chartInfo} />
              </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>
          </AtTabsPane>
          <AtTabsPane current={current} index={1}>
            <View>
              <View style="height:'40rpx;position: relative;">
                <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>
              <View style="width:100vw;height:520rpx">
                <LineChart source={chartInfo} />
              </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>
          </AtTabsPane>
          <AtTabsPane current={current} index={2}>
            <View>
              <View style="height:'40rpx;position: relative;">
                <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>
              <View style="width:100vw;height:520rpx">
                <LineChart source={chartInfo} />
              </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>
          </AtTabsPane>
        </AtTabs>
      </View>
    )
  }
}