<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"
        :row-key="FLOWNAME"
        :pagination="true"
        :loading="loading"
      />
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import download from '@/common/services/download'
import components from './_import-components/sd-flow-timestatistics-import'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/title'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/grid'
import WorkbenchService from './workbench-service'
const echartOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999',
      },
    },
  },
  title: [
    {
      text: '流程时效统计',
      subtext: '流程时效统计',
      left: '60%',
      textAlign: 'center',
    },
  ],
  grid: {
    bottom: '25%',
  },
  toolbox: {
    feature: {
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { title: '刷新', show: true },
      saveAsImage: { show: true },
    },
  },
  legend: {
    x: 'left',
    y: ' center',
    data: ['在办数量', '办结数量', '平均办理时间(h)'],
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisPointer: {
        type: 'shadow',
      },
      axisLabel: {
        rotate: 40,
        interval: 0,
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      name: '流程数量',
      axisLabel: {
        formatter: '{value}',
      },
    },
    {
      type: 'value',
      name: '办理时长',
      axisLabel: {
        formatter: '{value}',
      },
    },
  ],
  series: [
    {
      name: '在办数量',
      type: 'bar',
      itemStyle: {
        normal: {
          color: 'red',
        },
      },
      data: [],
    },
    {
      name: '办结数量',
      type: 'bar',
      itemStyle: {
        normal: {
          color: '#42463e',
        },
      },
      data: [],
    },
    {
      name: '平均办理时间(h)',
      type: 'line',
      yAxisIndex: 1,
      data: [],
    },
  ],
}
const columns = [
  {
    title: '流程名称',
    dataIndex: 'FLOWNAME',
  },

  {
    title: '办结数量',
    dataIndex: 'BJSL',
  },
  {
    title: '在办数量',
    dataIndex: 'ZBSL',
  },
  {
    title: '最长时长(h)',
    dataIndex: 'MAX_PROCESS_TIME',
    customRender: (text, record, index) => {
      if (text === null || text === '') {
        return '-  -'
      } else {
        const timeReslt = (text % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
        return timeReslt.toFixed(2)
      }
    },
  },
  {
    title: '最短时长(h)',
    dataIndex: 'MIN_PROCESS_TIME',
    customRender: (text, record, index) => {
      if (text === null || text === '') {
        return '-  -'
      } else {
        const timeReslt = (text % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
        return timeReslt.toFixed(2)
      }
    },
  },
  {
    title: '平均时长(h)',
    dataIndex: 'AVG_PROCESS_TIME',
    customRender: (text, record, index) => {
      if (text === null || text === '') {
        return '-  -'
      } else {
        return text.toFixed(2)
      }
    },
  },
]
export default {
  name: 'SdFlowTimestatistics',
  metaInfo: {
    title: '流程时效统计',
  },
  components,
  data() {
    return {
      expressions: [],
      loading: false,
      columns,
      listData: [], // 列表数据
      echartOption: echartOption,
      pickerdata: {
        isopen: false, // 为定义的日历弹出的状态 false表示隐藏
        Year: null, // 用于接收年
        createValue: null,
      },
      pickerenddata: {
        endYear: null, // 用于接收年
        endValue: null,
      },
      visible: false,
      expressionsArr: [],
      form: {
        deptName: [],
      },
      queryId: '',
    }
  },
  created() {
    this.getFlowSign()
  },
  methods: {
    moment,
    getFlowSign(expressions = []) {
      this.echartOption.series[0].data = []
      this.echartOption.series[1].data = []
      this.echartOption.series[2].data = []
      this.echartOption.xAxis[0].data = []
      const params = {
        columns: 'FLOWID,FLOWNAME,BJSL,ZBSL,MAX_PROCESS_TIME,MIN_PROCESS_TIME,AVG_PROCESS_TIME',
        maxResults: -1,
        startPosition: 0,
        expressions: expressions,
      }
      this.loading = true
      WorkbenchService.getFlowSignStatistics(params).then((data) => {
        this.loading = false
        this.listData = data.data
        data.data.forEach((element, index) => {
          if (index > 9) return
          this.echartOption.series[0].data.push(element.ZBSL)
          this.echartOption.series[1].data.push(element.BJSL)
          this.echartOption.xAxis[0].data.push(element.FLOWNAME)
          if (element.AVG_PROCESS_TIME === null) {
            this.echartOption.series[2].data.push(0)
          } else {
            this.echartOption.series[2].data.push(element.AVG_PROCESS_TIME.toFixed(2))
          }
        })
      })
    },
    searchSubmit(data) {
      const expressionsArr = []
      for (var i in data) {
        const expressions = {}
        if (data[i] !== 0) {
          expressions.dataType = 'long'
          expressions.name = i
          if (i === 'belongOrgId') {
            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.getFlowSign(expressionsArr)
    },
    reset(data) {
      this.getFlowSign()
    },
    exportExcel(data) {
      const expressionsArr = []
      for (var i in data) {
        const expressions = {}
        if (data[i] !== 0) {
          expressions.dataType = 'long'
          expressions.name = i
          if (i === 'belongOrgId') {
            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.exportFlowAgingExcel(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;
}
.experotbuttonclass {
  float: right;
}
.spanclass {
  padding-left: 2%;
}
</style>
