<template>
  <a-row v-for="value in formData.item" :key="value.id">
    <a-col :span="24">
      <a-card :title="value.stationName" style="width: 100%" size="default">
        <a-row :gutter="16">
          <a-col class="gutter-row" :span="12" v-for="value2 in value.deviceList" :key="value2.id">
            <div class="gutter-box" :id="value2.deployCode" style="width: 100%;text-align: center;">
              <div class="video_head" style="">
                {{value2.deployDes}}
              </div>
                <div  style="cursor:pointer" @click="handleMonitor(value2)">
                <img src="/resource/img/cameras.jpg" class="app-loading-logo" alt="Logo" style="width: 100%;text-align: center;"/>
               </div>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
  </a-row>
  <!--监控-->
  <MonitorDetailModal ref="monitorRegisterModal" @success="handleSuccess"/>
</template>

<script lang="ts" setup>
  import EZUIKit from 'ezuikit-js';
  import { ref, onMounted, reactive } from 'vue';
  import MonitorDetailModal from './MonitorModal.vue';
  import { getCamList } from '../deploy/SurvDeviceDeploy.api';
  const ysToken = ref('');
  const formData = reactive<Record<string, any>>({
    item: [],
  });
  //注册model
  const monitorRegisterModal = ref();
  onMounted(() => {
    getCams();
  });

  /**
   * 查看监控
   */
  function handleMonitor(record) {
    // monitorRegisterModal.value.disableSubmit = false;
    monitorRegisterModal.value.statistic(record);
  }

  /**
   * 获取设备列表
   */
  function getCams() {
    getCamList().then((res) => {
      if (res.code == 200) {
        formData.item = res.result;
        res.result.forEach((val) => {
          val.deviceList.forEach((itm) => {

          });
        });
      }
    });
  }
</script>

<style lang="less" scoped>
.video_head {
  border: 1px solid #eee;
  border-radius: 4px 4px 0 0;
  padding: 0 12px;
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;

  .video_tit {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .video_ctl {
    width: 24px;
    height: 40px;
    cursor: pointer;
    background: url('../../assets/video_icon.png') no-repeat right center;
  }
}
</style>
