  <!--
    hBorder 标题border
    showHeader 是否展示标题
    fBorder 查询条件border
    showForm 是否展示查询条件
    cBorder 图表border
    showChart 是否展示图表
    tBorder 列表border
    showTable 是否展示列表
  -->
<template>
  <div class="box">
    <div v-show="showForm" class="search_form common" :class="{layout_border:fBorder}">
      <slot name="form_content" />
    </div>
    <div v-show="showChart" class="chart-container common" :class="{layout_border:cBorder}" id="Top3Img" ref="Top3Img">
      <div class="container-title">
        <p class="p-title">名称<el-button style="display: flex; align-items: center; margin-left: 10px" icon="el-icon-download" circle type="mini" @click="saveImage('Top3Img', '事件趋势')"></el-button></p>
        <p class="p-result" style="color: #409eff;">{{ resultInfo }}</p>
      </div>
      <slot name="chart_content" class="chart_content"/>
    </div>
    <div
      v-show="showTable"
      class="tableInfo common"
      :class="{layout_border:tBorder}"
    >
      <div class="container-title">
        <p class="p-title">{{ tableName }}</p>
        <p class="p-result">
          <slot name="table_button" />
        </p>
      </div>
      <slot name="table_content" class="table_content" />
    </div>
    <slot />
  </div>
</template>

<script>
import html2canvas from "html2canvas";

export default {
  props: {
    showForm: {
      type: Boolean,
      default: true
    },
    // showHeader: {
    //   type: Boolean,
    //   default: true
    // },
    showChart: {
      type: Boolean,
      default: true
    },
    resultInfo: {
      type: String
    },
    showTable: {
      type: Boolean,
      default: true
    },
    tBorder: {
      type: Boolean,
      default: true
    },
    // hBorder:{
    //   type:Boolean,
    //   default:true,
    // },
    fBorder: {
      type: Boolean,
      default: true
    },
    tableName: {
      type: String,
      default: '列表'
    },
    cBorder: {
      type: Boolean,
      default: true
    }
    // styleT: {}
  },
  data() {
    return {}
  },
  computed: {},
  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);
      });
    },
  },
  mounted() {
  }
}
</script>

<style scoped>
.box {
  height: 100%;
  margin-left: 16px;
}
.common{
  margin-bottom:10px;
  position: relative;
  border-radius: 3px;
}
.search_form {
  margin-top: 20px;
  font-size: 14px;
}
.tableInfo,
.chart-container{
  margin-right:17px;
  min-height: 242px;
}
.container-title{
  width:100%;
  height: 35px;
	background-color: #ffffff;
	/* background-color: #f4f4f4; */
	border-radius: 3px;
  clear: both;
  overflow: hidden;
  font-size: 14px;
}
.chart_content,
.table_content{
  padding:1px;
  min-height: 242px;;
}
.p-title{
  display: flex;
	height: 17px;
	line-height: 17px;
  float: left;
	color: #333333;
  margin: 9px 12px 9px 1%;
  border-left:4px solid #0096e4;
  padding-left:12px;
}
.p-result{
  width: 90%;
  height:35px;
  float: left;
  text-align: right;
  line-height: 35px;
}
.layout_border {
  border:1px solid #dcdfe6;
}

</style>
