<template>
  <div v-loading="loading">
    <manager-ui
      :query-model="qureyParam"
      :query-items="queryItems"
      :spread-threshold="1"
      :show-add-btn="false"
      :pagination="page"
      @searchClick="searchClick"
      @search="search"
      @resetForm="reset"
    >
      <template slot="center">
        <el-row v-if="chartListData.length != 0" :gutter="6" class="colcss">
          <el-col v-for="(item,index) in chartListData" :key="index" :span="8" class="colcss">
            <el-row class="boxcard">
              <!-- 报表名称及放大按钮行 -->
              <div class="report-header">
                <el-col :span="16" class="colcss" style="text-align:left;padding-left:2%;line-height:24px;">
                  <p>{{ item.repoerName }}</p>
                </el-col>
                <el-col :span="8" class="colcss">
                  <el-button icon="el-icon-rank" style="float: right; padding: 3px 0" type="text" @click="enlargeOper(item)">放大</el-button>
                </el-col>
              </div>
              <div id="reportbody" class="report-body">
                <div v-for="(itemChild,childkey) in item.logAuditaskResultDtoList" :key="childkey">
                  <template v-if="itemChild.type == 'bar'">
                    <el-col :span="item.col" :style="{height:item.height}">
                      <p class="audit-header">{{ itemChild.auditTaskName }}</p>
                      <div :style="{height:item.chartHeight,width:'100%',textAlign:'center',position:'relative'}">
                        <img :src="barimg" :style="{maxHeight:'100px',maxWidth:'90px',position: 'absolute',top: '50%',left: '50%',transform:'translate(-50%,-50%)'}">
                      </div>
                    </el-col>
                  </template>
                  <template v-else-if="itemChild.type == null">
                    <el-col :span="item.col" :style="{height:item.height}">
                      <p class="audit-header">{{ itemChild.auditTaskName }}</p>
                      <div :style="{height:item.chartHeight,width:'100%',textAlign:'center',position:'relative'}">
                        <div :style="{textAlign:'center'}">
                          <img src="../assets/img/icon_zanwu.png" alt="" :style="{maxHeight:'100px',maxWidth:'90px',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="item.col" :style="{height:item.height}">
                      <p class="audit-header">{{ itemChild.auditTaskName }}</p>
                      <div :style="{height:item.chartHeight,width:'100%',textAlign:'center',position:'relative'}">
                        <img :src="lineimg" :style="{maxHeight:'90px',maxWidth:'90px',position: 'absolute',top: '50%',left: '50%',transform:'translate(-50%,-50%)'}">
                      </div>
                    </el-col>
                  </template>
                  <template v-else-if="itemChild.type == 'pie'">
                    <el-col :span="item.col" :style="{height:item.height}">
                      <p class="audit-header">{{ itemChild.auditTaskName }}</p>
                      <div :style="{height:item.chartHeight,width:'100%',textAlign:'center',position:'relative'}">
                        <img :src="pieimg" :style="{maxHeight:'100px',maxWidth:'90px',position: 'absolute',top: '50%',left: '50%',transform:'translate(-50%,-50%)'}">
                      </div>
                    </el-col>
                  </template>
                  <template v-else-if="itemChild.type == 'mapScatter'">
                    <!-- <div :style="{width:item.width,height:item.height}"> -->
                    <el-col :span="item.col" :style="{height:item.height}">
                      <p class="audit-header">{{ itemChild.auditTaskName }}</p>
                      <div :style="{height:item.chartHeight,width:'100%',textAlign:'center',position:'relative'}">
                        <img :src="mapimg" :style="{maxHeight:'100px',maxWidth:'90px',position: 'absolute',top: '50%',left: '50%',transform:'translate(-50%,-50%)'}">
                      </div>
                    </el-col>
                  </template>
                  <template v-else-if="itemChild.type == 'radar'">
                    <el-col :span="item.col" :style="{height:item.height}">
                      <p class="audit-header">{{ itemChild.auditTaskName }}</p>
                      <div :style="{height:item.chartHeight,width:'100%',textAlign:'center',position:'relative'}">
                        <img :src="radarimg" :style="{maxHeight:'100px',maxWidth:'90px',position: 'absolute',top: '50%',left: '50%',transform:'translate(-50%,-50%)'}">
                      </div>
                    </el-col>
                  </template>
                  <template v-else-if="itemChild.type == 'table'">
                    <el-col :span="item.col" :style="{height:item.height}">
                      <p class="audit-header">{{ itemChild.auditTaskName }}</p>
                      <div :style="{height:item.chartHeight,width:'100%',textAlign:'center',position:'relative'}">
                        <img :src="tableimg" :style="{maxHeight:'100px',maxWidth:'90px',position: 'absolute',top: '50%',left: '50%',transform:'translate(-50%,-50%)'}">
                      </div>
                    </el-col>
                  </template>
                </div>
              </div>
            </el-row>
          </el-col>
        </el-row>
        <el-row v-else>
          <div :style="{height:'560px',width:'100%',textAlign:'center',position:'relative'}">
            <div class="nodata_text">
              <span class="el-table__empty-text">暂无数据</span>
            </div>
          </div>
        </el-row>
      </template>
    </manager-ui>
    <transition>
      <router-view />
    </transition>
  </div>
</template>
<script>
// import table from '@ability/mixins/table'
// import staticsData from '@ability/mixins/staticsData'
import sourceData from './data'
import { getChartList } from '../api/statistical-reports-manage'
export default {
  components: {},
  data() {
    return JSON.parse(JSON.stringify(sourceData))
  },
  computed: {
    searchData() {
      return {
        taskTypeList: this.taskTypeList,
        logTypeList: this.logTypeList,
        analyzeLogTimingList: this.analyzeLogTimingList,
        chartTypeList: this.chartTypeList
      }
    }
  },
  created() {
    this.search()
  },
  methods: {
    searchClick() {
      this.search()
    },
    // 任务名称改变时更新
    changeAuditTaskName(event, oldVal) {
      if (oldVal != event.target.value) {}
    },
    reset() {
      Object.assign(this.$data, this.$options.data())
      this.search()
    },
    // 查询操作
    search() {
      if (this.qureyParam.createTime != null) {
        this.qureyParam.createTimeEnd = this.qureyParam.createTime[1]
        this.qureyParam.createTimeStart = this.qureyParam.createTime[0]
      }
      this.loading = true
      getChartList({
        logAudireportConfMap: this.qureyParam,
        page: this.page
      }).then(resp => {
        if (resp.data.returnCode == '0') {
          this.chartListData = resp.data.data.list // 图表列表
          for (let i = 0; i < this.chartListData.length; i++) {
            const item = this.chartListData[i]; let chartHeight = ''; const chartWidth = ''; let Width = ''; let Height = ''; let Col = null; let textHeight = ''
            chartHeight = this.eachHeight * (24 / item.rowNum) - 20 + 'px'
            Width = 100 / item.culumnNum + '%'
            Col = 24 / item.culumnNum
            Height = this.eachHeight * (24 / item.rowNum) - 1 + 'px'
            textHeight = (this.eachHeight * (24 / item.rowNum) - 30) / 2 - 16 + 'px'
            this.$set(this.chartListData[i], 'chartHeight', chartHeight)
            this.$set(this.chartListData[i], 'width', Width)
            this.$set(this.chartListData[i], 'height', Height)
            this.$set(this.chartListData[i], 'textHeight', textHeight)
            this.$set(this.chartListData[i], 'col', Col)
          }
          this.loading = false
          this.page.current = resp.data.data.page.current
          this.page.size = resp.data.data.page.size
          this.page.total = resp.data.data.page.total
        }
      }, error => {
        this.loading = false
        this.$message.error(error.returnMsg)
      })
    },
    enlargeOper(item) {
      const param = item
      // /, params: { chartParams: param }
      // this.$router.push({ name: 'generateLargeChart'})
      this.$router.push({ name: 'statisticalReportAmplification', params: item })
    }
  }
}
</script>
<style lang="scss" scoped>
  .nodata_text{
    text-align:center;
    height:20px;
    line-height:20px;
    font-size:12px;
    /* background:#DFDFDF; */
    width:80px;
    padding:3px;
    color:#838383;
    font-weight:500;
    border-radius:3px;
    position:absolute;
    top:60%;
    left:50%;
    transform:translate(-50%,-50%);
  }
.textCss{
  color:#838383;
  font-weight:500;
  height:16px;
  line-height:16px;
  width:80px;
  text-align:center;
  font-size:12px;
  background:#DFDFDF;
  padding:3px;
  border-radius:3px
}
.colcss{
  padding:3px;
  font-size:14px;
}
.audit-header{
  font-size:12px;
  line-height:20px;
  height:20px;
}
.boxcard{
  width:100%;
  height:330px;
  box-shadow:1px 1px 2px #cccccc;
  border:1px solid #dfdfdf;
  border-radius:3px;
  text-align:center;
}
.report-header{
  width:98%;
  height:30px;
  font-size:14px;
  border-bottom:1px solid #dedfdf
}
.report-body{
  height:300px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.box-cards .el-card__body{
  padding:6px
}
.task-name .el-input__inner{
  width:auto;
  margin: 3px 0 2px 0px;
  font-weight:500;
  position: relative;
  text-shadow: 0 -1px rgba(0,0,0,0.5);
  line-height: 28px;
  height:28px;
  // background: #355681;
  // background: rgba(53,86,129, 0.8);
  border: 1px solid #fff;
  padding: 3px 10px;
  color: #343434;
  border-radius: 2px 6px 2px 6px;
  // box-shadow: inset 0 0 3px rgba(53,86,129, 0.5);
  font-family: 'Muli', sans-serif;
}
.task-name .el-input__inner:hover{
  cursor:pointer;
  border:1px solid #fff;
}
.col_wrap_div {
  padding:20px;
  cursor:pointer;
}
.col_wrap_div .pic {
  border:1px solid rgb(231,231,231);
  margin:10px 50px 10px;
  text-align: center;
  vertical-align:middle;
}
.col_wrap_div .pic svg {
  height:100%;
  width:70%;
  color:rgb(32,160,255);
}
</style>
