<template>
  <div>
    <el-row>
      <el-col :span="14"><AlarmTrendStatistics :id="id" :data="trendData" /></el-col>
      <el-col :span="10"><AlarmProportionStatistics :id="id" :data="pieData" /></el-col>
    </el-row>
    <el-row class="box">
      <ProcessBack :item="item" />
    </el-row>
  </div>
</template>

<script>
import ProcessBack from '../../components/ProcessBack'
import AlarmTrendStatistics from '../../components/AlarmTrendStatistics'
import AlarmProportionStatistics from './AlarmProportionStatistics'
import { getAlertView } from '../../api/threatAlert'
export default {
  name: 'AlarmDetailChart',
  components: { AlarmTrendStatistics, AlarmProportionStatistics, ProcessBack },
  props: {
    id: {
      type: [Number, String],
      required: true
    },
    row: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      item: null,
      trendData: [],
      pieData: []
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    search() {
      getAlertView(this.id).then((resp) => {
        if (resp.data.returnCode == '0') {
          this.trendData = resp.data.data.trendData
          this.pieData = resp.data.data.pieData
          if (resp.data.data.alarmTagKey && resp.data.data.trackInfo) {
            this.item = {
              alarmTagName: this.row.alertRule,
              alarmTagKeyRaw: resp.data.data.alarmTagKeyRaw || resp.data.data.alarmTagKey,
              remark: JSON.parse(resp.data.data.trackInfo)
            }
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('../../style/threatPerception.scss');
.box{
  div{
    padding: 0 5px;
  }
}

</style>
