<template>
  <div class="wraper" @mouseout="closeShow(data.id)">
    <my-image
      :title="data.name"
      :proportion="proportion"
      :image="data.icon"
      @click="() => activeFn(data, index)">
      <div
        :class="`${data.restrictionLevel} ${
          data.importedStatus ? 'store' : ''
        }`">
        <div class="left_mark" v-if="showSelectable">
          <span
            class="active-icon"
            :class="{ active: selectIds.includes(data.id) }"></span>
        </div>
        <div class="right_check">
          <slot name="right-check">
            <!-- <div v-for="(item, index) in data.tagList" :key="index">
              <img
                style="display: block; border-radius: 5px"
                height="20"
                v-if="item.colorCode && item.colorCode.length > 7"
                :src="formatUrl(imageUrl)"
                :title="item.name"
                alt="" />
              <span
                v-else
                :title="item.name"
                :style="{
                  display: 'block',
                  width: '20px',
                  fontSize: '12px',
                  textAlign: 'center',
                  lineHeight: '20px',
                  height: '20px',
                  background: item.colorCode,
                  borderRadius: '5px'
                }">
                {{ item.name.substr(0, 1) }}
              </span>
            </div>
            <el-popover
              v-if="isShowTag"
              placement="bottom"
              width="400"
              trigger="click"
              @show="showPopover(data)">
              <div style="min-height: 50px">
                <el-checkbox-group
                  v-model="customTag"
                  @change="($event) => changeTag($event)">
                  <el-checkbox
                    style="width: 100px"
                    v-for="(item, index) in customTagList"
                    :key="index"
                    :label="item.id"
                    :value="item.id">
                    <img
                      height="20"
                      style="vertical-align: middle; border-radius: 5px"
                      v-if="item.colorCode && item.colorCode.length > 7"
                      :src="
                        setimgUrl(item.colorCode, { h: 20, isCustom: isCustom })
                      "
                      :title="item.name"
                      alt="" />
                    <span v-else>
                      {{ item.name }}
                    </span>
                  </el-checkbox>
                </el-checkbox-group>
              </div>
              <span
                title="添加标签"
                slot="reference"
                v-if="operational"
                class="addtag">
                <img
                  title="添加标签"
                  width="24"
                  src="../../assets/images/supply/tig.png"
                  alt="" />
              </span>
            </el-popover> -->
          </slot>
        </div>
      </div>
      <div
        class="app-btn-bottom"
        style="width: 100%"
        v-if="operational && isShowHomeSku === 'bottom'">
        <transition>
          <div
            class="more_wrap"
            style="max-width: 100%; overflow-x: auto; overflow-y: hidden;padding-top: 5px;">
            <!-- 小图标按钮 -->

            <slot name="operations" />
          </div>
        </transition>
      </div>
    </my-image>
    <!--  -->
    <div class="content">
      <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" />
          <!-- <div>
            <span :class="!data.isCollectFee ? 'green' : 'red'">
              {{ !data.isCollectFee ? '免费' : '收费' }}
            </span>
          </div> -->
          <slot name="synthesizeStatus"></slot>
          <slot name="level-time"></slot>
        </div>
        <!-- footer -->
        <div class="footer_wrap">
          <!-- <div
            class="bottom-home-sku"
            @click.stop="copy(data.id)">
            <img
              :title="'复制' + data.id"
              height="20"
              :src="require('@/assets/images/supply/id.png')"
              alt="" />
            <span>{{ data.id }}</span>
          </div> -->
          <!-- 底部额外图标 -->
          <slot name="footer" />
        </div>
      </slot>
      <slot name="otherContent"></slot>
    </div>
    <div class="tag-dialog"></div>
    <!-- 用来放一些 Dialog -->
    <slot name="extra" />
  </div>
</template>
<script>
import MyImage from '../base/image.vue'

export default {
  inheritAttrs: false,
  props: {
    // 控制一些元素显示与否
    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: 135
    },
    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
    }
  },
  data() {
    return {
      imageUrl: '',
      showColorImg: {},
      logList: [],
      customTag: []
    }
  },
  components: {
    MyImage
  },
  computed: {},
  methods: {
    formatUrl(url, num = 300) {
      if (this.isFormat && url) {
        if (!url.includes('custom.jomalls.com')) {
          return url
        }
        const name = url.split('/')
        const format = name[name.length - 1].split('.')
        name[name.length - 1] = format[0] + `-${num}` + '.' + format[1]
        return name.join('/')
      }
      return url
    },
    showPopover(data) {
      this.customTag = []
      if (data.tagList) {
        this.customTag = data.tagList.map((item) => item.id)
      }
    },
    isNew(date) {
      const newdate = new Date().getTime()
      date = new Date(date).getTime()
      const difference = newdate - date
      return difference < 604800000
    },
    showDetails(item) {
      this.$emit('showDetails', item)
    },
    setCurrentImg(id, val) {
      this.$set(this.showColorImg, id, true)
      this.imageUrl = val
    },
    closeShow(id) {
      this.$set(this.showColorImg, id, false)
    },
    copy(text) {
      const oInput = document.createElement('input')
      oInput.value = text
      document.body.appendChild(oInput)
      oInput.select() // 选择对象
      document.execCommand('Copy') // 执行浏览器复制命令
      oInput.className = 'oInput'
      oInput.style.display = 'none'
      document.body.removeChild(oInput)
      this.$message.success('复制成功')
    },
    edit(item) {
      this.$emit('showEdit', item)
    }
  }
}
</script>
<style 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;
}

.app-btn-bottom {
  position: absolute;
  bottom: 0px;
  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;
  align-items: center;
}

.wraper:hover .more_wrap {
  display: flex;
}

.more_wrap::v-deep > img {
  margin-left: 6px;
}

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

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

.green {
  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;
}
.red {
  display: block;
  width: 43px;
  height: 16px;
  line-height: 14px;
  background: #f56c6c;
  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::v-deep > .delete:hover,
.more_wrap::v-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;
}

.store::after {
  position: absolute;
  background: #fff;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  z-index: 999;
  /* background: rgba(0, 0, 0, 0.3) url('../../assets/images/supply/dianpu.png')
    no-repeat center; */
}

.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>
