<template>
  <div class="m-scoll-notice">
    <div class="wrapper">
      <div class="bar" ref="barparent">
        <div class="bartext" ref="barchild" :style="bartextStyle">
          <!-- <li
            v-for="(item, index) in list"
            :key="item.configId + item.buildingId + index"
            @click="toNoticeInfo(item)"
          >
            {{ item.noticeContent }}
          </li> -->
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";

export default {
  props: {
    list: {
      type: Array,
      default: [],
    },
  },

  data() {
    return {
      parentClientWidth: 100000,
      beyond: false,
    };
  },
  components: {},

  computed: {
    bartextStyle() {
      let len = this.list.length;
      let beyond = this.beyond;
      return {
        paddingLeft: beyond ? this.parentClientWidth + "px" : "",
        animation: beyond
          ? `move_left_right ${len * 5}s linear 0s infinite`
          : "",
      };
    },
  },
  mounted() {
    this.move();
  },

  methods: {
    move() {
      const parentClientWidth = this.$refs.barparent.clientWidth;
      this.parentClientWidth = parentClientWidth;
      //判断动画区域是否超出父元素宽度 宽则有动画，不宽则无
      const parent = this.$refs.barparent;
      const child = this.$refs.barchild;
      console.log("对比", child.clientWidth, parent.clientWidth);
      this.beyond = child.clientWidth > parent.clientWidth;
    },
    handleCancle() {
      this.$emit("dialogCancle");
      this.resetData();
    },

    resetData() {
      this.dataForm = {
        neighborHoodId: "", // 所属小区ID
        buildingId: "", //所属楼栋ID
        buildingUnitId: "", //所属单元ID
        doorName: "", //门牌号
        houseType: "1", //房屋类型【楼房，平房，别墅】
        purpose: "1", //房屋用途【住宅，商业，办公，工业，仓储，商住混用，其他】
        rentFlag: 1, //是否出租【是：1，否：0】
        ownerPhone: "", //房主电话
        ownerName: "", //房主名字
        ownerIdCard: "", //房主身份证
      };
    },
  },
};
</script>

<style lang="scss">
.m-scoll-notice {
  .wrapper {
    // padding: 0 15px;
    display: flex;
    align-items: center;
    // background-color: "#FFF6EC";
  }
  .bar {
    width: 100%;
    // height: 32px;
    // line-height: 32px;
    overflow: hidden;
    box-sizing: border-box;
  }
  .bartext {
    white-space: nowrap;
    display: inline-block;
  }
  .bartext li {
    white-space: nowrap;
    display: inline-block;
    color: red;
    font-size: 14px;
  }
  .state-text-overflow {
    animation: move_left_right 120s linear 0s infinite;
  }
  @keyframes move_left_right {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(-80%);
    }
  }
}
</style>
