<template>
  <div
      v-if="images && images.length > 0"
      @click.stop="clickAction"
      :class="[selected.length > 0 && selected[0] == treeId ? 'active' : '']"
      class="container"
  >
    <div class="head">
      <!-- <a :id="'tree_' + treeId" />编号 : {{code}}
      <el-radio-group @click.stop v-model="isSource">
        <el-radio :value="true">原始图片</el-radio>
        <el-radio :value="false">结果图片</el-radio>
      </el-radio-group> -->
      <div class="name">先锋表型 {{code}}</div>
    </div>
    <div class="listView">
      <template v-for="(image, index) in images" :key="image.url">
        <div class="item">
          <!-- <div class="date">{{image.uploadDate}}</div> -->
          <div class="periodName">{{ image.periodName }}</div>
          <div class="img">
            <!-- <img
                loading="lazy"
                :src="
                (isSource
                  ? config.base_img_url2 + image.filename
                  : image.resFilename) + resize
              "
            /> -->
           <DrawBox v-if="switchValue&&image.markText" :sourceData="image.markText" width="255" height="230"></DrawBox>
            <img
                loading="lazy"
                :src="config.base_img_url2 + image.filename + resize
              "
            />
            <div class="watermark">
              {{image.uploadDate}}
              <!-- <div class="center">
                <div class="time">
                  <div class="year">
                    <span>{{new Date(image.uploadDate).getFullYear()}}</span>
                    <div class="divider"></div>
                  </div>
                  <div class="date1">{{new Date(image.uploadDate).getMonth() + 1}}/{{new Date(image.uploadDate).getDate()}}</div>
                </div>
                <div class="weather">
                  <div class="temperature">
                    <div class="num">
                      <div>32℃</div>
                      <img src="@/assets/img/line.png" alt="" />
                      <div>26℃</div>
                    </div>
                  </div>
                  <div class="temperature">
                    <div class="num">
                      <div>60%</div>
                      <img src="@/assets/img/line.png" alt="" />
                      <div>0.34ｍl</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="right" v-if="index % 2 == 0">
                <div class="yellow circle">病虫害</div>
                <div class="blue circle">二梢<br />杀虫</div>
              </div> -->
            </div>
          </div>
          <AttributeList
              class="attrs"
              :data="image"
              :attrField="attrField"
          ></AttributeList>
          <el-icon @click.stop="preview(index)" class="search cursor-pointer"
          ><Search
          /></el-icon>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import config from "@/api/config.js";
import AttributeList from "../global/AttributeList";
import DrawBox from "@/components/drawBox.vue";

let resize = "?x-oss-process=image/resize,m_fill,w_300";
let emits = defineEmits(["clickAction"]);
let isSource = ref(true); //是否是原始图片
const props = defineProps({
  code: { type: String, require: true },
  treeId: { type: Number, require: true },
  images: { type: Array, require: true },
  selected: { type: Array, require: true },
  periodId: { type: Number, require: true },
  attrField: { type: String, require: true },
  switchValue: { type: Boolean, require: true },
});

const curDate = new Date()
const curYear = curDate.getFullYear()
const curMonth = curDate.getMonth() + 1
const curDay = curDate.getDate()

function clickAction() {
  emits(
      "clickAction",
      "treeImgList",
      props.selected.length > 0 && props.selected[0] == props.treeId
          ? null
          : props.treeId
  );
}
function preview(index) {
  const urls = [];
  for (let item of props.images) {
    urls.push(
        isSource.value ? config.base_img_url2 + item.filename : item.resFilename
    );
  }
  emits("preview", urls, props.images, index);
}
</script>

<style lang="scss" scoped>
.container {
  background: #032c39;
  border-radius: 4px;
  border: 2px solid #51e9f060;
  box-sizing: border-box;
  padding: 2px 2px 2px 2px;
  margin-bottom: 10px;
}
.active {
  background: #044053;
  border: 2px solid rgba(81,233,240,0.82);
}
.head {
  width: 100%;
  color: #b4fffb;
  font-weight: bold;
  padding: 10px 10px 0px 10px;
  .name {
    padding: 8px 6px;
    background: url("@/assets/img/znxy/text_bg.png") no-repeat center center /
      100% 100%;
    width: 413px;
    font-weight: 800;
    font-size: 15px;
    color: #00fff0;
  }
  // div{
  //   margin-left: 10px;
  //   display:inline-block;
  // }
}

.listView {
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 10px;
  box-sizing: border-box;
  white-space: nowrap;
  .watermark {
    padding: 5px 10px;
    .center {
      margin-right: 0%;
      .time {
        font-size: 13px;
        font-weight: 400;
        margin-right: 0%;
        letter-spacing: -1px;
        .year{
          -webkit-text-stroke: 0.5px #003c4e;
        }
        .divider {
          width: 32px;
          height: 1px;
          background: #ffffff;
          border: 1.5px solid #003c4e;
        }
        .date1 {
          font-size: 19px;
          -webkit-text-stroke: 1.1px #003c4e;
        }
      }
      .weather {
        font-size: 15px;
        letter-spacing: -1px;
        -webkit-text-stroke: 0.8px #003c4e;
        .num {
          margin-left: 5px;
          line-height: 12px;
          img {
            height: 5px;
            margin-bottom: 3px;
          }
        }
      }
    }
    .right {
      .circle {
        width: 50px;
        height: 50px;
        font-size: 13px;
        padding: 5px;
        margin-left: 8px;
        -webkit-text-stroke: 0.4px #003c4e;
        box-sizing: border-box;
      }
      .yellow {
        padding: 11px 2px;
        line-height: 25px;
      }
    }
  }
  .item {
    display: inline-block;
    position: relative;
    width: 255px;
    height: 230px;
    margin: 0 10px 0 0;
    box-sizing: border-box;
    .date {
      position: absolute;
      color: #f4f4f4;
      font-weight: bold;
      left: 5px;
      bottom: 5px;
      z-index: 1;
    }
    .periodName {
      position: absolute;
      color: #f4f4f4;
      font-weight: bold;
      left: 5px;
      top: 5px;
      z-index: 1;
    }
    .img {
      position: absolute;
      z-index: 0;
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .attrs {
      position: absolute;
      z-index: 1;
      right: 0px;
      bottom: 0px;
      display: flex;
      flex-direction: column-reverse;
    }
    .search {
      position: absolute;
      color: #ffffff;
      background-color: #00000090;
      font-size: 20px;
      top: 0px;
      right: 0px;
      z-index: 2;
    }
  }
  .bigImg {
    width: 1024px;
    height: 768px;
  }
}
</style>
