<!-- 5号仓库 -->
<template>
  <div class="flex flex-col">
    <!-- 标题 -->
    <Toolbar />

    <div class="flex flex-col flex-1 con">
      <div class="flex justify-between floor1">
        <!-- 大事记 -->
        <Memorabilia /> 
        <!-- 饱和量 -->
        <Saturate />
      </div>

      <div class="flex-1 iframe-wrap">
        <!-- <iframe src="https://www.tall.wiki/wl/0"></iframe> -->
      </div>

      <div class="flex justify-between floor3">
        <!-- 吞土量实时统计 -->
        <Amount />
        <!-- 仓库吞吐量对比图 -->
        <Throughput />
      </div>
      <!-- 曲线对比图 -->
      <div class="floor4">
        <Curve />
      </div>
    </div>
    <!-- 右侧按钮 -->
    <div class="yq-btns">
      <div
        :class="item.active ? 'active' : ''"
        :key="index"
        @click="$router.push({path:item.path, query:item.param})"
        class="btn"
        v-for="(item, index) in urls"
      >{{ item.name }}</div>
    </div>
    <!-- 悬浮监控 -->
    <img @click="show = true" class="monitor" src="../assets/monitor.png" style />

    <div class="vedio" v-show="show">
      <div class="head">
        <div class="camera">摄像头监控视频</div>
        <img @click="show = false" class="close" src="../assets/close.png" />
      </div>
      <div class="frame">
        <!-- <img class="frame1" src="../assets/vedio-img.png" /> -->
        <div class="frame1">
          <iframe
            frameborder="0"
            height="100%"
            scrolling="no"
            src="https://www.tall.wiki/kangfu-v1/?key=230659446"
            width="100%"
          ></iframe>
          <!-- 生产   https://www.tall.wiki/kangfu-v1/?key=E83239936 -->
          <!-- 测试   https://www.tall.wiki/kangfu-v1/?key=230659446 -->
          <div class="screen">
            <img @click="$router.push('/vs')" class="frame2" src="../assets/fullScreen.png" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Memorabilia from 'comp/memorabilia.vue'
import Toolbar from 'comp/toolbar.vue'
import Saturate from 'comp/saturate.vue'
import Throughput from 'comp/throughput.vue'
import Amount from 'comp/amount.vue'
import Heat from 'comp/heat.vue'
import Curve from 'comp/curve.vue'
import { getWarehouses } from 'api/api'

export default defineComponent({
  components: {
    Toolbar,
    Saturate,
    Amount,
    Heat,
    Curve,
    Memorabilia,
    Throughput
  },

  data() {
    return {
      show: false,
      urls: [
        {
          path: '/jht',
          param: { parkId: '1', warehouseId: null },
          name: '晋恒通园区',
          active: true,
        },
        {
          path: '/xh',
          param: { parkId: '2', warehouseId: null },
          name: '现海园区',
          active: false,
        },
        {
          path: '/yj',
          param: { parkId: '1', warehouseId: '6' },
          name: '应急仓库',
          active: false,
        },
        {
          path: '/5',
          param: { parkId: '2', warehouseId: '7' },
          name: '5号仓库',
          active: false,
        },
      ],
    }
  },

  created() {
    this.getWarehouses()
  },

  methods: {
    // 获取仓库信息
    async getWarehouses() {
      try {
        const data = await getWarehouses({ parkId: 1 })
        console.log('data: ', data)
      } catch (error) {
        console.log('error: ', error)
      }
    },
  },
})
</script>

<style>
@import './style.css';
</style>
