import { useState, useEffect } from 'react'
import withLayout from '@/layout'
import '@/assets/css/iconfont.css'
import { ScrollView } from '@tarojs/components'
import { useSelector } from 'react-redux'
import { fetch } from '@/utils/request'
import { API_SEX_INFO, API_ECHERTS_DAILY } from '@/constants/api'
import LineChart from './components/LineChart'
// import dayjs from 'dayjs'
import './index.scss'

export default withLayout((props) => {
  const { person } = props
  const PersonId = person.personId

  const [MenuList] = useState([
    { name: '新增客户', id: 1 },
    { name: '跟进客户', id: 2 },
    { name: '到访客户', id: 3 }
  ])
  const [CurrentMenuId, setCurrentMenuId] = useState(1)

  const [ChartMenuList] = useState([
    { name: '日', id: 1 },
    { name: '月', id: 2 }
  ])
  const [CurrentChartMenuId, setCurrentChartMenuId] = useState(1)

  const [ChartList, setChartList] = useState([])
  const [SexList, setSexList] = useState([])

  const [dimensions, setDimensions] = useState(['day', 'customerNum'])
  const [source, setSource] = useState([])

  useEffect(() => {
    setChartList([])
    GetSexInfo()
  }, [CurrentMenuId])

  useEffect(() => {
    if(!ChartList.length) {
      GetChartInfo()
    } else {
      // const chart = echarts.init(canvas, null, { width: '100%', height: '100%' })
      // canvas.setChart(chart)
    }
  }, [ChartList])

  const GetSexInfo = () => {
    fetch({ url: `${API_SEX_INFO}/${CurrentMenuId === 1 ? 'new' : CurrentMenuId === 2 ? 'follow' : 'visite'}`, method: 'get' }).then((res) => {
      const SexRes = (res || []).map((item) => {
        return { name: item.genderType == 1 ? '男' : item.genderType == 2 ? '女' : '未知', per: item.percentage }
      })
      setSexList(SexRes.length ? SexRes : [
        { name: '男', per: 0 },
        { name: '女', per: 0 },
        { name: '未知', per: 0 }
      ])
    })
  }

  const GetChartInfo = () => {
    fetch({ url: `${API_ECHERTS_DAILY}/${CurrentMenuId === 1 ? 'new' : CurrentMenuId === 2 ? 'follow' : 'visite'}`, method: 'get' }).then((res) => {
      const Arr = (res || []).reverse()
      setChartList(Arr.map(x => ({ name: x.day, value: x.customerNum })))
      setSource(Arr)
    })
  }

  const CutMenu = (item) => {
    return () => {
      setCurrentMenuId(item.id)
    }
  }

  const CutChartMenu = (item) => {
    return () => {
      setCurrentChartMenuId(item.id)
    }
  }

  // const createLineOptions = (source = []) => {
  //   const colorWithOpacity = op => `rgba(187,156,121, ${op})`

  //   const defaultOpt = {
  //     color: [colorWithOpacity(1)],
  //     xAxis: {
  //       type: 'category',
  //       boundaryGap: false,
  //       axisLabel: {
  //         textStyle: {
  //           color: '#666'
  //         }
  //       }

  //     },
  //     yAxis: {
  //       type: 'value',
  //       axisLabel: {
  //         textStyle: {
  //           color: '#666'
  //         }
  //       }
  //     },
  //     grid: {
  //       left: '10%',
  //       right: '8%',
  //       bottom: '12%',
  //       top: '15%',
  //     },
  //     series: [],
  //   }
  //   // 数据展示只展示 5 个
  //   const endValue = source.length - 1 > 0 ? source.length - 1 : 0
  //   const startValue = endValue - 5 > 0 ? endValue - 5 : 0

  //   return {
  //     ...defaultOpt,
  //     dataset: { source },
  //     dataZoom: [{
  //       type: 'inside',
  //       startValue, endValue,
  //       show: true,
  //     }],
  //     series: [{
  //       type: 'line',
  //       dimensions: ['name', 'value'],
  //       symbolSize: 6,
  //       smooth: true,
  //       label: {
  //         show: true,
  //         formatter: '{@value}人'
  //       },
  //       lineStyle: {
  //         shadowColor: colorWithOpacity(0.5),
  //         shadowBlur: 5,
  //         shadowOffsetY: 7
  //       },
  //       areaStyle: {
  //         color: {
  //           type: 'linear',
  //           x: 0,
  //           y: 0,
  //           x2: 0,
  //           y2: 1,
  //           colorStops: [{
  //             offset: 0, color: colorWithOpacity(0.2) // 0% 处的颜色
  //           }, {
  //             offset: 1, color: colorWithOpacity(0) // 100% 处的颜色
  //           }],
  //           global: false,
  //         }
  //       },
  //     }],
  //   }
  // }

  return (
    <view className='Page customerAnalyse flex-v'>

      <view className='MenuList'>
        <view>
          {
            MenuList.map((item, index) => (
              <text key={`MenuItem-${index}`} className={CurrentMenuId === item.id ? 'active' : ''} onClick={CutMenu(item)}>{item.name}</text>
            ))
          }
        </view>
      </view>

      <view className='flex-item'>
        <view>
          <ScrollView scroll-y refresher-enabled={false}>
            <view className='PageContent'>

              {/* 图表 */}
              <view className='Chart'>
                <view className='Menu'>
                  {
                    ChartMenuList.map((item, index) => (
                      <text key={`ChartMenuItem-${index}`} className={CurrentChartMenuId === item.id ? 'active' : ''} onClick={CutChartMenu(item)}>{item.name}</text>
                    ))
                  }
                </view>
                <view className='LineChart'>
                  <LineChart dimensions={dimensions} source={source} />
                </view>
              </view>

              {/* 性别 */}
              <view className='Sex'>
                <text>性别</text>
                {
                  SexList.map((item, index) => (
                    <view className='flex-h' key={`SexItem-${index}`}>
                      <text>{item.name}</text>
                      <view className='flex-item'>
                        <view style={{ width: `${Math.floor(item.per * 100)}%` }}></view>
                      </view>
                      <text>{Math.floor(item.per * 100)}%</text>
                    </view>
                  ))
                }
              </view>

            </view>
          </ScrollView>
        </view>
      </view>

    </view>
  )
})
