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

<script>
import download from '@/common/services/download'
import components from './_import-components/sd-flow-countersign-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 timeEchartOption = {
  color: ['red'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: 'red',
      },
    },
  },
  title: {
    text: '会签时效统计',
    subtext: '会签时效统计',
    left: 'center',
  },
  toolbox: {
    feature: {
      saveAsImage: { show: true },
    },
  },
  legend: {
    left: 'left',
    data: ['会签时长(h)'],
  },
  grid: {
    bottom: '30%',
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisPointer: {
        type: 'shadow',
      },
      nameTextStyle: {
        width: '30px',
      },
      nameRotate: 50,
      axisLabel: {
        rotate: 45,
        interval: 0,
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        formatter: '{value}',
      },
    },
  ],
  series: [
    {
      name: '会签时长(h)',
      type: 'bar',
      barWidth: '60',
      data: [],
      queryId: '',
    },
  ],
}
const columns = [
  {
    title: '部门名称',
    dataIndex: 'OPERATOR_DEPT_NAME',
  },
  {
    title: '会签时长',
    dataIndex: 'SIGNTIME',
  },
]
export default {
  name: 'SdFlowCountersignStatistics',
  metaInfo: {
    title: '会签时效统计',
  },
  components,
  data() {
    return {
      expressions: [],
      columns,
      loading: false,
      listData: [], // 列表数据
      echartOption: timeEchartOption,
      startTime: '',
      endTime: '',
      isempty: false,
    }
  },
  created() {
    this.getSign()
  },
  methods: {
    getSign(expressions = []) {
      this.echartOption.xAxis[0].data = []
      this.echartOption.series[0].data = []
      const params = {
        columns: 'OPERATOR_DEPT_ID,SIGNTIME,OPERATOR_DEPT_NAME',
        maxResults: -1,
        startPosition: 0,
        expressions: expressions,
      }
      this.loading = true
      WorkbenchService.getFlowAgtinStatistics(params).then((data) => {
        this.listData = data.data
        this.loading = false
        data.data.forEach((element, index) => {
          if (index > 9) return
          this.echartOption.xAxis[0].data.push(element.OPERATOR_DEPT_NAME)
          this.echartOption.series[0].data.push(element.SIGNTIME)
        })
      })
      if (this.echartOption.series[0].data.length < 1) {
        this.isempty = true
      } else {
        this.isempty = false
      }
    },
    reset() {
      this.getSign()
    },
    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'
            expressions.name = 'operatorDeptId'
          } else if (i === 'startDate') {
            expressions.op = 'ge'
          } else if (i === 'endDate') {
            expressions.op = 'le'
          }
          expressions.longValue = data[i]
          expressionsArr.push(expressions)
        }
      }

      this.getSign(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'
            expressions.name = 'operatorDeptId'
          } 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.exportFlowSignExcel(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>
