<template>
  <div
    class="data-view"
    :style="{backgroundImage: `url(${DataViewBG})`}"
  >
    <!-- 头部部分  -->
    <div
      class="data-view-header"
      :style="{backgroundImage: `url(${DataViewHeaderBg})`}"
    >
      <div class="identifier data-view-header-item">
        <img style="width: 23px; height: 23px;" :src="icon" alt="">
        <span style="padding-left: 10px;">{{ identifier }}</span>
      </div>
      <h1 class="YouSheBiaoTiHei data-view-header-title data-view-header-item" style="text-align: center;">{{
          title
        }}</h1>
      <div class="data-view-header-time data-view-header-item">
        <img @click="$emit('leave')" style="width: 26px; height: 26px; cursor: pointer;" :src="ICUNFullscreen" alt="">
        <div style="width: 26px;"/>
        <span>{{ date }}</span>
      </div>
    </div>

    <!-- 中间的图表       -->
    <div class="data-view-charts-body">
      <slot name="charts"></slot>
    </div>

    <!-- 内容  -->
    <div class="data-view-tables-body">
      <!-- 左边的表格     -->
      <div class="left-table">
        <slot name="left-table"/>
      </div>

      <!-- 中间的内容     -->
      <div class="middle">
        <!-- 中间的表格      -->
        <slot name="middle-table"/>
      </div>

      <!-- 右边的表格     -->
      <div class="right-table">
        <slot name="right-table"/>
      </div>
    </div>

  </div>
</template>

<script>
import DataViewBG from '@/assets/images/data-view-bg.png'
import DataViewHeaderBg from '@/assets/images/data-view-header-bg.png'
import ICUNFullscreen from '@/assets/images/ic_unfullscreen.png'
import { getWeek, parseTime } from '@/utils/ruoyi'

export default {
  components: {},
  props: {
    // 左上角的标识
    identifier: {
      type: String
    },
    // 左上角的图标
    icon: {
      type: String
    },
    // 大标题
    title: {
      type: String
    }
  },
  data() {
    return {
      ICUNFullscreen,
      DataViewBG,
      DataViewHeaderBg,
      date: parseTime(new Date(), `{y}-{m}-{d} {h}:{i}:{s}`) + ' ' + getWeek()
    }
  },
  mounted() {
    // 每秒更新一次时间
    setInterval(() => {
      this.date = parseTime(new Date(), `{y}-{m}-{d} {h}:{i}:{s}`) + ' ' + getWeek()
    }, 1000)
  }
}
</script>
<style scoped lang="scss">
.data-view {
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;

}

.data-view-header {
  display: flex;
  justify-content: space-between;
  background-size: contain;
  background-repeat: no-repeat;
  height: 6vw;
  padding: 0 20px 0 20px;

  .data-view-header-item {
    width: 33%;
  }

  .identifier {
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 25px;
    color: #FFFFFF;
    display: flex;
    flex-direction: row;
    margin-top: 14px;
  }

  .data-view-header-time {
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 25px;
    color: #FFFFFF;
    display: flex;
    flex-direction: row;
    margin-top: 14px;
    justify-content: flex-end;
  }

  .data-view-header-title {
    color: #D4DCFF;
    font-size: 2.5vw;
  }

}

.data-view-charts-body {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
  width: 75vw;
  align-self: center;
}

.data-view-tables-body {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 30px;
  padding: 0 20px 20px 20px;
  overflow: hidden;
  height: 100%;

  .left-table {
    width: 32.5%;
  }

  .middle {
    width: 32.5%;
  }

  .right-table {
    width: 32.5%;

  }
}

</style>
