<template>
  <section>
    <common>
      <template #main>
        <div>
          <devices :title="'智能浸种设备'" :devices="devices"></devices>
        </div>
        <div style="display: flex; align-items: stretch; justify-content: space-between; margin-top: 20px">
          <stream :title="'浸种监测实时监控'" :devices="devices" style="width: 60%; margin-right: 20px; height: fit-content"></stream>
          <DataDisplay :title="'浸种分析'" :data="rightData" :show-image="true" :image-list="srcList" style="flex: 1"></DataDisplay>
        </div>
      </template>
    </common>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Common from '../components/common.vue';
import Devices from '@/views/smartFarm/components/devices.vue';
import Stream from '@/views/smartFarm/components/stream.vue';
import DataDisplay from '@/views/smartFarm/components/dataDisplay.vue';

const devices = ref([
  {
    name: 'A-001',
    icon: 'tempSensor',
    detail: 'A区-监控设备9',
    status: '1', //  0: 离线 1: 正常 -1: 异常
    id: 0,
  },
  {
    name: 'A-003',
    icon: 'heater',
    detail: 'A区-监控设备7',
    status: '1',
    id: 2,
  },
  {
    name: 'A-005',
    icon: 'heat',
    detail: 'A区-监控设备5',
    status: '1',
    id: 4,
  },
  {
    name: 'A-007',
    icon: 'timer',
    status: '1',
    detail: 'A区-监控设备4',
    id: 6,
  },
  {
    name: 'A-009',
    detail: 'A区-监控设备9',
    icon: 'mixer',
    status: '1',
    id: 8,
  },
  {
    name: 'A-010',
    detail: 'A区-监控设备10',
    icon: 'liquidSensor',
    status: '1',
    id: 9,
  },
  {
    name: 'A-012',
    detail: 'A区-监控设备3',
    icon: 'disinfectionLamp',
    status: '1',
    id: 11,
  },
]);

const srcList = ref(['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg']);
const rightData = ref([
  {
    title: '温度', //左侧文本
    status: '1', //  0:不正常 1:正常
    statusText: '21℃ 正常', //左侧文本
  },
  {
    title: '湿度',
    status: '1',
    statusText: '18℃ 正常',
  },
  {
    title: '光照强度',
    status: '1',
    statusText: '正常',
  },
  {
    title: '浸泡液位',
    status: '1',
    statusText: '正常',
  },
  {
    title: '溶解氧含量',
    status: '1',
    statusText: '36% 正常',
  },
  {
    title: '酸碱度',
    status: '1',
    statusText: '6.7 正常',
  },
  {
    title: '设备状态',
    status: '1',
    statusText: '正常',
  },
  {
    title: '种子状态',
    status: '1',
    statusText: '出芽',
  },
]);
</script>

<style lang="scss" scoped></style>
