<template>
  <view class="home_con_content_order" @click="click">
    <!-- <image
      class="width_100 hs-height-160"
      src="@/static/images/home/1@2x.png"
      mode=""
    ></image> -->
    <!-- <image class="width_100 hs-height-160" :src="`${imgUrl}${fileCode}`"> -->
    <template v-for="(item, index) in colourApiList">
      <image
        :key="index"
        v-if="item.isMain"
        class="width_100 hs-height-160"
        :src="`${imgUrl}${item.fileCode}`"
        mode="aspectFill"
      />
    </template>
    <view class="order_tit">
      <view class="u-flex justify-between u-font-32">
        <span class="color_DDA973 u-line-1"
          >{{ item.materialName }}
          <!-- 加厚荷兰绒绒布布料 -->
        </span>
      </view>
      <view class="u-font-24 u-m-t-20 color_6F6F72">
        <span class="u-m-r-10">{{ item.category }}</span>
        |
        <span class="u-m-l-10 u-m-r-10">{{ item.clothWidth }} cm</span>
        |
        <span class="u-m-l-10">{{ item.component }}</span>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "hs-material-thumbnail",
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    colourApiList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      imgUrl: this.$IMG_URL, // 上传地址
    };
  },
  methods: {
    click() {
      this.$emit("click");
    },
  },
};
</script>

<style scoped lang="scss">
.home_con_content_order {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 160rpx;
  border-radius: 8rpx;
  overflow: hidden;
  width: 100%;

  .order_tit {
    position: absolute;
    width: 75%;
    right: 0;
    flex-direction: column;
    display: flex;
    justify-content: center;
    padding: 20rpx;
    flex: 1;
    height: 100%;
    background: rgba(17, 21, 30, 0.5);
  }
}

.width_30 {
  width: 30%;
}

.color_DDA973 {
  color: #dda973;
}

.color_6F6F72 {
  color: #b2b5b8;
}

.bd_dashed {
  position: relative;
}

.bd_dashed:after {
  border-width: 1px;
}

.bd_dashed-bottom:after,
.bd_dashed-left:after,
.bd_dashed-right:after,
.bd_dashed-top-bottom:after,
.bd_dashed-top:after,
.bd_dashed:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  box-sizing: border-box;
  transform-origin: 0 0;
  width: 199.8%;
  height: 199.7%;
  transform: scale(0.5, 0.5);
  border: 1px dashed #e4e7ed;
  z-index: 2;
}

.ov_hiden {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
