import React from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import { CellGroup, Cell, Popup } from '@antmjs/vantui';
import Card from '@/components/Card';
import Chart, { getLinearGradient } from '@/subpkg1/components/chart';
import DateRangePicker from '@/components/DateRangePicker';
import { getCurrentMonth, getCurrentWeek, getCurrentYear, getMonthStr, getDaysBetween, getDateStr } from '@/utils/date';
import { getIssueData } from '@/services/stat';

// 计算本周
const thisWeek = getCurrentWeek();
// 计算本月
const thisMonth = getCurrentMonth();
// 计算本年
const thisYear = getCurrentYear();

export default (props) => {

  const [show, setShow] = React.useState(false);
  const [showDt, setShowDt] = React.useState(false);
  const [stType, setStType] = React.useState(1);
  const [dtRange, setDtRange] = React.useState(thisWeek);
  const [option, setOption] = React.useState({});

  const valStr = React.useMemo(() => {
    if (!stType) {
      const d1 = getDateStr(dtRange[0])
      const d2 = getDateStr(dtRange[1])
      return `${d1}至${d2}`
    }

    return [
      '',
      '本周',
      '本月',
      '本年',
    ][stType];
  }, [stType, dtRange]);

  const onStatType = (typ) => {
    setShow(false);

    if (typ == 1) {
      setStType(typ);
      setDtRange(thisWeek);
    } else if (typ == 2) {
      setStType(typ);
      setDtRange(thisMonth);
    } else if (typ == 3) {
      setStType(typ);
      setDtRange(thisYear);
    } else {
      setShowDt(true);
    }
  }

  const onCancel = () => {
    setShow(false);
    setShowDt(false);
  }

  const onDtChange = (val) => {
    setShowDt(false);
    setStType(0);
    setDtRange(val);
  }

  React.useEffect(() => {
    const statType = !stType || stType < 3 ? 'issue_daily' : 'issue_monthly';
    const num = statType == 'issue_daily' ? getDaysBetween(dtRange[1], dtRange[0]) + 1 : 12;
    const startDate = statType == 'issue_daily' ? getDateStr(dtRange[0]) : getMonthStr(dtRange[0]);
    const endDate = statType == 'issue_daily' ? getDateStr(dtRange[1]) : getMonthStr(dtRange[1]);

    getIssueData({statType, startDate, endDate, num}).then((res) => {
      setOption({
        grid: {
          top: 6,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              rotate: 45,
            },
            data: res.map(x => x.name.length > 8 ? x.name.substring(5) : x.name)
          }
        ],
        yAxis: [
          {
            type: 'value',
            minInterval: 1
          }
        ],
        series: [
          {
            type: 'line',
            smooth: true,
            lineStyle: {
              width: 2
            },
            areaStyle: {
              opacity: 1,
              color: getLinearGradient(0, 0, 0, 1.1, [
                {
                  offset: 0,
                  color: '#0A9071'
                },
                {
                  offset: 1,
                  color: '#FFF'
                }
              ])
            },
            data: res.map(x => x.value)
          }
        ]
      });
    });
  }, [stType, dtRange]);
  
  return (
    <Card>
      <Cell title="上报统计" isLink value={valStr} onClick={() => setShow(true)} />
      <Chart option={option} style={{ height: '30vh'}} />
      <Popup position="bottom" show={show} onClose={() => setShow(false)}>
        <CellGroup>
          <Cell title="本周" onClick={() => onStatType(1)} />
          <Cell title="本月" onClick={() => onStatType(2)} />
          <Cell title="本年" onClick={() => onStatType(3)} />
          <Cell title="自定义" onClick={() => onStatType(0)} />
        </CellGroup>
      </Popup>
      <DateRangePicker
        type="date"
        show={showDt}
        onChange={onDtChange}
        onCancel={onCancel}
      />
    </Card>
  )
}
