<template>
  <div class="int">
    <div
      v-for="item in list"
      :key="item.id"
      class="int-content"
    >
      <div class="box" @click="toDetail(item.id)">
        <div class="int-content-left">
          <div class="content-tag">
            <div class="tag-text">
              {{ locale === "zh_CN" ? item.typeZh : item.typeEn }}
            </div>
          </div>
          <img
            class="content-image"
            :src="locale === 'zh_CN' ? item.coverImageZh : item.coverImageEn"
          >
        </div>
        <div class="int-content-right">
          <div class="content-title">
            {{ locale === "zh_CN" ? item.titleZh : item.titleEn }}
          </div>
          <div class="content-text">
            {{ locale === "zh_CN" ? item.descZh : item.descEn }}
          </div>
        </div>
      </div>
      <div v-if="item.type == 3||item.type == 4" :class="'copyBtn copyBtn'+item.id" :data-clipboard-text="getCopyText(item)" @click="handleCopyBtn(item, $event)">
        {{ $t("integral.copyBtn") }}
      </div>
    </div>
  </div>
</template>

<script>
import { integralActivityList, shareRecordCreate } from '@/api/integral'
import ClipboardJS from 'clipboard'
export default {
  name: 'IntegralActivity',
  data() {
    return {
      list: []
    }
  },
  computed: {
    locale() {
      return this.$store.getters.language
    }
  },
  created() {
    this.getIntegralList()
  },
  methods: {
    getCopyText(item) {
      if (item.type == 3) {
        return `${this.locale === 'zh_CN' ? item.extraRecommend.shareContentZh : item.extraRecommend.shareContentEn} ${item.recommendUrl} `
      } else if (item.type == 4) {
        return `${this.locale === 'zh_CN' ? item.titleZh
          : item.titleEn} ${item.extraShare.activityUrl}?id=${item.id}&memberId=${this.$store.getters.id}&language=${this.locale == 'zh_CN' ? 'zh' : 'en'}`
      }
    },
    // 复制按钮
    handleCopyBtn(item, e) {
      const clipboard = new ClipboardJS(`.copyBtn${item.id}`)
      clipboard.on('success', () => {
        shareRecordCreate({ memberId: this.$store.getters.id,
          ruleId: item.id }).then(res => {
          this.$message.success(this.$t('复制成功'))
        })

        clipboard.destroy()
      })
      clipboard.on('error', () => {
        this.$message.error(this.$t('复制失败'))
        clipboard.destroy()
      })
    },
    // 获取活动列表
    async getIntegralList() {
      try {
        const { code, data } = await integralActivityList({
          platform: 3,
          memberId: this.$store.getters.id
        })
        if (code !== 0) return
        this.list = data
      } catch (err) {
        console.log(err)
      }
    },
    // 跳转详情
    toDetail(id) {
      this.$router.push({ path: `/jiedao/jd-details-activity`, query: { id }})
    }
  }
}
</script>

<style lang="scss" scoped>
.int {
  padding: 15px 0;
  height: inherit;
  overflow-y: auto;
}
.box{
  display: flex;
  width: 100%;
}
.int-content {
  margin-bottom: 10px;
  width: 100%;
  height: 110px;
  display: flex;
  padding: 0 15px;
  box-sizing: border-box;
  border-bottom: 1px solid #e7e7e7;
  position: relative;
  .copyBtn{
    position: absolute;
    right: 0;
    bottom: 10px;
    border: 1px solid #2c78eb;
    color:#2c78eb;
    font-size: 14px;
    padding: 4px 20px;
    border-radius: 100px;
    }
  &:last-child {
    margin-bottom: 0;
  }
}
.int-content-left {
  position: relative;
  width: 100px;
  height: inherit;
  .content-image {
    width: 100px;
    height: 100px;
  }
}

.int-content-right {
  flex: 1;
  height: inherit;
  padding-left: 10px;
  box-sizing: border-box;
  position: relative;

  .content-title {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;

  }
  .content-text {
    font-size: 12px;
    color: #666;
    line-height: 18px;
  }
}
.content-tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  display: flex;
  font-size: 12px;
  min-width: 60px;
  height: 20px;
  color: #fff;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transform: skewX(15deg);
  background-color: #ff4d4f;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.tag-text {
  transform: skewX(-15deg);
}
</style>
