<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 WorkbenchService from './workbench-service'
import components from './_import-components/sd-flow-expectionstatistics-import'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'

const echartOption = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)',
  },
  title: [
    {
      text: '流程统计异常TOP10',
      subtext: '流程统计',
      left: '50%',
      textAlign: 'center',
    },
  ],
  legend: {
    x: 'left',
    y: ' center',
    orient: 'vertical',
    data: [],
  },
  toolbox: {
    feature: {
      saveAsImage: { show: true },
    },
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      data: [],
    },
  ],
}
const columns = [
  {
    title: '流程名称',
    dataIndex: 'FLOWNAME',
  },
  {
    title: '办结数量',
    dataIndex: 'BJSL',
  },
  {
    title: '在办数量',
    dataIndex: 'ZBSL',
  },
  {
    title: '撤转数量',
    dataIndex: 'CZSL',
  },
  {
    title: '撤办数量',
    dataIndex: 'CBSL',
  },
  {
    title: '驳回数量',
    dataIndex: 'BHSL',
  },
  {
    title: '超时数量',
    dataIndex: 'CSSL',
  },
]
export default {
  name: 'SdFlowExpectionstatistics',
  metaInfo: {
    title: '流程异常统计',
  },
  components,
  data() {
    return {
      echartOption: echartOption,
      loading: false,
      listData: [], // 列表数据
      expressionsArr: [],
      columns: columns,
      queryId: '',
      isempty: false,
    }
  },
  created() {
    this.getExpection()
  },
  methods: {
    getExpection(
      expressions = [
        {
          dataType: 'long',
          name: 'CSSL',
          op: 'gt',
          longValue: -1,
        },
      ]
    ) {
      this.echartOption.legend.data = []
      this.echartOption.series[0].data = []
      const params = {
        columns: 'FLOWNAME,BJSL,ZBSL,CZSL,CBSL,BHSL,CSSL',
        maxResults: 100,
        startPosition: 0,
        orderBy: 'CSSL desc',
        expressions: expressions,
      }
      this.loading = true
      this.isempty = false
      WorkbenchService.getExpection(params).then((data) => {
        this.listData = data.data
        this.loading = false
        if (data.data.length === 0) {
          this.isempty = true
        }
        data.data.forEach((element, index) => {
          if (index < 10) {
            this.echartOption.legend.data.push(element.FLOWNAME)
            this.echartOption.series[0].data.push({ name: element.FLOWNAME, value: element.ZBSL })
          }
        })
      })
    },

    reset() {
      this.getExpection()
    },
    searchSubmit(data) {
      const expressionsArr = []
      for (var i in data) {
        const expressions = {}
        if (data[i]) {
          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)
        }
      }
      expressionsArr.push({
        dataType: 'long',
        name: 'CSSL',
        op: 'gt',
        longValue: -1,
      })
      this.getExpection(expressionsArr)
    },
    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.exportAbnormalExcel(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 *;
.search-wrap {
  margin-bottom: $padding-lg;
}
.statistics {
  .echart {
    width: 100%;
  }
}
.experotbuttonclass {
  float: right;
}
</style>
