<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { isEmpty, getAssetsFile } from '@/utils';

const props = defineProps({
  data: {
    type: Array,
    required: true,
    default: () => [],
  },
  title: {
    type: String,
    required: true,
    default: () => '',
    validator: (items) => {
      return items;
    },
  },
  showImage: {
    type: Boolean,
    default: false,
  },
  imageList: {
    type: Array,
    default: () => [],
  },
});
</script>

<template>
  <div>
    <el-card style="border-radius: 16px; min-height: 316px">
      <div class="my-card-title" style="">{{ title }}</div>
      <div v-for="(item, index) in data" :key="index" class="show-data-box">
        <div class="left-title">{{ item.title }}:</div>
        <div :style="{ color: item.status == '0' ? '#FE4066' : '#25BF82' }">{{ item.statusText }}</div>
      </div>
      <div v-if="showImage">
        <p style="font-size: 14px; text-align: left; color: #000000; margin-bottom: 10px">灌溉记录:</p>
        <el-image
          style="width: 100%"
          :src="imageList[0]"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="imageList"
          show-progress
          :initial-index="4"
          fit="cover"
        />
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.my-card-title {
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  color: #000;
  margin-bottom: 16px;
}
.show-data-box {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin: 7px 0;
  color: #000000;
}
</style>
