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

const barOption = {
  color: ['#08507b'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: (params) => `人次: ${params[0].data.totalReportNum || 0}`
  },
  grid: {
    containLabel: true,
    left: 0,
    top: 0,
    right: 60,
    bottom: 0,
  }, 
  yAxis: {
    type: 'category',
    axisLabel: {
      // rotate: 45,
      formatter: (value) => value.length > 10 ? value.substring(0, 10) + '...' : value,
      color: (value, index) => 'black'
    },
  },
  xAxis: {
    type: 'value',
  },
  dataZoom: [
    {
      type: 'slider',
      yAxisIndex: [0],
      start: 100,
      end: 80,
      // width: 10,
      // fillerColor: '#08507b',
      selectedDataBackground: {
        areaStyle: { color: '#08507b', },
        lineStyle: { color: '#08507b', width: 1 },
      }
    },
    {
      type: 'inside',
      yAxisIndex: [0],
      start: 100,
      end: 80
    }
  ],
  dataset: {
    dimensions: ['orgName', 'totalReportNum'],
    source: [],
  },
  series: [
    {
      type: 'bar',
    },
  ]
}

export default (props) => {
  const [loading, setLoading] = useState(false)
  const [list, setList] = useState([])

  const option = {
    ...barOption,
    dataset: {
      ...barOption.dataset,
      source: list
    },
    yAxis: {
      ...barOption.yAxis,
      axisLabel: {
        ...barOption.yAxis.axisLabel,
        color: value => list.filter(x => x.orgName === value)[0].totalReportNum ? 'black' : 'red'
      }
    }
  }
  
  const queryList = useCallback(() => {
    setLoading(true)

    getAllOrgPersonNum().then((res) => {
      setLoading(false)
      setList((res || []).reverse())
    }).catch(err => {
      setLoading(false)
    })
  }, [])
  
  useEffect(() => {
    queryList()
  }, [])

  return (
    <Card title='企业数据总览' loading={loading} bodyStyle={{height: 600}}>
      <Echart option={option} />
    </Card>
  )
}
