<template>
  <div id="data-view">
    <!-- <dv-full-screen-container> -->
      <div id="dv-full-screen-container" style="width: 100%;height: 100%;position: fixed;overflow: hidden;">

      
      <top-header :Name = "showData.name" :Times = "showData.times"/>

      <div class="main-content" v-if="loadingDone">
        <!-- <digital-flop :TodayData="showData.todayData" :Type="type"/> -->
        <div class="block-left-right-content">
          <scroll-board :ScrollList= "showData.scrollList" />
          <div class="block-top-bottom-content">
            <div class="block-top-content" style="height:100%;display: flex;flex-wrap: wrap;">
              <!-- <rose-chart v-if="chartData1" pieId="roseChart1" :chartData="chartData1"/>
              <rose-chart v-if="chartData2" pieId="roseChart2" :chartData="chartData2"/>
              <rose-chart v-if="chartData3" pieId="roseChart3" :chartData="chartData3"/>
              <bar-chart style="height: 45%;"  pieId="roseChart3" :chartData="chartData4"/> -->
              <template v-for="(item,index) in totalData">
                  <rose-chart  :key="index" v-if="item.setting.reportType == 'pie'" :pieId="'roseChart'+index" :chartData="item" :style="'height:'+item.setting.height+';width:'+item.setting.width+';'"/>
                  <bar-chart :key="index" v-if="item.setting.reportType == 'bar'" style="height: 45%;"  pieId="roseChart3" :chartData="item" :style="'height:'+item.setting.height+';width:'+item.setting.width+';'"/>
              </template>
            </div>
           
          </div>
          
        </div>
        <scroll-board-bottom :ScrollList= "showData.scrollList" />
      </div>
      <dv-loading v-else>Loading...</dv-loading>
      <!-- <div style="height: 5%;width: 100%;"></div> -->
     
    <!-- </dv-full-screen-container> -->
  </div>
  </div>
</template>

<script>
import topHeader from './topHeader'
// import digitalFlop from './digitalFlop'
import rankingBoard from './rankingBoard'
import roseChart from './roseChart'
import waterLevelChart from './waterLevelChart'
import scrollBoard from './scrollBoard'
import scrollBoardBottom from './scrollBoardBottom'
import cards from './cards'
import rightTotal from './rightTotal.vue'
import barChart from './barChart.vue'
export default {
  name: 'DataView',
  components: {
    topHeader,
    // digitalFlop,
    rankingBoard,
    roseChart,
    waterLevelChart,
    scrollBoard,
    scrollBoardBottom,
    cards,
    rightTotal,
    barChart
  },
  data () {
    return {
      type: '',
      setting: {},
      chartData1:null,
      chartData2:null,
      chartData3:null,
      totalData: [],
      todayData: [],
      showData: {
        name: '永盛陶瓷智能数据看榜',
        times: [],
        leftData: [],
        reportedList: [],
        scrollList: [],
        todayData: [],
        bottomData: [],
        allNum: 0,
        reportedNum: 0
      },
      loadingDone: false
    }
  },
  created () {
    this.createdData()
  },
  methods: {
    createdData () {
      let that = this

      this.$api.post2('/api/web/GetScreenReport?category=A1').then(res => {
        if (res.code === '200') {
          let data = res.data;
          this.chartData1 = data.reportSettings[0];
          this.chartData2 = data.reportSettings[1];
          this.chartData3 = data.reportSettings[2];
          if(data.reportSettings.length>0){
            data.reportSettings.forEach(item=>{
              if(item.setting.reportType != 'rank'){
                this.totalData.push(item)
              }
            })
          }
          if(data.reportSettings[3].data.length>0){
            this.showData.scrollList = data.reportSettings[3].data.map(item => {
              return [item.employee_name,item.proc_name,item.value]
            });
          }
          this.showData.name = '永盛大屏数据看板'
          this.loadingDone = true
        }
      });
    },
    dinnerDataFomat () {
      this.showData.name = this.setting.dinnerName
      this.showData.times = [this.setting.starttime, this.setting.endtime]
      this.showData.allNum = this.dinnerData.details.length
      // 深拷贝 并且 往对象里添加detail
      this.showData.leftData = JSON.parse(JSON.stringify(this.dinnerData.workItemFullData))
      this.showData.leftData.forEach(item => { item.details = [] })
      this.showData.bottomData = JSON.parse(JSON.stringify(this.showData.leftData))
      // 获取已上报数据列表
      let reportedList = this.dinnerData.details.filter((item) => {
        return item.reportID
      })
      // 右侧轮播列表
      // this.showData.scrollList = reportedList.map((item) => {
      //   return [item.reportDate, item.className, item.workItemName, item.reportEmployeeName]
      // })
      this.showData.reportedNum = this.showData.scrollList.length
      // 一维数组 转换为 二维数组
      // let categoryList = Object.values(reportedList.reduce((res, item) => {
      //   res[item.workItemID] ? res[item.workItemID].push(item) : res[item.workItemID] = [item]
      //   return res
      // }, {}))
      // console.log(categoryList, this.showData.leftData, '+++++++++')
      reportedList.forEach((item, index) => {
        this.showData.leftData.forEach((i, idx) => {
          if (item.workItemID === i.ID) {
            i.details.push(item)
          }
        })
      })
      this.dinnerData.details.forEach((item, index) => {
        this.showData.bottomData.forEach((i, idx) => {
          if (item.workItemID === i.ID) {
            i.details.push(item)
          }
        })
      })
      this.loadingDone = true
    },
    // totalDataFomat () {
    //   this.showData.name = '各个食堂运营情况总结'
    //   this.showData.allNum = 0
    //   this.showData.reportedNum = 0
    //   this.showData.times = [this.setting.starttime, this.setting.endtime]
    //   this.showData.leftData = this.totalData.total.filter(item => {
    //     return !!item.dinnerName
    //   })
    //   this.totalData.total.forEach((item) => {
    //     this.showData.allNum += item.quantity
    //     this.showData.reportedNum += item.quantityDone
    //   })
    //   this.loadingDone = true
    // },
    getToday () {
      var today = new Date() // 创建一个表示当前时间的Date对象
      var year = today.getFullYear() // 获取当前年份（四位数）
      var month = today.getMonth() + 1 // 获取当前月份（注意月份从0开始计算，所以需要加上1）
      var day = today.getDate() // 获取当前日期
      return year + '-' + month + '-' + day
    }
  }
}
</script>

<style lang="less">
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url('./img/bg.png');
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .block-left-right-content {
    // flex: 1;
    height: 70%;
    display: flex;
    margin-top: 0.2rem;
  }

  .block-top-bottom-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin-left: 0.2rem;
  }

  .block-top-content {
    height: 55%;
    display: flex;
    flex-grow: 0;
    box-sizing: border-box;
    // padding-bottom: 20px;
  }
}
</style>
