<template>
  <a-layout id="components-layout-demo-top" :class="$style.layout">
    <a-layout-content :class="$style.layoutContent">
      <div :class="$style.mainWrap">
        <a-row :gutter="[0, 0]" :class="$style.maina">
          <a-col :span="24" :class="[$style.bottomhei, $style.mainbL]">
            <div :class="[$style.box, $style.boxbottom]">
              <a-card class="ant-head-class-top">
                <a-form-model :model="form">
                  <a-row :gutter="24">
                    <a-col :span="7">
                      <a-form-model-item label="组织机构">
                        <sd-group-picker
                          v-model="form.deptName"
                          :single="true"
                          :read-only="false"
                        />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="7">
                      <a-form-model-item label="开始时间:">
                        <a-date-picker
                          mode="year"
                          format="YYYY"
                          :allow-clear="false"
                          :class="$style.yearwidth"
                          placeholder="选择年份"
                          :input-read-only="true"
                          :value="startTime"
                          @panelChange="panelStartYearChange"
                        ></a-date-picker>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="7">
                      <a-form-model-item label="结束时间:">
                        <a-date-picker
                          mode="year"
                          format="YYYY"
                          :allow-clear="false"
                          placeholder="选择年份"
                          :input-read-only="true"
                          :value="endTime"
                          :class="$style.yearwidth"
                          @panelChange="panelEndYearChange"
                        ></a-date-picker>
                      </a-form-model-item>
                    </a-col>
                    <a-col :class="$style.searchbutton" :span="2">
                      <!-- <a-button @click="handleReset">
                        重置
                      </a-button> -->
                      <a-button type="primary" html-type="submit" @click="handleSearch">
                        查询
                      </a-button>
                    </a-col>
                  </a-row>
                  <a-row :gutter="[0, 0]">
                    <a-col :span="6">
                      <div :class="$style.worklink">
                        <div :class="$style.worklinknum">
                          <a-avatar :size="45" icon="sd-plus-square" :class="$style.iconnum" />
                          <span>发起流程</span>
                          <span>{{ totalCount.FQSL === null ? 0 : totalCount.FQSL }}</span>
                        </div>
                      </div>
                    </a-col>
                    <a-col :span="6">
                      <div :class="$style.worklink">
                        <div :class="$style.worklinknum">
                          <a-avatar :size="45" icon="sd-star" :class="$style.iconsec" />
                          <span>办理中的流程</span>
                          <span>{{ totalCount.ZBSL === null ? 0 : totalCount.ZBSL }}</span>
                        </div>
                      </div>
                    </a-col>
                    <a-col :span="6">
                      <div :class="$style.worklink">
                        <div :class="$style.worklinknum">
                          <a-avatar :size="45" icon="sd-schedule" :class="$style.inconthi" />
                          <span>已办结的流程</span>
                          <span>{{ totalCount.BJSL === null ? 0 : totalCount.BJSL }}</span>
                        </div>
                      </div>
                    </a-col>
                    <a-col :span="6">
                      <div :class="$style.worklinkbak">
                        <div :class="$style.worklinknumbak">
                          <a-avatar :size="45" icon="sd-pie-chart" :class="$style.inconfour" />
                          <span>超期流程</span>
                          <span>{{ totalCount.CSSL === null ? 0 : totalCount.CSSL }}</span>
                        </div>
                      </div>
                    </a-col>
                  </a-row>
                </a-form-model>
              </a-card>
            </div>
          </a-col>
        </a-row>
        <a-row :gutter="[0, 0]" :class="$style.mainb">
          <a-col :span="12" :class="[$style.bottomhei, $style.mainbL]">
            <div :class="[$style.box, $style.boxbottom]">
              <a-card :bordered="false" :class="$style.cardBody">
                <div slot="title" :class="$style.fontslot">流程数量统计 </div>
                <div slot="extra">
                  <a-icon
                    slot="tabBarExtraContent"
                    :class="$style.morebtn"
                    type="ellipsis"
                    @click="$router.push('/sd-frame/sd-flow-statistics')"
                  />
                </div>
                <div :class="$style.echartclass"
                  ><sd-echart
                    v-if="connterDesignEchartOption.series[0].data.length > 0"
                    :ref="connterDesignEchartOption"
                    :options="connterDesignEchartOption"
                    :class="$style.echart"
                    autoresize
                  />
                  <sd-flow-empty :options="connterDesignEchartOption" />
                </div>
              </a-card>
            </div>
          </a-col>
          <a-col :span="12" :class="[$style.bottomhei, $style.mainbR]">
            <div :class="[$style.box, $style.boxbottom]">
              <a-card :bordered="false" :class="$style.cardBody">
                <div slot="title" :class="$style.fontslot">流程时效统计 </div>
                <div slot="extra">
                  <a-icon
                    slot="tabBarExtraContent"
                    :class="$style.morebtn"
                    type="ellipsis"
                    @click="$router.push('/sd-frame/sd-flow-timestatistics')"
                  />
                </div>
                <div :class="$style.echartclass"
                  ><sd-echart
                    v-if="echartOption.xAxis[0].data.length > 0"
                    :ref="echartOption"
                    :options="echartOption"
                    :class="$style.echart"
                    autoresize
                  />
                  <sd-flow-empty :options="echartOption" />
                </div>
              </a-card>
            </div>
          </a-col>
        </a-row>
        <a-row :gutter="[0, 0]" :class="$style.mainc">
          <a-col :span="12" :class="[$style.bottomhei, $style.mainbL]">
            <div :class="[$style.box, $style.boxbottom]">
              <a-card :bordered="false">
                <div slot="title" :class="$style.fontslot">流程异常统计 </div>
                <div slot="extra">
                  <a-icon
                    slot="tabBarExtraContent"
                    :class="$style.morebtn"
                    type="ellipsis"
                    @click="$router.push('/sd-frame/sd-flow-expectionstatistics')"
                  />
                </div>
                <div :class="$style.echartclass">
                  <sd-echart
                    v-if="pie.series[0].data.length > 0"
                    :ref="pie"
                    :class="$style.echart"
                    :options="pie"
                    autoresize
                  />
                  <sd-flow-empty :options="pie" />
                </div>
              </a-card>
            </div>
          </a-col>
          <a-col :span="12" :class="[$style.bottomhei, $style.mainbR]">
            <div :class="[$style.box, $style.boxbottom]">
              <a-card :bordered="false" :class="$style.cardBody">
                <div slot="title" :class="$style.fontslot">会签时效统计 </div>
                <div slot="extra">
                  <a-icon
                    slot="tabBarExtraContent"
                    :class="$style.morebtn"
                    type="ellipsis"
                    @click="$router.push('/sd-frame/sd-flow-countersign-statistics')"
                  />
                </div>
                <div :class="$style.echartclass"
                  ><sd-echart
                    v-if="timeEchartOption.series[0].data.length > 0"
                    :ref="timeEchartOption"
                    :options="timeEchartOption"
                    :class="$style.echart"
                    autoresize
                  />
                  <sd-flow-empty :options="timeEchartOption" />
                </div>
              </a-card>
            </div>
          </a-col>
        </a-row>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script>
import { Message } from 'ant-design-vue'
import moment from 'moment'
import components from './_import-components/sd-flow-summary-import'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/grid'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/title'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import WorkbenchService from './workbench-service'
const formatXText = (value) => {
  let str = ''
  const showNum = 6 // 每行显示字数
  const lineNum = Math.ceil(value.length / showNum) // 计算行数
  if (lineNum > 1) {
    for (let i = 0; i < lineNum; i++) {
      let temp = ''
      const start = i * showNum
      const end = start + showNum
      temp = i === lineNum - 1 ? value.substring(start, end) : value.substring(start, end) + '\n'
      str += temp
    }
    return str
  } else return value
}
// 流程时效统计
const echartOption = {
  title: [
    {
      text: '流程时效统计',
      subtext: '流程时效统计',
      left: '60%',
      textAlign: 'center',
    },
  ],
  grid: {
    top: '20%',
    bottom: '25%',
  },
  toolbox: {
    feature: {
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { title: '刷新', show: true },
      saveAsImage: { show: true },
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999',
      },
    },
  },
  legend: {
    x: 'left',
    y: ' center',
    data: ['在办数量', '办结数量', '平均办理时间(h)'],
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisPointer: {
        type: 'shadow',
      },
      axisLabel: {
        rotate: 40,
        interval: 0,
        align: 'right',
        padding: 5,
        formatter: formatXText,
      },
    },
  ],
  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 expectionEchartOption = {
  title: {
    text: '流程异常统计TOP10',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)',
  },
  toolbox: {
    feature: {
      saveAsImage: { show: true },
    },
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: [],
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      label: {
        show: false,
      },
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
}
// 流程会签统计
const timeEchartOption = {
  color: ['red'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: 'red',
      },
    },
  },
  legend: {
    x: 'left',
    data: ['会签时效时长(h)'],
  },
  grid: {
    bottom: '30%',
  },
  title: {
    text: '会签时效统计',
    subtext: '会签时效统计',
    left: 'center',
  },
  toolbox: {
    feature: {
      saveAsImage: { show: true },
    },
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisPointer: {
        type: 'shadow',
      },
      nameTextStyle: {
        width: '30px',
      },
      nameRotate: 50,
      axisLabel: {
        rotate: 45,
        interval: 0,
        padding: 5,
        formatter: formatXText,
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        formatter: '{value}',
      },
    },
  ],
  series: [
    {
      name: '会签时效时长(h)',
      type: 'bar',
      data: [],
      barWidth: '50',
    },
  ],
}
// 流程数量统计
const connterDesignEchartOption = {
  color: ['#1890FF', '#fa8c16'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999',
      },
    },
  },
  toolbox: {
    feature: {
      saveAsImage: { show: true },
    },
  },
  title: [
    {
      text: '流程数量统计',
      left: '60%',
      textAlign: 'center',
    },
  ],
  legend: {
    x: 'left',
    y: ' center',
    data: ['办理中（件数）', '已办结（件数）'],
  },
  grid: {
    bottom: '25%',
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisPointer: {
        type: 'shadow',
      },
      nameTextStyle: {
        width: '30px',
      },
      nameRotate: 50,
      axisLabel: {
        interval: 0,
        rotate: 40,
        padding: 5,
        formatter: formatXText,
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        formatter: '{value}',
      },
      nameTextStyle: {
        fontSize: 8,
      },
    },
  ],
  series: [
    {
      name: '办理中（件数）',
      type: 'bar',
      data: [],
    },
    {
      name: '已办结（件数）',
      type: 'bar',
      data: [],
    },
  ],
}
export default {
  name: 'SdFlowSummary',
  metaInfo: {
    title: '流程效率总览',
  },
  components,
  data() {
    return {
      startTime: '',
      endTime: '',
      startYear: '',
      endYear: '',
      queryModel: '',
      echartOption: echartOption,
      pie: expectionEchartOption,
      timeEchartOption: timeEchartOption,
      connterDesignEchartOption: connterDesignEchartOption,
      totalCount: '',
      form: {
        deptName: [],
      },
    }
  },
  mounted() {
    this.echartQuery()
    // 流程数量
    this.getTotalCount()
    // 会签流程
    this.getCounterSign()
    // 流程异常
    this.getExpectionCount()
  },

  methods: {
    moment,
    // 查询流程数量
    getTotalCount(
      params = {
        startDate: '',
        endDate: '',
        deptId: -1,
      }
    ) {
      WorkbenchService.getTotalCount(params).then((data) => {
        this.totalCount = data
      })
    },
    // 流程会签查询
    getCounterSign(sign = []) {
      // 流程会签
      this.timeEchartOption.xAxis[0].data = []
      this.timeEchartOption.series[0].data = []
      const getSignparams = {
        maxResults: -1,
        startPosition: 0,
        expressions: sign,
      }
      WorkbenchService.getFlowAgtinStatistics(getSignparams).then((data) => {
        this.loading = false
        data.data.forEach((element, index) => {
          if (index > 9) return
          this.timeEchartOption.xAxis[0].data.push(element.OPERATOR_DEPT_NAME)
          this.timeEchartOption.series[0].data.push(element.SIGNTIME)
        })
      })
    },
    // 流程异常查询
    getExpectionCount(expectionArr = []) {
      // 流程异常
      this.pie.legend.data = []
      this.pie.series[0].data = []
      expectionArr.push({
        dataType: 'long',
        name: 'CSSL',
        op: 'gt',
        longValue: 0,
      })
      // 流程异常特殊处理参数
      const expectParams = {
        maxResults: 100,
        startPosition: 0,
        orderBy: 'CSSL desc',
        expressions: expectionArr,
      }
      // 流程异常查询
      WorkbenchService.getExpection(expectParams).then((data) => {
        data.data.forEach((element, index) => {
          if (index < 10) {
            this.pie.legend.data.push(element.FLOWNAME)
            this.pie.series[0].data.push({ name: element.FLOWNAME, value: element.ZBSL })
          }
        })
      })
    },
    echartQuery(expressions = []) {
      // 流程数量
      this.connterDesignEchartOption.xAxis[0].data = []
      this.connterDesignEchartOption.series[0].data = []
      this.connterDesignEchartOption.series[1].data = []
      // 流程时效
      this.echartOption.series[0].data = []
      this.echartOption.series[1].data = []
      this.echartOption.series[2].data = []
      this.echartOption.xAxis[0].data = []
      const params = {
        maxResults: -1,
        startPosition: 0,
        expressions: expressions,
      }
      // 流程数量统计查询
      WorkbenchService.getFlowStatistics(params).then((data) => {
        data.data.forEach((item, index) => {
          if (index > 9) return
          this.connterDesignEchartOption.xAxis[0].data.push(item.FLOWNAME)
          this.connterDesignEchartOption.series[0].data.push(item.BJSL)
          this.connterDesignEchartOption.series[1].data.push(item.ZBSL)
        })
      })
      // 流程时效统计
      WorkbenchService.getFlowSignStatistics(params).then((data) => {
        this.loading = false
        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)
          this.echartOption.series[2].data.push(element.AVG_PROCESS_TIME)
        })
      })
    },
    panelStartYearChange(value) {
      this.startTime = value
      this.startYear = moment(value).format('YYYY')
    },
    panelEndYearChange(value) {
      this.endTime = value
      this.endYear = moment(value).format('YYYY')
    },
    // 提交查询
    handleSearch() {
      if (Number(this.startYear > Number(this.endYear))) {
        Message.warn('开始时间不能大于结束时间')
        return
      }
      // 部门Id
      let deptId = ''
      if (this.form.deptName && this.form.deptName.length > 0) {
        deptId = this.form.deptName[0].code
      }
      var params = {}
      if (this.startYear === '' || this.endYear === '') {
        params = {
          startDate: '',
          endDate: '',
          deptId: deptId || -1,
        }
      } else {
        params = {
          startDate: new Date(this.startYear, 0, 1).valueOf(),
          endDate: new Date(this.endYear, 11, 31, 23, 59, 59).valueOf(),
          deptId: deptId,
        }
      }

      WorkbenchService.getTotalCount(params).then((data) => {
        this.totalCount = data
      })
      this.searchSubmit(params)
    },

    // 进行查询提交
    searchSubmit(data) {
      const expressionsArr = []
      // 异常查询参数
      const expectionArr = []
      for (var i in data) {
        const expressions = {}
        const expectionObj = {}
        if (data[i] !== 0) {
          expressions.dataType = 'long'
          expectionObj.dataType = 'long'
          expressions.name = i
          expectionObj.name = i
          if (i === 'deptId') {
            expressions.op = 'eq'
            expectionObj.op = 'eq'
          } else if (i === 'startDate') {
            expressions.op = 'ge'
            expectionObj.op = 'ge'
          } else if (i === 'endDate') {
            expressions.op = 'le'
            expectionObj.op = 'le'
          }
          expressions.longValue = data[i]
          expectionObj.longValue = data[i]
          expressionsArr.push(expressions)
          expectionArr.push(expectionObj)
        }
      }
      this.echartQuery(expressionsArr)
      this.getCounterSign(expressionsArr)
      this.getExpectionCount(expectionArr)
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.theme {
  color: $primary-color;
}
$importcolor: #af1195;
$carousel-title: 64px;
$module-title: 64px;
$fonsicon-bg: 48px;
$nodata-icon: #d9d9d9;
.pull-right {
  float: right;
}
.gobance {
  cursor: pointer;
}
.navsetting {
  cursor: pointer;
}
.layout {
  height: 100%;
  .layout-content {
    min-height: calc(100% - 128px);
  }
}

.main-wrap {
  height: 100%;
  .maina {
    height: 28%;
    padding-bottom: $padding-lg;
    overflow: hidden;
    .bottomhei {
      height: 100%;
    }
  }
  .mainc {
    padding: $padding-lg 0;
    .bottomhei {
      height: 100%;
      &.mainb-l {
        padding-right: $padding-lg;
      }
    }
  }
  .mainb {
    .bottomhei {
      height: 100%;
      &.mainb-l {
        padding-right: $padding-lg;
      }
    }
  }
}

.boxslider {
  position: relative;
  .slidebox {
    height: 100%;
    div {
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  .sd-dots {
    bottom: 30px;
    padding: 0 10px;
    text-align: right;
    li {
      margin: 0 4px;
      &:global(.slick-active) {
        button {
          width: 6px;
          background: $primary-color;
        }
      }
      button {
        width: 6px;
        height: 6px;
        background: $white;
        border-radius: 50%;
        opacity: 1;
      }
    }
  }
}

.box {
  height: 100%;
  overflow: hidden;
  background: $card-background;
  border-radius: 2px;
  .card-body {
    :global(.ant-card-body) {
      height: 100%;
    }
  }
  .morebtn {
    cursor: pointer;
  }
  .fontslot {
    color: $importcolor;
  }
  &.boxbottom {
    height: 100%;
  }
}
.worklink {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-right: 2px solid $border-color-base;
  .worklinknum {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-size: $font-size-base;
    span {
      font-size: $font-size-lg;
      color: $text-color;
    }
    span:nth-child(1) {
      margin-top: 2px;
    }
    span:nth-child(2) {
      padding: 10px;
      font-size: 1.1rem;
    }
    span:nth-child(3) {
      font-size: 2.1rem;
      font-weight: 700;
    }
    .iconnum {
      background-color: $alert-info-icon-color;
    }
    .iconsec {
      background-color: $alert-warning-icon-color;
    }
    .inconthi {
      background-color: $magenta-5;
    }
  }
}
.worklinkbak {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  cursor: pointer;
  .worklinknumbak {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 10px;
    font-size: $font-size-base;
    span {
      font-size: $font-size-lg;
      color: $text-color;
    }
    span:nth-child(1) {
      margin-top: 2px;
    }
    span:nth-child(2) {
      padding: 10px;
      font-size: 1.1rem;
    }
    span:nth-child(3) {
      font-size: 2.1rem;
      font-weight: 700;
    }
    .inconfour {
      background-color: $alert-success-icon-color;
    }
  }
}

:global(.ant-head-class-top) {
  :global(.ant-form-item) {
    display: flex;
  }
  :global(.ant-form-item-control-wrapper) {
    flex: 1;
  }
  :global(.ant-calendar-picker) {
    width: 100%;
  }
}

.echartclass {
  .echart {
    width: 100%;
    overflow: hidden;
  }
}
.searchbutton {
  text-align: right;
}
.empty-size {
  margin: 10% 0;
  :global(.ant-empty-image) {
    height: 50px;
    i {
      height: 100%;
      font-size: $fonsicon-bg;
      color: $nodata-icon;
    }
  }
}
</style>
