import AtCalendar from '@/components/calendar'
import Cell from '@/components/cell'
import Divider from '@/components/Divider'
import DropDownItem, { DropDownOptions } from '@/components/dropDown-item'
import Iconfont from '@/components/iconfont/iconfont'
import LayoutBlock from '@/components/layoutBlock'
import SelectMarketingDepartment from '@/components/SelectMarketingDepartment'
import SelectSaleRankingIndicators from '@/components/SelectSaleRankingIndicators'
import SelectSaleType from '@/components/SelectSaleType'
import SelectTimePicker, { ChangedValue } from '@/components/SelectTimePicker'
import Table from '@/components/table'
import TimePicker from '@/components/timePicker'
import ToolTip from '@/components/toolTips'
import { View, Text } from '@tarojs/components'
import classnames from 'classnames'
import dayjs from 'dayjs'
import { useState } from 'react'
import styles from './index.module.scss'

const saleStatistic = () => {
  const onChangeTimePicker = (value: ChangedValue) => {
    console.log(value)
  }
  const onChangeSaleType = (saleType: number) => {
    console.log('saleType', saleType)
  }
  const onChangeDepartment = (department: number) => {
    console.log('department', department)
  }

  const onChangeIndicators = (indicators: number) => {
    console.log('indicators', indicators)
  }

  //需要传进来的数据示例
  const exampledataSource = [
    {
      key: '1',
      username: '小红',
      count: '123打发手动阀手动阀啊手动阀',
      gb: '321',
      dbd: '¥6634.93w',
    },
    {
      key: '2',
      username: '小红',
      count: '123',
      gb: '321',
      dbd: '¥6634.93w',
    },
    {
      key: '3',
      username: '小红',
      count: '123',
      gb: '321',
      dbd: '¥6634.93w',
    },
    {
      key: '4',
      username: '小红',
      count: '123',
      gb: '321',
      dbd: '¥6634.93w',
    },
    {
      key: '5',
      username: '小红',
      count: '123',
      gb: '321',
      dbd: '¥6634.93w',
    },
    {
      key: '6',
      username: '小红',
      count: '123',
      gb: '321',
      dbd: '¥6634.93w',
    },
    {
      key: '7',
      username: '小红',
      count: '123',
      gb: '321',
      dbd: '¥6634.93w',
    },
    {
      key: '8',
      username: '小红',
      count: '123',
      gb: '321',
      dbd: '¥6634.93w',
    },
    {
      key: '9',
      username: '小红',
      count: '123',
      gb: '321',
      dbd: '¥6634.93w',
    },
    {
      key: '10',
      username: '小红',
      count: '123',
      gb: '321',
      dbd: '¥6634.93w',
    },
  ]

  //需要传进来的表头数据示例
  const examplecolumns = [
    {
      key: 'username',
      title: '编号',
      dataIndex: 'username',
      width: '20%',
    },
    {
      key: 'count',
      title: '面料名称',
      dataIndex: 'count',
      width: '20%',
      ellipsis: {
        isEllipsis: true,
        rows: 2,
      },
    },
    {
      key: 'gb',
      title: '匹数',
      dataIndex: 'gb',
      width: '30%',
    },
    {
      key: 'dbd',
      title: '交易金额',
      dataIndex: 'dbd',
      width: '30%',
      render: (text: string) => <Text className={styles.amount}>{text}</Text>,
    },
  ]

  const tabsConfig = [
    {
      name: '面料',
      key: 0,
    },
    {
      name: '客户',
      key: 1,
    },
    {
      name: '业务员',
      key: 2,
    },
  ]

  const [currentKey, setCurrentKey] = useState(tabsConfig[0].key)

  const handleClickTab = event => {
    const key = event.target.dataset.key
    if (key === currentKey) return
    setCurrentKey(key)
  }

  return (
    <View className={styles.saleStatistic}>
      {/* <View style={{background: 'red', width: '100%', height: '200px'}}></View> */}
      <View className={styles['saleStatistic--filterBar']}>
        <SelectSaleType onChange={onChangeSaleType}></SelectSaleType>
        <SelectMarketingDepartment onChange={onChangeDepartment}></SelectMarketingDepartment>
        <SelectTimePicker onChange={onChangeTimePicker}></SelectTimePicker>
      </View>
      <View className={styles['saleStatistic--content']}>
        <LayoutBlock circle flexDirection='col'>
          <View className='flex-row items-center'>
            <Iconfont name='icon-guanlidingdan' size={32}></Iconfont>
            <Text className={styles.title}>订单</Text>
          </View>
          <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
          <View className={styles.totalSummary}>
            <ToolTip placement='top' content='请填入提示信息'>
              <View className='flex-row items-center'>
                <Text className={styles['totalSummary--title']}>订单总数</Text>
                <Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
              </View>
            </ToolTip>
            <View className={styles['totalSummary--current']}>3425</View>
            <View className={styles['totalSummary--totalNum']}>（共432423匹）</View>
          </View>
          <Cell
            title={
              <View className='flex-row items-center'>
                <Text className={styles.title}>待配布订单</Text>
                <Iconfont name='icon-tishi' size={36}></Iconfont>
              </View>
            }
            desc={'323'}
            customClassName={styles['cell-desc']}></Cell>
          <Cell
            title={
              <View className='flex-row items-center'>
                <Text className={styles.title}>已配布订单</Text>
                <Iconfont name='icon-tishi' size={36}></Iconfont>
              </View>
            }
            desc={'2972'}
            customClassName={styles['cell-desc']}></Cell>
        </LayoutBlock>
        <LayoutBlock circle flexDirection='col'>
          <View className='flex-row items-center'>
            <Iconfont name='icon-guanlidingdan' size={32}></Iconfont>
            <Text className={styles.title}>配布</Text>
          </View>
          <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
          <View className={styles.totalSummary}>
            <View className='flex-row items-center'>
              <Text className={styles['totalSummary--title']}>已配布匹数</Text>
              <Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
            </View>
            <View className={styles['totalSummary--current']}>3425</View>
            <View className={styles['totalSummary--totalNum']}>（共计 ¥231.23w）</View>
          </View>
          <Cell
            title={
              <View className='flex-row items-center'>
                <Text className={styles.title}>待收款单数</Text>
                <Iconfont name='icon-tishi' size={36}></Iconfont>
              </View>
            }
            desc={'323'}
            customClassName={styles['cell-desc']}></Cell>
          <Cell
            title={
              <View className='flex-row items-center'>
                <Text className={styles.title}>待收款匹数</Text>
                <Iconfont name='icon-tishi' size={36}></Iconfont>
              </View>
            }
            desc={'2972'}
            customClassName={styles['cell-desc']}></Cell>
          <Cell
            title={
              <View className='flex-row items-center'>
                <Text className={styles.title}>待收款金额</Text>
                <Iconfont name='icon-tishi' size={36}></Iconfont>
              </View>
            }
            desc={'2972'}
            customClassName={styles['cell-desc']}></Cell>
          <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
          <Cell
            title={
              <View className='flex-row items-center'>
                <Text className={styles.title}>待发货单数</Text>
                <Iconfont name='icon-tishi' size={36}></Iconfont>
              </View>
            }
            desc={'323'}
            customClassName={styles['cell-desc']}></Cell>
          <Cell
            title={
              <View className='flex-row items-center'>
                <Text className={styles.title}>待发货匹数</Text>
                <Iconfont name='icon-tishi' size={36}></Iconfont>
              </View>
            }
            desc={'2972'}
            customClassName={styles['cell-desc']}></Cell>
          <Cell
            title={
              <View className='flex-row items-center'>
                <Text className={styles.title}>待发货金额</Text>
                <Iconfont name='icon-tishi' size={36}></Iconfont>
              </View>
            }
            desc={'2972'}
            customClassName={styles['cell-desc']}></Cell>
          <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
          <Cell
            title={
              <View className='flex-row items-center'>
                <Text className={styles.title}>已发货单数</Text>
                <Iconfont name='icon-tishi' size={36}></Iconfont>
              </View>
            }
            desc={'2972'}
            customClassName={styles['cell-desc']}></Cell>
          <Cell
            title={
              <View className='flex-row items-center'>
                <Text className={styles.title}>已发货匹数</Text>
                <Iconfont name='icon-tishi' size={36}></Iconfont>
              </View>
            }
            desc={'2972'}
            customClassName={styles['cell-desc']}></Cell>
          <Cell
            title={
              <View className='flex-row items-center'>
                <Text className={styles.title}>已发货金额</Text>
                <Iconfont name='icon-tishi' size={36}></Iconfont>
              </View>
            }
            desc={'2972'}
            customClassName={styles['cell-desc']}></Cell>
        </LayoutBlock>
        <LayoutBlock circle flexDirection='col'>
          <View className='flex-row items-center'>
            <Iconfont name='icon-daikuan' size={32}></Iconfont>
            <Text className={styles.title}>货款</Text>
          </View>
          <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
          <View className={styles.totalSummary}>
            <View className='flex-row items-center'>
              <Text className={styles['totalSummary--title']}>货款金额</Text>
              <Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
            </View>
            <View className={styles['totalSummary--current']}>56133.32</View>
          </View>
          <Cell
            title={
              <View className='flex-row items-center'>
                <Text className={styles.title}>未收金额</Text>
                <Iconfont name='icon-tishi' size={36}></Iconfont>
              </View>
            }
            desc={'2972'}
            customClassName={styles['cell-desc']}></Cell>
          <Cell
            title={
              <View className='flex-row items-center'>
                <Text className={styles.title}>已收金额</Text>
                <Iconfont name='icon-tishi' size={36}></Iconfont>
              </View>
            }
            desc={'2972'}
            customClassName={styles['cell-desc']}></Cell>
        </LayoutBlock>
        <LayoutBlock circle flexDirection='col'>
          <View className='flex-row items-center'>
            <Iconfont name='icon-tuikuan' size={32}></Iconfont>
            <Text className={styles.title}>退货</Text>
          </View>
          <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
          <View className={styles.totalSummary}>
            <View className='flex-row items-center'>
              <Text className={styles['totalSummary--title']}>退货单数</Text>
              <Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
            </View>
            <View className={styles['totalSummary--current']}>42</View>
          </View>
          <Cell
            title={
              <View className='flex-row items-center'>
                <Text className={styles.title}>退货匹数</Text>
                <Iconfont name='icon-tishi' size={36}></Iconfont>
              </View>
            }
            desc={'2972'}
            customClassName={styles['cell-desc']}></Cell>
          <Cell
            title={
              <View className='flex-row items-center'>
                <Text className={styles.title}>退货金额</Text>
                <Iconfont name='icon-tishi' size={36}></Iconfont>
              </View>
            }
            desc={'2972'}
            customClassName={styles['cell-desc']}></Cell>
        </LayoutBlock>
        {/* 销售排行 */}
        <LayoutBlock circle flexDirection='col' customStyle={{ padding: 0 }}>
          <View className={classnames(styles.rankingIndicatorTitle, 'flex-row justify-between')} style={{ position: 'relative' }}>
            <View className='flex-row items-center'>
              <Iconfont name='icon-paiming' size={32}></Iconfont>
              <Text className={styles.title}>销售排行</Text>
            </View>
            <View style={{ width: '90px' }}>
              <SelectSaleRankingIndicators onChange={onChangeIndicators}></SelectSaleRankingIndicators>
            </View>
          </View>
          <View style={{ padding: '0 32rpx' }}>
            <Divider direction='horizontal' customStyles={{ margin: '10rpx 0 30rpx 0' }}></Divider>
            <View className={styles.rankingTabs} onClick={handleClickTab}>
              {tabsConfig.map(item => {
                return (
                  <View data-key={item.key} className={classnames(styles.rankingTab, item.key === currentKey ? styles.active : '')} key={item.key}>
                    {item.name}
                  </View>
                )
              })}
            </View>
            <Table columns={examplecolumns} dataSource={exampledataSource}></Table>
          </View>
        </LayoutBlock>
      </View>
    </View>
  )
}

export default saleStatistic