<template>
  <section>
    <common>
      <template #main>
        <div>
          <devices :title="'智能配肥设备'" :devices="devices"></devices>
        </div>
        <div style="display: flex; justify-content: space-between; margin-top: 10px">
          <stream :title="'施肥监测实时监控'" :devices="devices" style="width: 60%; height: fit-content"></stream>
          <el-card style="width: calc(40% - 20px); border-radius: 16px; padding: 10px">
            <div style="font-size: 16px; font-weight: bold; text-align: left">配肥分析</div>
            <div class="plantStatus">
              <div class="leftKey">土壤酸碱度:</div>
              <div class="rightValue">正常</div>
            </div>
            <div class="plantStatus">
              <div class="leftKey">土壤养分含量:</div>
              <div class="errorValue">N 元素不足</div>
            </div>
            <div class="plantStatus">
              <div class="leftKey">光照强度:</div>
              <div class="errorValue">偏高</div>
            </div>
            <div class="plantStatus">
              <div class="leftKey">风速:</div>
              <div class="rightValue">微风</div>
            </div>
            <div class="plantStatus">
              <div class="leftKey">作物生长状态:</div>
              <div class="rightValue">良好</div>
            </div>
            <div class="plantStatus">
              <div class="leftKey">设备状态:</div>
              <div class="rightValue">正常</div>
            </div>
            <div class="plantStatus">
              <div class="leftKey">肥料储备:</div>
              <div class="rightValue">充足</div>
            </div>
          </el-card>
        </div>
      </template>
    </common>
  </section>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } 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 * as echarts from 'echarts';
/* --------------- data --------------- */
// #region
const devices = ref([
  {
    name: 'A-001',
    icon: 'fertilizerTank',
    detail: 'A区-监控设备9',
    status: '0',
    id: 0,
  },
  {
    name: 'A-002',
    icon: 'fertilizerTank',
    detail: 'A区-监控设备66',
    status: '0',
    id: 1,
  },
  {
    name: 'A-003',
    icon: 'fertilization',
    detail: 'A区-监控设备7',
    status: '0',
    id: 2,
  },
  {
    name: 'A-004',
    icon: 'mixingTank',
    detail: 'A区-监控设备1',
    status: '-1',
    id: 3,
  },
  {
    name: 'A-005',
    icon: 'mixingTank',
    detail: 'A区-监控设备5',
    status: '-1',
    id: 4,
  },
  {
    name: 'A-006',
    icon: 'mixingTank',
    status: '0',
    detail: 'A区-监控设备21',
    id: 5,
  },
  {
    name: 'A-007',
    icon: 'mixingPump',
    status: '0',
    detail: 'A区-监控设备4',
    id: 6,
  },
  {
    name: 'A-008',
    detail: 'A区-监控设备3',
    icon: 'mixingPump',
    status: '0',
    id: 7,
  },
  {
    name: 'A-009',
    detail: 'A区-监控设备9',
    icon: 'mixingPump',
    status: '0',
    id: 8,
  },
  {
    name: 'A-010',
    detail: 'A区-监控设备10',
    icon: 'solenoidValve',
    status: '0',
    id: 9,
  },
  {
    name: 'A-008',
    detail: 'A区-监控设备3',
    icon: 'solenoidValve',
    status: '0',
    id: 10,
  },
  {
    name: 'A-008',
    detail: 'A区-监控设备3',
    icon: 'solenoidValve',
    status: '0',
    id: 11,
  },
]);
// #endregion
/* --------------- methods --------------- */
// #region

// #endregion
</script>

<style lang="scss" scoped>
.plantStatus {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin: 7px 0;
  .leftKey {
    color: #000000;
  }
  .rightValue {
    color: #25bf82;
  }
}
</style>
