<template>
  <div class="census-card">
    <div class="block-top">
      <span class="count-num">{{ countNum || 0 }}</span>
      <span class="count-unit"> {{ countUnit || "（吨标准煤）" }} </span>
    </div>
    <div class="block-dividing"></div>
    <div class="block-content">
      <div class="bit-left">
        <img :src="icon" />
      </div>
      <div class="bit-right">
        <!-- <div
          class="b_list"
          :id="'publishMain' + elementId"
          v-show="activityList && activityList.length > 0"
        >
          <div :id="'publishMain1' + elementId">
            <div class="b_item" v-for="(item, idx) in activityList" :key="idx">
              <span class="b-label" :title="item[props['label']]">{{
                item[props["label"]]
              }}</span>
              <span class="b-value" :title="item[props['value']]">{{
                item[props["value"]]
              }}</span>
            </div>
          </div>
          <div :id="'publishMain2' + elementId"></div>
        </div> -->

        <vue-seamless-scroll
          :data="activityList"
          class="b_list"
          :class-option="classOption"
          v-show="activityList && activityList.length > 0"
          :id="'publishMain' + elementId"
          style="overflow: hidden"
        >
          <div style="width: 100%">
            <div
              v-for="(item, index) in activityList"
              :key="index"
              style="
                width: 100%;
                display: flex;
                justify-content: space-between;
                height: 35px;
                font-size: 14px;
                font-family: 'Source Han Sans CN';
                font-weight: 400;
                color: #89ffff;
                line-height: 37px;
              "
            >
              <span
                class="b-label"
                style="
                  display: block;
                  width: calc(100% - 85px);
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
                :title="item[props['label']]"
                >{{ item[props["label"]] }}</span
              >
              <span
                style="
                  display: block;
                  width: 80px;
                  margin-left: 5px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  font-weight: 400;
                  color: #00feff;
                  font-size: 16px;
                  text-align: center;
                "
                :title="item[props['value']]"
                >{{ item[props["value"]] }}</span
              >
            </div>
          </div>
        </vue-seamless-scroll>
        <!-- <el-empty v-else :image-size="200"></el-empty> -->
        <div
          style="
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          "
          v-show="!(activityList && activityList.length > 0)"
        >
          暂无数据
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "CensusCard",
  components: {
    vueSeamlessScroll,
  },
  props: {
    icon: {
      type: String,
      default: () => {
        return "/images/icon01.png";
      },
    },
    props: {
      typd: Object,
      default: {
        label: "label",
        key: "key",
        value: "value",
      },
    },
    countNum: {
      type: [String, Number],
      require: true,
    },
    countUnit: {
      type: String,
    },
    activityList: {
      type: Array,
      require: true,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      timer: null,
      elementId: "",
    };
  },
  computed: {
    classOption() {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: this.activityList.length < 4 ? 4 : this.activityList.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 100, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.rollUp();
    // });
  },
  beforeDestroy() {
    this.timer = null;
    // clearInterval(this.timer);
  },
  created() {
    this.elementId = new Date().getTime();
  },
  methods: {
    // rollUp() {
    //   let ul1 = document.getElementById("publishMain1" + this.elementId);
    //   let ul2 = document.getElementById("publishMain2" + this.elementId);
    //   let box = document.getElementById("publishMain" + this.elementId);
    //   ul2.innerHTML = ul1.innerHTML;
    //   box.scrollTop = 0;
    //   function rollStart() {
    //     if (box.scrollTop >= ul1.scrollHeight) {
    //       box.scrollTop = 0;
    //     } else {
    //       box.scrollTop++;
    //     }
    //   }
    //   this.timer = setInterval(rollStart, 100);
    // },
  },
};
</script>
<style lang="scss">
.census-card {
  width: 100%;
  height: 100%;
  .block-top {
    height: 70px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    padding-right: 0;
    align-items: center;
    width: 100%;
    .count-num {
      height: 30px;
      font-size: 24px;
      font-family: "Source Han Sans CN";
      font-weight: 600;
      color: #ffcc00;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: calc(100% - 100px);
    }
    .count-unit {
      height: 16px;
      font-size: 16px;
      font-family: "Source Han Sans CN";
      font-weight: 400;
      color: #00feff;
    }
  }
  .block-dividing {
    width: 100%;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(0, 255, 241, 0) 0%,
      rgba(0, 255, 241, 0.97) 48%,
      rgba(0, 255, 241, 0) 100%
    );
  }
  .block-content {
    width: 100%;
    height: 170px;
    display: flex;
    .bit-left {
      width: 140px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .bit-right {
      width: calc(100% - 140px);
      height: 100%;
      padding: 10px 5px;
      @keyframes scrollTop {
        0% {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
        }
        100% {
          -webkit-transform: translate3d(0, -300px, 0);
          transform: translate3d(0, -300px, 0);
        }
      }
      .b_list {
        overflow: hidden;
        height: 100%;
        .b_item {
          width: 100%;
          display: flex;
          justify-content: space-between;
          height: 35px;
          font-size: 14px;
          font-family: "Source Han Sans CN";
          font-weight: 400;
          color: #89ffff;
          line-height: 37px;
          .b-label {
            display: block;
            width: calc(100% - 80px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .b-value {
            display: block;
            width: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 400;
            color: #00feff;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>
