<template>
  <div id="index">
    <dv-full-screen-container class="bg">
      <dv-loading v-if="loading">加载中...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 style="width:33.3%;height:.0425rem;" :color="['#568aea', '#131E88']"/>
          <div class="d-flex jc-center">
            <dv-decoration-8 :color="['#568aea', '#131E88']" style="width:2.5rem;height:.425rem;" />
            <div class="title">
              <span class="title-text">库内作业监控平台</span>
            </div>
            <dv-decoration-8
              :reverse="true"
              :color="['#568aea', '#131E88']"
              style="width:2.5rem;height:.425rem;"
            />
          </div>
          <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" :color="['#568aea', '#131E88']"/>
        </div>
        <div class="main-header">
          <div class="mh-left">
          </div>
          <div class="mh-middle">
            <dv-decoration-5 style="width: 500px;height: 30px;margin-bottom: 5px;" :color="['#568aea', '#131E88']"/>
          </div>
          <div class="mh-right" style="display: flex;"> 
            <a-badge :count="count" style="margin-left:250px;margin-right: 20px;font-size: 45px;cursor:pointer;">
              <a-icon type="bell" @click="openMessage"/>
            </a-badge>
            <dv-border-box-2 style="width: 120px; height: 50px; line-height: 50px; text-align:center;cursor:pointer;">
              <div @click="queryGoodsData">综合查询</div>
            </dv-border-box-2>
          </div>
        </div>
        
          
        <dv-border-box-1 class="main-container">
          <dv-border-box-10 class="left-chart-container">
            <div style="font-size: 0.35rem;width: 5.1rem;height: 1.225rem;line-height: 0.625rem; text-align: center; display: flex;">
              <span style="display: block;width: 2.55rem">今日入库<br>{{ inSum }}</span>
              <span style="display: block;width: 2.55rem">今日出库<br> {{ outSum }}</span>
            </div>
            <dv-decoration-2 style="height:10px;" />
            <centerLeft1 />
            <bottomLeft />
          </dv-border-box-10>

          <div class="center-chart-container">
            <div class="rmc-top-container">
            <dv-border-box-8>

              <center-cmp class="rmc-center-container"/>

            </dv-border-box-8>
  
              <dv-border-box-10 class="rmc-bottom-container">
                <Bottom-Charts />
              </dv-border-box-10>
               
            </div>
          </div>

          <div class="right-chart-container">
            <dv-border-box-10 class="rmctc-chart-1">
              <div style="font-size: 0.5rem;width: 5.1rem;height: 1.225rem;line-height: 0.645rem; text-align: center;">
                <span class="react-before"></span>
                <span class="text" style="display: block;">{{dateYear}}</span>
                <span class="text" style="display: block;">{{dateDay}}</span>
              </div>
              <dv-decoration-2 style="height:10px;" />
              <centerRight2 />
              <centerRight1 />
            </dv-border-box-10>
          </div>

        </dv-border-box-1>
        <totalQuery ref="query"/>
        <message-detail ref="message" />
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import { formatTime, check } from '../utils/index.js'
import centerLeft1 from "./centerLeft1";
import centerLeft2 from "./centerLeft2";
import centerRight1 from "./centerRight1";
import centerRight2 from "./centerRight2";
import center from "./center";
import centerCmp from './CenterCmp'
import bottomLeft from "./bottomLeft";
import bottomRight from "./bottomRight";
import BottomCharts from "./BottomCharts"
import centerChartBar from "../components/echart/center/centerChartBar"
import totalQuery from "./modal/TotalQuery"
import messageDetail from "./modal/MessageDetail"
import { getAction } from '@/api/manage'

export default {
  data () {
    return {
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      count: 0,
      outSum: 0,
      inSum: 0,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    };
  },
  components: {
    centerLeft1,
    centerLeft2,
    centerRight1,
    centerRight2,
    center,
    bottomLeft,
    bottomRight,
    BottomCharts,
    centerChartBar,
    totalQuery,
    centerCmp,
    messageDetail
  },
  mounted () {
    this.timeFn();
    this.cancelLoading();
    this.getData()
    setInterval(() => {
      this.getData()
    }, window._CONFIG['refreshTime'])
  },
  methods: {
    timeFn () {
      setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss');
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000)
    },
    cancelLoading () {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    getData() {
      getAction('/bigSunmmary/getMessageCount').then(res => {
        this.count = res.data
      })
      getAction('/bigSunmmary/getRecordByToday').then(res => {
        this.inSum = res.data.inSum
        this.outSum = res.data.outSum
      })
    },
    openMessage() {
      this.$refs.message.initData()
      this.$refs.message.visible = true
    },
    queryGoodsData() {
      this.$refs.query.initData()
      this.$refs.query.initStore()
      this.$refs.query.visible = true
    }
  }
};
</script>

<style lang="scss">
@import '../assets/scss/index.scss';
</style>

<style lang="less">
.main-container {
  height: calc(~"100% - 80px");

  .border-box-content {
    padding: 20px;
    box-sizing: border-box;
    display: flex;
  }
}

.main-header {
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

    .mh-left, .mh-right {
      width: 450px;
    }
  }

.left-chart-container {
  width: 24%;
  box-sizing: border-box;

  .border-box-content {
    flex-direction: column;
  }
}

.center-chart-container {
  width: 52%;
  padding-left: 5px;
  box-sizing: border-box;
}

.right-chart-container {
  width: 24%;
  padding-left: 5px;
  box-sizing: border-box;
}



.rmctc-left-container {
  width: 65%;
}

.rmctc-right-container {
  width: 40%;
  height: 99%;
}

.rmc-top-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.rmc-center-container {
  height: 60%;
}
.rmc-bottom-container {
  height: 40%;
}
.rmcc-top-center-container {
  display: flex;
  .border-box-content {
    flex-direction: column;
  }
}

.rmctc-chart-1, .rmctc-chart-2 {
  .border-box-content {
    flex-direction: column;
  }
}
</style>