<template>
  <div class="h100">
    <div class="wraper" @mouseout="closeShow">
      <div class="image-box" :title="data.name">
        <el-image
          style="width: 100%; height: 100%"
          :src="imageUrl"
          fit="cover"
        />

        <div
          v-if="isShowHomeSku === 'bottom'"
          class="app-btn-bottom"
          style="width: 100%"
        >
          <transition>
            <div
              class="more_wrap"
              style="max-width: 100%; overflow-x: auto; overflow-y: hidden"
            >
              <slot name="operations" />
            </div>
          </transition>
        </div>
      </div>

      <div class="content">
        <div class="colors_main">
          <div class="colors_wrap">
            <ul class="colors">
              <li v-for="(val, index) in data.colorImageList" :key="index">
                <img
                  style="display: block"
                  width="30"
                  loading="lazy"
                  height="30"
                  :src="val"
                  alt=""
                  @mouseenter.stop="setCurrentImg(val)"
                />
              </li>
            </ul>
          </div>
        </div>
        <!-- <slot name="skuid" v-if="$slots.skuid"></slot> -->
        <slot name="content">
          <div
            style="
              display: flex;
              align-items: center;
              position: relative;
              /* height: 24px; */
            "
          >
            <slot name="product-name"></slot>
            <slot name="price" />
            <slot name="synthesizeStatus"></slot>
            <slot name="level-time"></slot>
          </div>
        </slot>
        <slot name="otherContent"></slot>
      </div>
      <slot name="extra" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import {computed} from 'vue'
const props = defineProps({
  // 控制一些元素显示与否
  isStore: {
    type: Boolean,
  },
  width: {
    type: Number,
    default: 300,
  },
  hasWidth: {
    type: Boolean,
    default: false,
  },
  isFormat: {
    type: Boolean,
    default: false,
  },
  smallWidth: {
    type: Number,
    default: 45,
  },
  isShowTag: {
    type: Boolean,
    default: false,
  },
  isShowHomeSku: {
    type: [String, Boolean],
    validator: (v) => v === "top" || v === "bottom" || !v,
  },
  isSkuImageList: {
    type: Boolean,
  },
  isShowSkuId: {
    type: Boolean,
    default: true,
  },
  isShowTitle: {
    type: Boolean,
    default: false,
  },
  isShowLevel: {
    type: Boolean,
    default: true,
  },
  isShowStatus: {
    type: Boolean,
    default: true,
  },
  isShowSku: {
    type: Boolean,
    default: true,
  },
  isShowSales: {
    type: Boolean,
    default: true,
  },
  showSelectable: {
    type: Boolean,
    default: true,
  },
  openly: {
    type: Number,
    default: 1,
  },
  showOpenly: {
    type: Boolean,
    default: false,
  },
  proportion: {
    type: Number,
    default: 125,
  },
  data: {
    type: Object,
    default: () => ({ colorImageList: [] }),
  },
  selectIds: {
    type: Array,
    default: () => [],
  },
  activeFn: {
    type: Function,
    default: () => {},
  },
  index: {
    type: Number,
    default: null,
  },
  searchForm: {
    type: Object,
    default: () => {},
  },
  operational: {
    type: Boolean,
    default: true,
  },
  customTagList: {
    type: Array,
    default: () => [],
  },
  isCustom: {
    type: Boolean,
    default: () => false,
  },
});
const emits = defineEmits(["setCurrentImg"]);

const imageUrl = computed(() => {
  return props.data.img_url;
});
const setCurrentImg = (val: string) => {
  if (!val) return;
  emits("setCurrentImg", val);
};
const closeShow = () => {
  if (!props.data.colorImageList.length) return;
  emits("setCurrentImg", props.data.colorImageList[0]);
};
// edit(item) {
//   this.$emit('showEdit', item)
// }
</script>
<style lang="scss" scoped>
.wraper {
  position: relative;
  border-radius: 12px 0px 0px 0px;
  border: 1px solid #efefef;
  background: #eeeeee;
  overflow: hidden;
}

.wraper:hover {
  border: 1px solid #4168ff;
}

.addtag {
  display: none;
}

.wraper:hover .addtag {
  display: block;
}

.sales_wrap {
  padding-top: 5px;
  height: 24px;
  display: flex;
  align-items: center;
}

.sales_wrap svg {
  margin-bottom: 5px;
}

.sales {
  flex: 1;
  height: 24px;
  margin-left: 5px;
  line-height: 24px;
  box-sizing: border-box;
  background-position: left center;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  font-size: 14px;
  vertical-align: bottom;
  padding-top: 1px;
  font-weight: bold;
  text-align: center;
}

.high {
  color: red;
  font-weight: bold;
  color: #444444;
  background: linear-gradient(0deg, rgb(255, 255, 255) 0%, #dddddd 100%);
  border-radius: 4px 4px 0 0;
  position: relative;
}

.high::before {
  position: absolute;
  top: -11px;
  right: 0;
  left: 0;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  font-weight: normal;
}

.today.high::before {
  content: "today";
}

.seven.high::before {
  content: "seven";
}

.thirty.high::before {
  content: "thirty";
}

.history.high::before {
  content: "history";
}

.active-icon {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  border: 1px solid #cccccc;
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4) inset;
  border-radius: 8px;
  background: #fff;
}

.active-icon.active {
  background: #4168ff;
  position: relative;
  border-color: #4168ff;
  box-shadow: none;
  font-size: 18px;
  top: -1px;
  left: -1px;
}

.active-icon.active::after {
  position: absolute;
  content: "";
  top: 0px;
  left: 4px;
  width: 4px;
  height: 8px;
  border-width: 2px;
  border-style: solid;
  border-color: transparent #fff #fff transparent;
  transform: rotate(45deg) scale(0.8);
}

.colors_main {
  height: 40px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.colors_wrap {
  height: 40px;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
}

.colors {
  white-space: nowrap;
  display: flex;
}

.colors_wrap::-webkit-scrollbar {
  height: 5px;
  width: 5px;
}

.colors li {
  border-right: 1px solid #fff;
  width: 30px;
  min-width: 30px;
  height: 30px;
  background: #ddd;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  margin-right: 5px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #ddd;
  box-sizing: border-box;
}

.colors li img {
  object-fit: contain;
  object-position: center;
}

.star {
  display: inline-block;
  width: 80px;
  color: red;
  padding-left: 2px;
}

.star span {
  display: inline-block;
  height: 14px;
  width: 14px;
  margin-right: 2px;
  background-position: center;
  background-size: contain;
  // background-image: url('../../assets/icon/star-no.svg');
}

// .star span.active {
//   background-image: url('../../assets/icon/star.svg');
// }

// .moneyall {
//   background-image: url('../../assets/images/moneyall.png');
// }

// .moneyone {
//   background-image: url('../../assets/images/moneyone.png');
// }

// .rmb {
//   background-image: url('../../assets/images/rmb.png');
// }

.version {
  display: block;
  width: 18px;
  height: 18px;
  line-height: 14px;
  font-size: 12px;
  color: #fff;
  padding: 0 0 3px 2px;
  text-align: center;
  box-sizing: border-box;
  // background: no-repeat url('../../assets/images/supply/no-version.png');
}

.repeat {
  display: inline-block;
  height: 24px;
  width: 24px;
  border-radius: 12px;
  font-size: 12px;
  background: red;
  line-height: 22px;
  color: #fff;
  text-align: center;
}

// .version.main {
//   background-image: url('../../assets/images/supply/version.png');
// }

// .dollar {
//   background-image: url('../../assets/images/supply/money.png');
// }

// .eidt_title {
//   background-image: url('../../assets/images/edit001.png');
// }

// .edit_online {
//   background-image: url('../../assets/images/plane.png');
// }

.scroll {
  overflow: auto;
  padding-top: 10px;
  user-select: none;
  border: 1px solid #ddd;
}

.empty.elements {
  border: none;
}

.select-number {
  position: absolute;
  left: 5px;
  top: 10px;
}

.left_mark {
  position: absolute;
  top: 5px;
  left: 5px;
}

.right_check {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
}

.right_check > * {
  display: block;
  margin-bottom: 5px;
}

.app-btn-top {
  position: relative;
  height: 30px;
}

.app-btn-top > .more_wrap {
  position: absolute;
  right: 5px;
}
.image-box {
  position: relative;
  padding-top: 100%;
  width: 100%;
  .el-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .app-btn-bottom {
    position: absolute;
    bottom: 5px;
    left: 0;
  }
}

.log_btn {
  height: 22px;
  display: inline-block;
  background: #ffffff;
  margin-right: 5px;
  padding: 0 8px;
  font-size: 12px;
  vertical-align: middle;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
  border-radius: 13px;
  text-align: center;
  cursor: pointer;
}

.edit {
  vertical-align: middle;
}

.content {
  padding: 5px 10px;
  background: linear-gradient(
      90deg,
      rgba(228, 228, 228, 0.4) 0%,
      rgba(255, 255, 255, 1) 100%
  );
}

.wraper:hover .content {
  background: linear-gradient(
      90deg,
      rgba(26, 125, 255, 0.404) 0%,
      rgba(64, 158, 255, 0) 100%
  );
}

.footer_wrap {
  display: flex;
  align-items: center;
  padding: 5px 0px 0;
}

.more_wrap {
  display: none;
  height: 35px;
  /* //display: flex; */
  align-items: center;
}

.wraper:hover .more_wrap {
  display: flex;
}
.more_wrap :deep(> img) {
  margin-left: 6px;
  cursor: pointer;
}

.more_wrap :deep(> img:hover) {
  transform: scale(1.3);
}

.price {
  color: rgba(181, 124, 91, 1);
  font-size: 14px;
  font-weight: bold;
}

.new {
  display: block;
  width: 43px;
  height: 16px;
  line-height: 14px;
  background: #8fc31f;
  text-align: center;
  border-radius: 8px;
  font-size: 12px;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  color: #ffffff;
}

.bottom-home-sku {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 2px 5px 2px 0;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  margin-right: 6px;
  position: relative;
  z-index: 1;
}

.bottom-home-sku span,
.top-home-sku span {
  font-size: 14px;
  vertical-align: top;
  margin-left: 5px;
  color: #222;
}

.more_wrap :deep(> .delete:hover),
.more_wrap :deep(> .download:hover) {
  transform: scale(1.3);
}

.delete,
.download {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: rgba(255, 0, 0, 0.678);
  padding: 0 4px;

  border-radius: 10px;
  box-sizing: border-box;
}

.delete svg,
.download svg {
  margin-top: -1px;
  width: 12px;
  height: 12px;
}

.product {
  right: 66px;
  background: #4168ff;
  color: #ffffff;
  padding: 0 8px 8px 8px;
  border-radius: 18px;
}

.variants {
  display: flex;
  padding: 5px 0;
}

.variants + .variants {
  border-top: 1px solid #ddd;
}

.variants .title {
  width: 120px;
  min-width: 110px;
  color: #303133;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
}

.variants li {
  display: inline-block;
  position: relative;
  width: 96px;
  padding: 0 6px;
  margin-left: 6px;
  box-sizing: border-box;
  border: 1px solid #dcdfe6;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  white-space: nowrap;

  font-weight: 500;
  font-size: 12px;
  line-height: 24px;
  color: #606266;
  cursor: pointer;
  text-overflow: ellipsis;
  padding-right: 10px;
}

.variants li.active {
  border: 1px solid blue;
}

.variants li i {
  position: absolute;
  top: 7px;
  right: 5px;
}

.value {
  display: inline-block;
  width: 150px;
  text-align: left;
  color: #000;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wraper:hover .store::after {
  display: none;
}

.img_footer_cont {
  position: absolute;
  display: none;
  right: 0;
  bottom: 0;
  left: 0;
  padding-top: 50px;
  background-image: linear-gradient(
      to top,
      rgba(255, 255, 255, 0.9),
      rgba(255, 255, 255, 0)
  );
}

.img_footer_cont .title {
  min-height: 24px;
  line-height: 24px;
  font-size: 12px;
  color: #222;
  padding: 5px 8px 0;
}

.wraper:hover .img_footer_cont {
  display: block;
}

.top-home-sku {
  position: absolute;
  bottom: 5px;
  left: 5px;
  z-index: 888;
  display: flex;
  align-items: center;
  padding: 2px 5px;
  background: hsla(0, 0%, 100%, 0.5);
  border-radius: 5px;
}

.top-home-sku > span {
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

.openly {
  top: 5px;
  z-index: 3;
  right: 5px;
  position: absolute;
}
</style>
