<template>
  <div class="list_box" @click="onGoDetail">
    <van-image width="80px" height="85px" :src="baseUrl" style="flex: 1" @click.stop="onClickImg(baseUrl)"
      v-if="baseUrl">
      <template v-slot:loading>
        <van-loading type="spinner" size="20" />
      </template>
    </van-image>
    <div class="detail_box">
      <div class="time_box" :style="{ marginLeft: item.zltp || item.tpId ? '2vw' : '0' }">
        <span>
          <van-icon name="clock-o" />
          &ensp;{{ item.zlfqsj || item.zlfssj }}
        </span>
        <span v-if="item.zldj">
          <van-tag type="danger" style="padding: 0.3vw 5vw; border-radius: 3vw" v-if="item.zldj == 10">红色</van-tag>
          <van-tag type="warning" style="padding: 0.3vw 5vw; border-radius: 3vw" v-else-if="item.zldj == 20">橙色
          </van-tag>
          <van-tag color="#ffcc40" style="padding: 0.3vw 5vw; border-radius: 3vw" v-else-if="item.zldj == 30">黄色
          </van-tag>
          <van-tag type="primary" style="padding: 0.3vw 5vw; border-radius: 3vw" v-else>蓝色</van-tag>
        </span>
      </div>

      <div class="detail_item" :style="{ marginLeft: item.zltp || item.tpId ? '2vw' : '0' }">
        <div class="title text_title">{{ item.zlbt || item.zlBt }}</div>
        <!-- <div>
					{{ item.zlnr }}
				</div> -->
        <div class="ststus" v-if="item.dqzt" :class="{
          djc: true,
          yfk: item.dqzt == '01',
          ddc: item.dqzt == '94',
          ywj: item.dqzt == '92' || item.dqzt == '93',
        }">
          {{ setDict(item.dqzt, dict.D_BZ_ZXZTAI) }}
        </div>
        <div>发送人：{{ item.ssbm }}-{{ item.zlfqr }}</div>
        <div v-if="item.dqzt == '92'">
          指令完成时间：{{ GetDateDiff(item.zlfqsj, item.dqztSj, "m") }}分钟
        </div>
        <div v-if="item.zlfsdd">
          <van-icon name="location" size="15px" color="#3e6ee8"></van-icon>
          <span>&nbsp;{{ item.zlfsdd }}</span>
        </div>
        <img src="../assets/images/czwc.png" class="zwzl_box" v-if="item.dqzt == '92' || item.dqzt == '93'" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { getDictList, setDict } from "../utils/dict";
import { getBase64, GetDateDiff } from "../utils/tools.js";
import router from "../router/index.js";
import { defineProps, ref, watch } from "vue";
import { ImagePreview } from "vant";
const props = defineProps({
  item: Object, //列表内容
  path: String, //跳转详情的路由
  dict: {
    type: Object,
    default: {
      D_BZ_ZXZTAI: [],
    },
  },
});
const baseUrl = ref("");
watch(
  () => props.item,
  (newValue) => {
    if ((Object.keys(newValue).length > 0 && newValue.zltp) || newValue.tpId)
      _getBase64(newValue);
  },
  { immediate: true, deep: true }
);
//预览图片
function onClickImg(url) {
  ImagePreview([url]);
}
//跳转
function onGoDetail() {
  router.push(`${props.path}`);
}
//获取base64地址
function _getBase64(item) {
  getBase64((res) => {
    baseUrl.value = res;
  }, item.zltp || item.tpId);
}
</script>

<style lang="scss" scoped>
@import "../assets/styles/mixin.scss";

.list_box {
  @include font_size($font_medium_s);
  @include font_color($font-color-theme);
  @include item_bottom_color($bottom-border-top-clore-theme);
  margin: 0vw 2vw 2vw 2vw;
  padding: 2vw;
  display: flex;

  .time_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .detail_box {
    flex: 3.5;

    .detail_item {
      position: relative;
      margin-top: 1vw;

      >div {
        line-height: 5.5vw;
      }
    }

    .title {
      @include font_size($font_medium);
      width: 100%;
      font-weight: 550;
      color: #507ce9;
    }
  }
}

.ststus {
  font-size: 10px;
  color: #fff;
  border-radius: 1vw;
  display: inline;
  padding: 1px 5px;
}

.dfk {
  color: rgb(242, 199, 6);
  border: 1px solid rgb(242, 199, 6);
}

.yfk {
  color: #3e6ee8;
  border: 1px solid #3e6ee8;
}

.ywj {
  color: #4fbe0d;
  border: 1px solid #4fbe0d;
}

.ddc {
  color: orangered;
  border: 1px solid orangered;
}

.djc {
  color: orange;
  border: 1px solid orange;
}
</style>
