<template>
  <view
    class="container"
    :style="{ marginTop: tarbarHeight }"
    style="padding-bottom: 200rpx"
  >
    <view v-for="(item, index) in errList" :key="index" class="planBox">
      <div class="errItem" @click="logDetails(item)">
        <div class="img">
          <img
            :src="require('@/static/images/defaultIcon.png')"
            alt=""
            @error="handleImageError(item)"
          />
        </div>
        <div class="title">
          <u--text
            :lines="1"
            :text="item.name"
            :size="14"
            :align="'right'"
          ></u--text>
          <u--text
            :lines="1"
            :text="item.num"
            :bold="true"
            :align="'right'"
            :margin="'5px 0'"
            :size="16"
          ></u--text>
        </div>
      </div>
    </view>
    <base-tarbar ref="baseTarbar" :pageTitle="'工作台'" :leftIcon="' '"></base-tarbar>
    <u-empty
      v-show="noData"
      mode="data"
      :icon="require('@/static/images/empty.png')"
    >
    </u-empty>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import baseTarbar from "@/components/baseTarbar/index.vue";
import { authApi } from "@/api/login";
import request from "@/utils/request";
export default {
  components: {
    baseTarbar,
  },
  onReady() {
    this.$refs.baseTarbar.currentEnvironment();
    if (this.$refs.baseTarbar.isOther) {
      this.tarbarHeight = "88rpx";
    }
  },
  data() {
    return {
      tarbarHeight: "0",
      errList: [],
      noData: false,
      msgType: "warn",
    };
  },
  onShow() {},
  mounted() {
    this.getErrorLogs();
  },
  methods: {
    logDetails(row) {
      this.$tab.navigateTo("/pages/logsError/index?appId=" + row.appId);
    },
    //   异常日志
    async getErrorLogs() {
      const res = await authApi("homeService", "app", "appErrorNum", "", {});
      if (res.status === "200") {
        this.errList = [];
        //图片处理
        this.imgHandle(res.attribute);
        this.errList = res.attribute;
        console.log(this.errList, "异常日志");
      }
    },
    //图片处理
    imgHandle(arr = []) {
      arr.map((el) => {
        return request({
          url:
            "kangarooDataCenterV3/entranceController/fileDownloadNew?id=" +
            el.path,
          method: "get",
          responseType: "arraybuffer",
        }).then((res) => {
          let tempImgUrl =
            "data:image/png/jpg;base64," +
            btoa(
              new Uint8Array(res).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            );
          if (el.path) {
            this.$set(el, "imgUrl", tempImgUrl);
          } else {
            this.$set(el, "imgUrl", null);
          }
        });
      });
    },
    //图片发生错误时 使用默认图片
    handleImageError(row = {}) {
      console.log("ksksksk");
      row.imgUrl = require("@/static/images/defaultIcon.png");
    },
  },
};
</script>
<style scoped lang="scss">
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 创建两列，每列占 1fr */
  gap: 10px; /* 可以设置列与列之间的间距 */
  padding: 15px 10px;
}
.planBox {
  background: #fff;
  border-radius: 12px;
}
.title {
  margin-left: 10px;
  width: calc(100% - 58px);
}
.errItem {
  padding: 10px;
  display: flex;
  align-items: center;
  .img {
    width: 48px;
    height: 48px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
<style scoped>
page {
  height: 100vh;
  background: #f3f4f6;
}
</style>
