<template>
  <div class="flow">
    <div class="flow_lie" v-for="v in imgList()" :key="v">
      <div class="w_img" v-for="img in v.a" :key="img" @click="toJsDetail(img.yz_id)">
        <!-- <router-link to="/ysgc_detail"> -->
        <div class="fallimgItem img">
          <img ref="allImage" :src="https+img.yz_img" alt="" />
        </div>
        <div class="des">
          <p class="name">{{img.yz_name}}</p>
          <div class="author">
            <img src="@/assets/img/zhjy/img_11.png" alt="" />
            <span class="author_name">{{img.yz_author_name}}</span>
            <div class="rate">
              <img v-for="star in Number(img.yz_star_num)" :key="star" src="../../assets/ysgc/star.png" alt="" />
            </div>
          </div>
        </div>
        <!-- </router-link> -->
      </div>
    </div>
  </div>
</template>
  <script>
export default {
  props: ["Plist"],
  data() {
    return {
      screenWidth: document.body.clientWidth,
      col: 5,
      list: [],
      categoryId: "",
      type: 1,
      https: window.GLOBAL_CONFIG.api,
    };
  },
  created() { },
  mounted() {
    // 监听屏幕宽度变化
    window.onresize = () =>
      (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    //this.imgList()
  },
  watch: {
    screenWidth(val) {
      this.screenWidth = val;
      if (this.screenWidth < 1480) {
        this.col = 4;
        console.log("小于1480,col=", this.col);
      } else {
        this.col = 5;
        console.log("不小于1480,col=", this.col);
      }
    }
  },
  methods: {
    //教师作品详情
    toJsDetail(id) {
      this.$router.push({ name: "ysgc_jsDetail", params: { id: id } });
    },
    // 瀑布流
    imgList() {
      if (this.Plist.length !== 0) {
        const res = [];
        for (let i = 0; i < this.col; i++) {
          res.push({
            h: 0,
            a: [],
          });
        }
        this.Plist.forEach((img, index) => {
          let i = index % this.col;
          let obj = res[i];
          let imgs;
          if (!document.getElementById("imgsId")) {
            imgs = document.createElement("img");
            imgs.id = "imgsId";
          } else {
            imgs = document.getElementById("imgsId");
          }
          imgs.src = img.img;
          img.h = imgs.height + Math.random();
          img.w = imgs.width;
          for (let i = 1; i < res.length; i++) {
            if (res[i].h < obj.h) {
              obj = res[i];
            }
          }
          // 存储图片数据
          obj.a.push(img);
          // 计算图片缩放后的高度，并记录
          const height = (img.h * 454) / img.w;
          obj.h += height;
        });
        return res;
      }
    },
  },
};
</script>
  
<style lang="scss" scoped>
.flow {
  width: 1750px;

  .flow_lie {
    height: 1000px;
    width: 315px;
    margin-right: 18px;

    display: inline-block;
    .w_img {
      position: relative;

      .des {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 80px;
        padding: 8px;
        box-sizing: border-box;
        .name {
          font-size: 16px;
          color: #000;
          line-height: 26px;
          font-family: PingFangSC, PingFangSC-Regular;
        }
        .author {
          width: 100%;
          margin-top: 8px;
          display: flex;
          position: relative;
          //border: 1px solid red;
          img {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 5px;
          }
          .author_name {
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Medium;
            color: #050026;
          }
          .rate {
            // border: 1px solid red;
            display: flex;
            margin: 11px 0;
            position: absolute;
            right: 0px;
            top: -7px;
            img {
              width: 15px;
              height: 15px;
              margin-right: 6px;
            }
          }
        }
      }
    }
  }
}

.fallimgItem {
  width: 315px;
  //position: relative;
  margin: 20px 0;
  min-width: 315px;
  padding-bottom: 80px;
  border-radius: 12px;
  box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
  img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 12px;
  }
  // .img_mask {
  //   width: 100%;
  //   height: 100%;
  //   border-radius: 15px;
  //   position: absolute;
  //   left: 0;
  //   top: 0;
  //   background-color: rgba(0, 0, 0, 0.4);
  //   padding: 20px 10px;
  //   box-sizing: border-box;
  //   opacity: 0;
  //   transition: 0.5s linear;
  //   .img_mask_top {
  //     width: 100%;
  //     height: 50px;
  //     display: flex;
  //     justify-content: flex-end;
  //     .heart,
  //     .car {
  //       float: right;
  //       width: 50px;
  //       height: 50px;
  //       background-color: rgba(0, 0, 0, 0.6);
  //       border-radius: 5px;
  //       line-height: 50px;
  //       margin-right: 20px;
  //       text-align: center;
  //       i {
  //         color: #fff;
  //         font-size: 25px;
  //       }
  //     }
  // }
  // .author {
  //   width: 93%;
  //   color: hsla(0, 0%, 100%, 0.8);
  //   display: flex;
  //   justify-content: space-between;
  //   position: absolute;
  //   left: 10px;
  //   bottom: 20px;
  //   opacity: 1 important;
  //   line-height: 36px;
  //   font-size: 28px;
  //   .left {
  //     display: flex;
  //     position: relative;
  //     .img1 {
  //       width: 36px;
  //       height: 36px;
  //       border-radius: 50%;
  //       vertical-align: middle;
  //     }
  //     .user_name {
  //       color: hsla(0, 0%, 100%, 0.8);
  //       font-size: 16px;
  //       font-weight: 100;
  //       margin-left: 16px;
  //       vertical-align: middle;
  //     }
  //   }
  //   .left:hover .avatar_imgItem {
  //     display: block !important;
  //   }
  //   .score {
  //     font-weight: 100;
  //   }
  // }
  // }
}
.fallimgItem:hover .img_mask {
  // display: block;
  opacity: 1;
}
</style>
  