miniapp/src/subpackages/pages/channel/partnerChannel/index.jsx

import React, { useState, useEffect, useRef } from 'react'
import withLayout from '@/layout'
import Taro from '@tarojs/taro'
import { ScrollView, Image } from '@tarojs/components'
import { BIZ_STATUS } from '@/constants/user'
import DateRangePicker from '@/components/DateRangePicker'
import Picker from '@/components/Picker'
import LineChat from './components/LineChat'
import useRank from './hooks/useRank'
import useReport from './hooks/useReport'
import useChart from './hooks/useChart'
// import '@/assets/css/iconfont.css'
import './index.scss'
import { fillTime, cutDays, cutMonths } from './utils'

const statTypeDicts = [
  {name: '按天', id: 'day'},
  {name: '按月', id: 'month'},
]
const custTypeDicts = [
  {name: '新增人员', id: 'new'},
  {name: '跟进', id: 'follow'},
  {name: '成交', id: 'success'},
]

export default withLayout((props) => {
  
  const [showPicker, setShowPicker] = useState(false)
  const pickerTrigger = useRef()
  const [,setRankDateRange, rankList] = useRank()
  const [,setReportDateRange, reportInfo] = useReport()
  const [
    statType,
    setStatType,
    custType,
    setCustType,
    chartData,
    xAxisDataRef,
  ] = useChart()

  const handleMore = () => {
    Taro.navigateTo({ url: '/pages/mine/myCustomer/index' })
  }

  const handleRankDate = () => {
    pickerTrigger.current = 'rank'
    setShowPicker(true)
  }

  const handleReportDate = () => {
    pickerTrigger.current = 'report'
    setShowPicker(true)
  }
  
  const handlePickerChange = (e) => {
    setShowPicker(false)

    if (pickerTrigger.current == 'rank') {
      setRankDateRange(e)
    } else {
      setReportDateRange(e)
    }
  }

  const SortChange = (e) => {
    setStatType(e)
    const num = e === 'month' ? 6 : 7
    const now = new Date()
    const startDate = e === 'month' ? cutMonths(now, num) : cutDays(now, num)
    setReportDateRange([fillTime(startDate.toJSON().substring(0, 10), true), fillTime(now.toJSON().substring(0, 10), false)])
  }

  const [tp1 = {}, tp2 = {}, tp3 = {}] = rankList||[]

  return (
    <view className='Page partnerChannel'>
      <DateRangePicker visable={showPicker} close={() => setShowPicker(false)} change={handlePickerChange} />
      <ScrollView scrollY>
        <view className='PageContent'>

          {/* 排行榜 */}
          <view className='Ranking'>
            <view className='Top flex-h'>
              <text className='flex-item'>龙虎榜</text>
              <Image mode='heightFix' src={require('@/assets/mine-icon23.png')} onClick={handleRankDate} />
            </view>
            <view className='List flex-h'>

              {/* 第二名 */}
              <view className='flex-item'>
                <Image mode='heightFix' src={require('@/assets/mine-icon21.png')}></Image>
                <view className='Icon'>
                  <Image mode='aspectFill' src={tp2.avatarurl} style={{width: '100%', height: '100%'}}></Image>
                </view>
                <view className='Index'>
                  <text>{tp2.name||'暂无'}</text>
                  <text>2</text>
                </view>
                <view className='Num'>
                  <text></text>
                  <text>{tp2.number ? `到访 ${tp2.number} 人` : '暂无'}</text>
                </view>
              </view>
              
              {/* 第一名 */}
              <view className='flex-item active' style={{zIndex:'1'}}>
                <Image mode='heightFix' src={require('@/assets/mine-icon20.png')}></Image>
                <view className='Icon'>
                  <Image mode='aspectFill' src={tp1.avatarurl} style={{width: '100%', height: '100%'}}></Image>
                </view>
                <view className='Index'>
                  <text>{tp1.name||'暂无'}</text>
                  <text>1</text>
                </view>
                <view className='Num'>
                  <text></text>
                  <text>{tp1.number ? `到访 ${tp1.number} 人` : '暂无'}</text>
                </view>
              </view>
              
              {/* 第三名 */}
              <view className='flex-item'>
                <Image mode='heightFix' src={require('@/assets/mine-icon22.png')}></Image>
                <view className='Icon'>
                  <Image mode='aspectFill' src={tp3.avatarurl} style={{width: '100%', height: '100%'}}></Image>
                </view>
                <view className='Index'>
                  <text>{tp3.name||'暂无'}</text>
                  <text>3</text>
                </view>
                <view className='Num'>
                  <text></text>
                  <text>{tp3.number ? `到访 ${tp3.number} 人` : '暂无'}</text>
                </view>
              </view>
              
            </view>
          </view>

          {/* 销售简报 */}
          <view className='SaleNews'>
            <view className='Top flex-h'>
              <text>销售简报</text>
              <Image mode='heightFix' src={require('@/assets/mine-icon23.png')} onClick={handleReportDate}></Image>
              <view className='flex-item'></view>
              <text onClick={handleMore}>更多</text>
              <text className='iconfont icon-jiantouright'></text>
            </view>
            <view className='List'>
              <view className='flex-h'>
                <text className='flex-item'>新增客户</text>
                <text>{`${reportInfo.newCustomerNum||0}人`}</text>
                {/* <text className='iconfont icon-jiantouright'></text> */}
              </view>
              <view className='flex-h'>
                <text className='flex-item'>跟进客户</text>
                <text>{`${reportInfo.followCustomerNum||0}人`}</text>
                {/* <text className='iconfont icon-jiantouright'></text> */}
              </view>
              <view className='flex-h'>
                <text className='flex-item'>成交客户</text>
                <text>{`${reportInfo.successCustomerNum||0}人`}</text>
                {/* <text className='iconfont icon-jiantouright'></text> */}
              </view>
            </view>
          </view>

          {/* 销售趋势 */}
          <view className='SaleLineChart'>
            <view className='Top flex-h'>
              <text>销售趋势</text>
              <view className='flex-item'></view>
              <view className='Type'>
                <Picker kv={['name', 'id']} dicts={custTypeDicts} value={custType} onChange={setCustType} />
                <text className='iconfont icon-sanjiaoxingdown'></text>
              </view>
              <view className='Sort'>
                <Picker kv={['name', 'id']} dicts={statTypeDicts} value={statType} onChange={SortChange} />
                <text className='iconfont icon-sanjiaoxingdown'></text>
              </view>
            </view>
            <view className='LineChart'>
              <LineChat xAxisDataRef={xAxisDataRef} dataSource={chartData} />
            </view>
          </view>

        </view>
      </ScrollView>
    </view>
  )
})