<template>
  <div>
    <add-page-layout :show-footer="false" v-loading="loadLargeing">
      <div slot="Header-Content">
        <span>{{ title }}</span>
        <el-button icon="el-icon-download" circle type="mini" @click="saveImage('Top3Img', title)"></el-button>
        <i class="el-icon-close close" @click="$router.go(-1)" />
      </div>
      <div slot="Form-Content" id="Top3Img" ref="Top3Img">
        <el-row>
          <div v-for="(itemChild,childkey) in chartList" :key="childkey">
            <template v-if="itemChild.type == 'bar'">
              <el-col :span="itemChild.col" :style="{height:Height}">
                <p class="audit-header">{{ itemChild.auditTaskName }}</p>
                <bar-chart :height="chartHeight" :chart-bar-data="itemChild.chartData" :show-legend="true" />
              </el-col>
            </template>
            <template v-else-if="itemChild.type == null">
              <el-col :span="itemChild.col" :style="{height:Height}">
                <p class="audit-header">{{ itemChild.auditTaskName }}</p>
                <div :style="{height:chartHeight,width:'100%',textAlign:'center',position:'relative'}">
                  <div :style="{textAlign:'center'}">
                    <img src="../assets/img/icon_zanwu.png" alt="" :style="{maxHeight:'100px',maxWidth:'120px',position: 'absolute',top: '50%',left: '50%',transform:'translate(-50%,-50%)'}">
                  </div>
                </div>
              </el-col>
            </template>
            <template v-else-if="itemChild.type == 'line'">
              <el-col :span="itemChild.col" :style="{height:Height}">
                <p class="audit-header">{{ itemChild.auditTaskName }}</p>
                <line-chart :height="chartHeight" :chart-data="itemChild.chartData" :show-legend="true" />
              </el-col>
            </template>
            <template v-else-if="itemChild.type == 'pie'">
              <el-col :span="itemChild.col" :style="{height:Height,}">
                <p class="audit-header">{{ itemChild.auditTaskName }}</p>
                <pie-chart :height="chartHeight" :chart-pie-data="itemChild.chartData" :show-legend="true" />
              </el-col>
            </template>
            <template v-else-if="itemChild.type == 'mapScatter'">
              <!-- <el-col :span="itemChild.col" class="chart-container"> -->
              <el-col :span="itemChild.col" :style="{height:Height}">
                <p class="audit-header">{{ itemChild.auditTaskName }}</p>
                <map-area-chart :height="chartHeight" :chart-area-data="itemChild.chartData" :show-legend="true" />
              </el-col>
            </template>
            <template v-else-if="itemChild.type == 'radar'">
              <el-col :span="itemChild.col" :style="{height:Height}">
                <p class="audit-header">{{ itemChild.auditTaskName }}</p>
                <radar-chart :height="chartHeight" :chart-radar-data="itemChild.chartData" :show-legend="true" />
              </el-col>
            </template>
            <template v-else-if="itemChild.type == 'table'">
              <el-col :span="itemChild.col" :style="{height:Height}">
                <p class="audit-header">{{ itemChild.auditTaskName }}</p>
                <c-Table ref="tableParent" :column="itemChild.columns" :height="chartHeight" :table-data="itemChild.tableData" :page="pageQuery" :hidden="true" />
              </el-col>
            </template>
          </div>
        </el-row>
      </div>
    </add-page-layout>
  </div>
</template>

<script>
import barChart from '../../../components/Echarts/BarChart'
import lineChart from '../../../components/Echarts/LineChart'
import pieChart from '../../../components/Echarts/PieChart'
import mapScatterChart from '../../../components/Echarts/mapScatterChart'
import mapAreaChart from '../../../components/Echarts/mapAreaChart'
import radarChart from '../../../components/Echarts/radarChart'
import cTable from '../../../components/cTable'
import nodataImg from '../assets/img/icon_zanwu.png'
import { chartZoom } from '../api/statistical-reports-manage'
import html2canvas from 'html2canvas'
export default {
  components: {
    barChart,
    lineChart,
    pieChart,
    mapScatterChart,
    mapAreaChart,
    radarChart,
    cTable
  },
  data() {
    return {
      loadLargeing: false,
      nodataImg: nodataImg,
      repoerId: null,
      chartList: [],
      eachHeight: null,
      title: '',
      rowNum: null,
      culumnNum: null,
      Height: '',
      textHeight: '',
      col: null,
      chartHeight: '',
      chartWidth: '',
      pageQuery: {
        size: 10,
        current: 1,
        total: 0
      }
    }
  },
  computed: {},
  mounted() {
    this.repoerId = this.$route.params.repoerId
    this.title = this.$route.params.repoerName
    this.rowNum = this.$route.params.rowNum
    this.culumnNum = this.$route.params.culumnNum
    this.col = 24 / this.culumnNum
    this.getReportInfo()
    this.eachHeight = (document.documentElement.clientHeight - 54 - 60) / 24
    this.chartWidth = 100 / this.rowNum + '%'
    this.chartHeight = this.eachHeight * (24 / this.rowNum) - 30 + 'px'
    this.textHeight = (this.eachHeight * (24 / this.rowNum) - 30 - 20) / 2
    // let containerHeight = (getComputedStyle(document.getElementById("reportbody"),null).height).replace(/px/,'') //获取容器高度
  },
  created() {},
  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);
      });
    },
    // 获取图表详情
    getReportInfo() {
      this.loadLargeing = true
      chartZoom(this.repoerId).then(resp => {
        if (resp.data.returnCode == '0') {
          this.chartList = resp.data.data
          for (let i = 0; i < this.chartList.length; i++) {
            const item = this.chartList[i]
            this.$set(this.chartList[i], 'col', this.col)
            this.$set(this.chartList[i], 'textHeight', this.textHeight)
          }
          this.loadLargeing = false
        }
      }, error => {
        this.loadLargeing = false
        this.$message.error(error.returnMsg)
      })
    }
  }
}
</script>
<style scoped>
.chart{}
.chartline{}
.chart-container{
  margin-bottom:12px;
  padding:3px;
}
.table-padding{
  padding:3px 15px;
}
.audit-header{
  font-size:13px;
  line-height:20px;
  padding: 3px 10px;
  text-align:left;
  border-left:3px solid #0881ED;
  margin:0 6px;
}
.textCss{
  color:#838383;
  font-weight:500;
  height:20px;
  line-height:20px;
  width:80px;
  text-align:center;
  font-size:12px;
  background:#DFDFDF;
  padding:3px;
  border-radius:3px
}
</style>

