<template>
  <div class="dashbord-list">
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <img :src="getImg(item.urlName)" alt="" />
        <!-- <img :src="'@/assets/images/screen/' + item.urlName + '.png'" alt="" /> -->
        <div class="title">
          <div class="title-name">{{ item.label }}</div>
          <span>
            <a class="num">{{ item.num }}</a>
            <a class="unit">{{ item.unit }}</a>
          </span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "nums",
  data() {
    return {
       data: [
        {
          label: "总播放量",
          num: 0,
          unit: "次",
          urlName: "play",
          feild: "playCnt",
        },
        {
          label: "单位组织",
          num: 0,
          unit: "家",
          urlName: "org",
          feild: "orgCnt",
        },
        {
          label: "展板总量",
          num: 0,
          unit: "个",
          urlName: "boardsTotal",
          feild: "boardCnt",
        },
        {
          label: "互动总量",
          num: 0,
          unit: "次",
          urlName: "interaction",
          feild: "interactionCnt",
        },
      ],
      list: []
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
     getImg(imgUrl) {
      return require("@/assets/images/screen/" + imgUrl + ".png");
    },
    getList() {
      this.$https({
        method: "post",
        url: "tBoardStatistic/getBoardSurvey"
      })
        .then((res) => {
          if (res.status == 200) {
            if (res.data.resultCode == 200) {
              let resData = res.data.data;
              this.list = [...this.data].map((v) => {
                v["num"] = resData[v["feild"]];
                return v;
              });
            } else {
              this.list = [...this.data];
            }
          } else {
            this.list = [...this.data];
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
  },
};
</script>

<style lang=scss>
.dashbord-list {
  width: 100%;
  position: absolute;
  top: -0.3rem;
  ul {
    display: flex;
    font-size: 0;
    justify-content: space-around;
    li {
      position: relative;
    }
    img {
      width: 1.76rem;
    }
    .title {
      position: absolute;
      right: 0.2rem;
      bottom: 0;
      color: rgba(78, 255, 253, 1);
      p {
        margin: 0;
        padding: 0;
      }
      .title-name {
        font-size: 0.18rem;
        margin-bottom: 0.13rem;
      }
      .num {
        font-size: 0.28rem;
      }
      .unit {
        font-size: 0.16rem;
        margin-left: 0.05rem;
      }
    }
  }
}
</style>
