import { useEffect, useState, useCallback } from 'react';
import Echart from '@/components/echart/echart'
import { Card } from 'antd'
import {getApplyDaily} from '@/services/statis'
import moment from 'moment';

const lineOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    },
  },

  grid: {
    containLabel: true,
    left: 0,
    top: 8,
    right: 60,
    bottom: 0,
  },
  yAxis: {
    type: 'value',
  },

  xAxis: {
    type: 'category',
  },

  dataset: [
    {
      dimensions: ['date', 'value'],
      source: [],
    },
  ],
  series: [
    {
      type: 'line',
      name: '申请数',
      datasetIndex: 0,
      itemStyle: {
        normal: {
          color: "#08507b",
          lineStyle: {
            color: "#08507b"
          }
        }
      }
    },
  ]
}
export default (props) => {
  const [loading, setLoading] = useState(false)
  const [list, setList] = useState([])

  const option = {
    ...lineOption,
    dataset: {
      ...lineOption.dataset,
      source: list
    }
  }

  const queryList = useCallback(() => {
    setLoading(true)
    getApplyDaily({
      days: 10,
      startDate: moment().subtract(10, 'day').format('YYYY-MM-DD'),
    }).then((res) => {
      setLoading(false)
      setList(res)
    }).catch(err => {
      setLoading(false)
    })
  }, [])

  useEffect(() => {
    queryList()
  }, [])

  return (
    <Card title='近期提交趋势统计' loading={loading} bodyStyle={{ height: 616 }}>
      <Echart option={option} />
    </Card>
  )
}