<template>
  <div class="hxtg-box">
    <div class="top">
      <div class="tg-type" id="tg-type"></div>
      <div class="tg-dq" id="tg-dq"></div>
    </div>
    <div>
      <div>
        <el-date-picker
          style="width: 250px!important;margin-right: 10px"
          @change="timeChange"
          v-model="chooseTime"
          type="daterange">
        </el-date-picker>
        <el-select style="margin-right: 10px" v-model="chooseType" placeholder="全部类型" clearable
                   @change="changeType">
          <el-option v-for="(item,index) in chooseTypeOptions"
                     :key="index"
                     :label="item.tags"
                     :value="item.typeId"></el-option>
        </el-select>
        <el-select v-model="chooseOrg" clearable placeholder="全部地区" @change="changeOrg">
          <el-option v-for="(item,index) in chooseOrgOptions"
                     :key="index"
                     :label="item.org"
                     :value="item.org">
          </el-option>
        </el-select>
      </div>
      <div>
        <el-table :data="tableData" height="300" @row-click="goMessage" :row-style="{cursor: 'pointer'}">
          <el-table-column prop="recordTime" width="120" align="center" label="时间">
            <template slot-scope="scope">
              {{ formatDate(scope.row.recordTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="tags" width="120" align="center" label="类型"></el-table-column>
          <el-table-column prop="org" align="center" width="120" label="地区"></el-table-column>
          <el-table-column prop="inciTitle" label="标题" show-overflow-tooltip></el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="page.cepPage"
                       :page-sizes="[10, 20, 30, 40, 50]"
                       :page-size="page.size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="page.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {Vue, Component} from 'vue-property-decorator'
import * as echarts from "echarts";
import * as  DateUtil from '@/util/date'
import api from '@/api'
import {getLongByTime, getTimeByLong, getTimeByLongByFormat} from "@/util/date";
import Http from '@/util/axios'

@Component({})
export default class Notan extends Vue {
  private typeEcharts: any;
  private dqEcharts: any;
  private messageTypeId: any;
  private orgName: any;
  private page = {
    size: 10,
    cepPage: 1,
    total: 0,
    pages: 0
  }
  private tableData: any[] = []
  private chooseTime: any[] = [];
  private chooseType = '';
  private chooseTypeOptions: any[] = [];
  private chooseOrg = '';
  private chooseOrgOptions: any[] = [];

  public mounted() {
    this.typeEcharts = echarts.init(document.getElementById('tg-type') as HTMLElement);
    this.dqEcharts = echarts.init(document.getElementById('tg-dq') as HTMLElement);
    this.initData()
    this.getMessageInfo()
  }

  public created() {
    const nowTime = DateUtil.getNowTime()
    this.chooseTime[0] = new Date(DateUtil.getLongByTime(DateUtil.getBeforeTime(nowTime, 7)) * 1000)
    this.chooseTime[1] = new Date(DateUtil.getLongByTime(nowTime) * 1000)
  }

  private timeChange() {
    this.getMessageInfo()
  }

  private changeType(data: any) {
    this.messageTypeId = data
    this.getMessageInfo()
  }

  private changeOrg(data: any) {
    this.orgName = data
    this.getMessageInfo()
  }

  private initData() {
    api.getIncidentTypeTags().then((res: any) => {
      if (res.message === 'ok') {
        this.chooseTypeOptions = res.data;
      }
    })
    api.getIncidentOrgsTags().then((res: any) => {
      if (res.message === 'ok') {
        this.chooseOrgOptions = res.data;
      }
    })
    api.getIncidentCount().then((res: any) => {
      if (res.message === 'ok') {
        const org = res.data.org;
        const tags = res.data.tags;
        const orgData: any = {
          title: [],
          value: []
        }
        const tagData: any = {
          title: [],
          value: []
        }
        for (let i = 0; i < org.length; i++) {
          const data = org[i]
          orgData.title.push(data.title)
          orgData.value.push(data.counts)
        }
        for (let i = 0; i < tags.length; i++) {
          const data = tags[i]
          tagData.title.push(data.title)
          tagData.value.push(data.counts)
        }
        this.setTypeEcharts(tagData)
        this.setDqEcharts(orgData)
      }
    })
  }

  private formatDate(time: any) {
    return DateUtil.getTimeByLongByFormat(time * 1000, 'YYYY-MM-DD')
  }

  private goMessage(data: any) {
    window.open('javascript:window.name;', '<script>location.replace("' + data.url + '")<\/script>');
  }

  private getMessageInfo() {
    api.getIncidentInfo({
      typeIds: this.messageTypeId,
      org: this.orgName,
      begin: getLongByTime(this.chooseTime[0]),
      end: getLongByTime(this.chooseTime[1]),
      page: this.page.pages,
      size: this.page.size
    }).then((res: any) => {
      if (res.message === 'ok') {
        this.tableData = res.data
        this.page.total = res.counts
      } else {
        this.tableData = []
        this.page.total = 0
      }
    })
  }

  private handleSizeChange(val: any) {
    this.page.size = val
    this.getMessageInfo()
  }

  private handleCurrentChange(val: any) {
    this.page.pages = val
    this.getMessageInfo()
  }

  private setTypeEcharts(data: any) {
    const option = {
      tooltip: {
        trigger: 'axis',
        show: false
      },
      legend: {
        show: false
      },
      grid: {
        left: '3%',
        right: '10%',
        top: '3%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          splitLine: {
            show: true
          },
          type: 'value',
          show: true
        }
      ],
      yAxis: [
        {
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          type: 'category',
          axisTick: {
            show: true
          },
          inverse: true,
          data: data.title,
          axisLabel: {
            color: '#8C8C8C',
            fontSize: 10
          }
        }
      ],
      series: [
        {
          name: '标准化',
          type: 'bar',
          barWidth: 10, // 柱子宽度
          label: {
            show: false,
            position: 'center', // 位置
            color: '#fff',
            fontSize: 12,
            lineHeight: 20,
            distance: 15, // 距离
            formatter: '    {c}' // 这里是数据展示的时候显示的数据
          }, // 柱子上方的数值
          data: data.value
        }
      ]
    }
    this.typeEcharts.setOption(option)
  }

  private setDqEcharts(data: any) {
    const option = {
      tooltip: {
        trigger: 'axis',
        show: false
      },
      legend: {
        show: false
      },
      grid: {
        left: '3%',
        right: '10%',
        top: '3%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          splitLine: {
            show: true
          },
          type: 'value',
          show: true
        }
      ],
      yAxis: [
        {
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          type: 'category',
          axisTick: {
            show: true
          },
          inverse: true,
          data: data.title,
          axisLabel: {
            color: '#8C8C8C',
            fontSize: 10
          }
        }
      ],
      series: [
        {
          name: '标准化',
          type: 'bar',
          barWidth: 10, // 柱子宽度
          label: {
            show: false,
            position: 'center', // 位置
            color: '#fff',
            fontSize: 12,
            lineHeight: 20,
            distance: 15, // 距离
            formatter: '    {c}' // 这里是数据展示的时候显示的数据
          }, // 柱子上方的数值
          data: data.value
        }
      ]
    }
    this.dqEcharts.setOption(option)
  }

  private cancel() {
    console.log('')
  }
}
</script>

<style lang="scss" scoped>
.hxtg-box {
  width: 100%;
  height: 700px;

  .top {
    height: 300px;
    display: flex;
    justify-content: space-between;

    .tg-type {
      width: 500px;
      height: 300px;
    }

    .tg-dq {
      width: 500px;
      height: 300px;
    }
  }
}
</style>
