<template>
  <div :class="$style.statistics">
    <a-card :class="$style.searchWrap">
      <sd-flowflter-tongji
        @search-submit="searchSubmit"
        @export-data="exportExcel"
        @reset-data="reset"
      />
    </a-card>
    <a-card>
      <sd-echart
        v-if="echartOption.series[0].data.length > 0"
        :options="echartOption"
        :class="$style.echart"
        autoresize
      />
      <sd-flow-empty :options="echartOption" />
      <a-table
        :columns="columns"
        :data-source="listData"
        size="middle"
        :pagination="true"
        :loading="loading"
      />
    </a-card>
  </div>
</template>

<script>
import download from '@/common/services/download'
import components from './_import-components/sd-flow-statistics-import'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import WorkbenchService from './workbench-service'
const echartOption = {
  color: ['#1890FF', '#fa8c16'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999',
      },
    },
  },
  title: [
    {
      text: '流程数量统计',
      subtext: '流程数量统计',
      left: '50%',
      textAlign: 'center',
    },
  ],
  legend: {
    x: 'left',
    y: ' center',
    data: ['办理中（件数）', '已办结（件数）'],
  },
  grid: {
    bottom: '25%',
  },
  toolbox: {
    feature: {
      saveAsImage: { show: true },
    },
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisPointer: {
        type: 'shadow',
      },
      nameTextStyle: {
        width: '30px',
      },
      nameRotate: 50,
      axisLabel: {
        rotate: 40,
        interval: 0,
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        formatter: '{value}',
      },
      nameTextStyle: {
        fontSize: 8,
      },
    },
  ],
  series: [
    {
      name: '办理中（件数）',
      type: 'bar',
      data: [],
    },
    {
      name: '已办结（件数）',
      type: 'bar',
      data: [],
    },
  ],
}
const columns = [
  {
    title: '流程名称',
    dataIndex: 'FLOWNAME',
  },

  {
    title: '发起数量',
    dataIndex: 'FQSL',
  },
  {
    title: '在办数量',
    dataIndex: 'ZBSL',
  },
  {
    title: '办结数量',
    dataIndex: 'BJSL',
  },
]
export default {
  name: 'SdFlowStatistics',
  metaInfo: {
    title: '流程数量统计',
  },
  components,
  data() {
    return {
      expressions: [],
      loading: false,
      listData: [], // 列表数据
      echartOption: echartOption,
      expressionsArr: [],
      columns: columns,
      queryId: '',
    }
  },
  created() {
    this.getFlowStatistics()
  },
  methods: {
    getFlowStatistics(expressions = []) {
      this.echartOption.xAxis[0].data = []
      this.echartOption.series[0].data = []
      this.echartOption.series[1].data = []
      const params = {
        columns: 'FLOWID,FLOWNAME,FQSL,ZBSL,ZBSL,BJSL',
        maxResults: -1,
        startPosition: 0,
        expressions: expressions,
      }
      this.loading = true

      WorkbenchService.getFlowStatistics(params).then((data) => {
        this.loading = false
        this.listData = data.data
        this.listData.forEach((item, index) => {
          if (index > 9) return
          this.echartOption.xAxis[0].data.push(item.FLOWNAME)
          this.echartOption.series[0].data.push(item.ZBSL)
          this.echartOption.series[1].data.push(item.BJSL)
        })
      })
    },
    reset() {
      this.getFlowStatistics([])
    },
    searchSubmit(data) {
      const expressionsArr = []
      for (var i in data) {
        const expressions = {}
        if (data[i] !== 0) {
          expressions.dataType = 'long'
          expressions.name = i
          if (i === 'deptId') {
            expressions.op = 'eq'
          } else if (i === 'startDate') {
            expressions.op = 'ge'
          } else if (i === 'endDate') {
            expressions.op = 'le'
          }
          expressions.longValue = data[i]
          expressionsArr.push(expressions)
        }
      }

      this.getFlowStatistics(expressionsArr)
    },
    exportExcel(data) {
      const expressionsArr = []

      for (var i in data) {
        const expressions = {}
        if (data[i] !== 0) {
          expressions.dataType = 'long'
          expressions.name = i
          if (i === 'deptId') {
            expressions.op = 'eq'
          } else if (i === 'startDate') {
            expressions.op = 'ge'
          } else if (i === 'endDate') {
            expressions.op = 'le'
          }
          expressions.longValue = data[i]
          expressionsArr.push(expressions)
        }
      }
      const params = {
        maxResults: -1,
        startPosition: 0,
        expressions: expressionsArr,
      }
      // 点击导出操作
      WorkbenchService.exportFlowCountExcel(params).then((res) => {
        this.queryId = res.id
        const queryParams = {}
        queryParams.pathInfo = '/formfile/tmp/' + this.queryId + '.xls'
        WorkbenchService.exportExcel(queryParams).then((data) => {
          const url = URL.createObjectURL(data)
          const fname = res.name
          download(url, fname)
        })
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.statistics {
  .echart {
    width: 100%;
  }
}
.search-wrap {
  margin-bottom: $padding-lg;
}
</style>
