<template>
  <add-page-layout v-loading="loading">
    <div slot="Header-Content">
      <!-- <img :src="title=='新增'?addImg:title=='修改'?updImg:detailImg"> -->
      <!-- <svg></svg> -->
      <span>{{ title }}</span>
      <i class="el-icon-close close" @click="closeDialog" />
      <el-button icon="el-icon-download" circle type="mini" @click="saveImage('Top3Img', resultDetail.auditTaskName)"></el-button>
    </div>
    <div slot="Form-Content">
      <div id="Top3Img" ref="Top3Img">
        <div class="audit-header">{{ resultDetail.auditTaskName?resultDetail.auditTaskName:'暂无结果' }}</div>
        <div>
          <template v-if="resultDetail.type == 'bar'">
            <bar-chart :height="resultHeight" :chart-bar-data="resultDetail.chartData" :show-legend="true" />
          </template>
          <template v-else-if="resultDetail.type == 'line'">
            <line-chart :height="resultHeight" :chart-data="resultDetail.chartData" :show-legend="true" />
          </template>
          <template v-else-if="resultDetail.type == 'pie'">
            <pie-chart :height="resultHeight" :chart-pie-data="resultDetail.chartData" :show-legend="true" />
          </template>
          <template v-else-if="resultDetail.type == 'mapScatter'">
            <!-- <map-Scatter-chart :height="resultHeight" :chart-scatter-data="resultDetail.chartData"></map-Scatter-chart> -->
            <map-area-chart :height="resultHeight" :chart-area-data="resultDetail.chartData" :show-legend="true" :is-zoom="true" />
          </template>
          <template v-else-if="resultDetail.type == 'table'">
            <!-- :page="pageQueryLog" 分页 @handleCurrentChange="handleCurrentChangeResult" @handleSizeChange="handleSizeChangeResult"-->
            <div style="padding:3px 6px;">
              <c-Table :column="resultDetail.columns" :height="resultHeight" :table-data="resultDetail.tableData" :page="pageResult" :hidden="true" />
            </div>
            <!-- </div> -->
          </template>
          <template v-else-if="resultDetail.type == 'radar'">
            <!-- <div :style="{width:item.width,height:item.height}"> -->
            <radar-chart :height="resultHeight" :chart-radar-data="resultDetail.chartData" :show-legend="true" />
          </template>

          <template v-else-if="resultDetail.type == ''||resultDetail.type == null">
            <div :style="{height:resultHeight,width:'100%',textAlign:'center',position:'relative'}">
              <div :style="{textAlign:'center'}">
                <img src="../assets/img/icon_zanwu.png" alt="" :style="{maxHeight:'190px',maxWidth:'250px',position: 'absolute',top: '50%',left: '50%',transform:'translate(-50%,-50%)'}">
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div slot="Footer-Content">
      <el-button @click="closeDialog">关闭</el-button>
    </div>
  </add-page-layout>
</template>

<script>
import { batchDelTasks, viewRecentResult, getAuditTaskList, getOperRecord, viewTaskOperRecordResult, getLogTypeList } from '../api/analysis-audit-manage'
import cTable from '@ability/components/cTable'
import barChart from '@ability/components/Echarts/BarChart'
import lineChart from '@ability/components/Echarts/LineChart'
import pieChart from '@ability/components/Echarts/PieChart'
import html2canvas from 'html2canvas'
// import mapScatterChart from '@ability/components/Echarts/mapScatterChart'
import mapAreaChart from '@ability/components/Echarts/mapAreaChart'
import radarChart from '@ability/components/Echarts/radarChart'
export default {
  name: '',
  components: {
    cTable,
    barChart,
    lineChart,
    pieChart,
    // mapScatterChart,
    mapAreaChart,
    radarChart
  },
  data() {
    return {
      title: '执行结果',
      loading: false,
      resultDetail: {
        auditTaskName: '', // 任务名称
        type: '', // 类型
        chartData: {}, // 图表
        columns: [], // 列表
        tableData: []
      },
      resultHeight: '360px',
      pageResult: {
        current: 1,
        total: 10,
        size: 6
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    const taskId = this.$route.params.taskId
    const recordId = this.$route.params.recordId
    if (taskId != undefined) {
      this.getResultInfo(taskId)
    }
    if (recordId != undefined) {
      this.viewExecutionResult(recordId)
    }
  },
  methods: {
    //下面是methods中的内容
    //图片转换格式的方法 直接使用就好  不需要知道为什么
    dataURLToBlob(dataurl) {
      let arr = dataurl.split(',');
      let mime = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    /*保存图片的方法（即按钮点击触发的方法）
      第一个参数为需要保存的div的id名
      第二个参数为保存图片的名称 */
    saveImage(divText, imgText) {
      let canvasID = this.$refs[divText];
      let that = this;
      let a = document.createElement('a');
      html2canvas(canvasID).then(canvas => {
        let dom = document.body.appendChild(canvas);
        dom.style.display = 'none';
        a.style.display = 'none';
        document.body.removeChild(dom);
        let blob = that.dataURLToBlob(dom.toDataURL('image/png'));
        a.setAttribute('href', URL.createObjectURL(blob));
        //这块是保存图片操作  可以设置保存的图片的信息
        a.setAttribute('download', imgText + '.png');
        document.body.appendChild(a);
        a.click();
        URL.revokeObjectURL(blob);
        document.body.removeChild(a);
      });
    },
    closeDialog() {
      this.$router.go(-1)
    },
    getResultInfo(taskId) {
      this.loading = true
      this.loaingText = ''
      viewRecentResult(taskId).then(resp => {
        if (resp.data.returnCode == '0') {
          this.loading = false
          this.resultDetail.auditTaskName = resp.data.data.auditTaskName
          this.resultDetail.type = resp.data.data.type
          this.$set(this.resultDetail, 'chartData', resp.data.data.chartData)
          this.$set(this.resultDetail, 'columns', resp.data.data.columns)
          this.$set(this.resultDetail, 'tableData', resp.data.data.tableData)
        } else {
          this.loading = false
          // this.$message.error(resp.data.returnMsg)
        }
      }, error => {
        this.loading = false
        this.$message.error(error.returnMsg)
      })
    },
    // 查看任务执行结果
    viewExecutionResult(recordId) {
      // this.$message.info('数据请求中,请稍候！')
      viewTaskOperRecordResult(recordId).then(resp => {
        if (resp.data.returnCode == '0') {
          this.resultDetail.auditTaskName = resp.data.data.auditTaskName
          this.resultDetail.type = resp.data.data.type
          this.$set(this.resultDetail, 'chartData', resp.data.data.chartData)
          this.$set(this.resultDetail, 'columns', resp.data.data.columns)
          this.$set(this.resultDetail, 'tableData', resp.data.data.tableData)
        } else {
          // this.$message.error(resp.data.returnMsg)
        }
      }, error => {
        // this.$message.error(error.returnMsg)
      })
    }

  }
}
</script>
<style scoped>
.audit-header{
  font-size:14px;
  color: transparent;
  background-color: black;
  border-left:4px solid #0096E4 ;
  text-shadow: rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
  -webkit-background-clip: text;
  padding:6px;
}
</style>
