<template>
  <div :class="$style.searchdiv">
    <a-card :class="$style.searchWrap">
      <a-form-model
        ref="advancedSearchForm"
        layout="horizontal"
        :model="form"
        v-bind="formItemLayout"
      >
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="统计日期" prop="timeRange">
              <a-range-picker v-model="form.timeRange" :time-range.sync="form.timeRange" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="统计单位" prop="Org">
              <sd-group-picker v-model="form.Org" :read-only="false" :single="true" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <div class="reportbuttonContent">
              <a-button @click="resetForm">重置</a-button>
              <a-button
                style="margin: 0 5px 10px"
                type="primary"
                html-type="submit"
                @click="submitForm"
                >查询</a-button
              >
              <a-button type="primary" @click="exportForm">导出</a-button>
            </div>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>
    <a-card class="reporttablecardxm">
      <span class="header_sd-header_common"
        ><span :class="['toptitle', $style.toptitle]">案件阶段统计</span></span
      >
      <template v-if="JSON.stringify(chartData.xAxis.data) !== '[]'">
        <div><sd-echart :class="$style.echarts" :options="chartData" autoresize /></div>
      </template>
      <template v-else-if="JSON.stringify(chartData.xAxis.data) === '[]' && !flag">
        <div :class="$style.emptyecharts"> </div>
      </template>
    </a-card>
  </div>
</template>

<script>
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/toolbox'
import lawService from '../law-service'
import components from './_import-components/law-casestage-statistics-form-import'

export default {
  name: 'LawCasestageStatisticsForm',
  metaInfo: {
    title: '案件阶段统计',
  },
  components: {
    ...components,
  },
  data() {
    return {
      // rules: {
      //   timeRange: [{ required: true, message: '请选择年度', trigger: 'change' }],
      //   Org: [{ required: true, message: '请选择审计机构', trigger: 'change' }],
      // },
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
      },
      form: {
        timeRange: [],
        Org: [],
      },
      chartData: {
        title: {
          left: 'center',
          text: null,
        },
        tooltip: {},
        legend: {
          icon: 'square',
          x: 'right',
          align: 'left',
          top: '35%',
          orient: 'vertical',
          data: [],
        },
        grid: {},
        xAxis: {
          type: 'category',
          data: [],
        },
        yAxis: [
          {
            type: 'value',
            name: '案件数量',
            show: true,
            minInterval: 1,
          },
        ],
        series: [],
        toolbox: {
          feature: {
            restore: { title: '刷新', show: true },
            saveAsImage: { show: true, name: '案件阶段统计图' },
          },
        },
      },
      flag: true,
    }
  },
  methods: {
    submitForm() {
      this.flag = false
      this.$refs.advancedSearchForm.validate((valid, values) => {
        if (valid) {
          const unitIds = []
          this.form.Org.forEach((o) => {
            unitIds.push(o.code)
          })
          const params = {
            type: 'caseStage',
            startTime: new Date(this.form.timeRange[0]).getTime(),
            endTime: new Date(this.form.timeRange[1]).getTime(),
            orgIds: unitIds,
          }
          this.chartData.xAxis.data = []
          this.chartData.legend.data = []
          this.chartData.series = []
          lawService.getCasestageStatistics(params).then((res) => {
            const arrStage = ['ajjd', 'ajja', 'ajsb', 'ajzx', 'zxja']
            const arrStageNames = ['案件进展', '案件结案', '案件上报', '案件执行', '已执结']
            const arrColors = ['#9999FF', '#99FFCC', '#00FFFF', '#FFCCCC', '#CCFFCC']
            res.data.forEach((d) => {
              this.chartData.xAxis.data.push(d.caseTypeName)
            })
            arrStage.forEach((sitem, index) => {
              this.chartData.legend.data.push(arrStageNames[index])
              const sdata = []
              res.data.forEach((ditem) => {
                sdata.push(ditem[sitem])
              })
              this.chartData.series.push({
                name: arrStageNames[index],
                type: 'bar',
                stack: 'total',
                itemStyle: {
                  color: arrColors[index],
                },
                label: {
                  show: true,
                  position: 'inside',
                  textStyle: {
                    color: '#000',
                  },
                  formatter: function (p) {
                    return p.value > 0 ? p.value : ''
                  },
                },
                data: sdata,
              })
            })
          })
        }
      })
    },
    resetForm() {
      this.form = {
        timeRange: [],
        Org: [],
      }
    },
    exportForm() {
      // 获取画布信息
      const canvas = document.getElementsByTagName('canvas')
      if (canvas && canvas.length > 0) {
        // 创建标签
        const tempA = document.createElement('a')
        // 设置下载名称
        tempA.download = '案件阶段统计图' + '.png'
        // 设置地址以及文件类型
        tempA.href = canvas[0].toDataURL('image/png')
        document.body.appendChild(tempA)
        // 触发下载事件
        tempA.click()
        // 移除标签
        tempA.remove()
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.emptyecharts {
  width: 600px;
  height: 400px;
  margin: auto auto;
  text-align: center;
  &::after {
    content: '无数据';
    padding-top: 150px;
    display: block;
  }
}
.echarts {
  width: 100%;
  height: 400px;
  margin: auto auto;
  text-align: center;
}
.toptitle {
  color: #404040;
  font-weight: bold;
  font-size: 22px;
  margin-left: calc(50% - 150px);
}

.search-wrap {
  margin-bottom: $padding-lg;
  :global(.ant-advanced-search-form) {
    padding: 0;
    background: transparent;
    border: none;
  }
  :global .ant-divider-horizontal {
    margin: 10px 0;
  }
}
.searchdiv {
  height: 100%;
  :global(.sd-has-table.ant-card) {
    min-height: calc(100vh - 270px);
  }
  :global(.reporttablecardxm) {
    :global(.ant-table-body) {
      height: auto !important;
      overflow: auto;
      min-height: auto !important;
    }
  }
  :global(.ant-table-placeholder) {
    height: auto !important;
  }
}
</style>
