<template>
  <div class="good__title">
    <h4 @touchstart="touchstart" @touchend="touchend">
      <cr-image
        v-if="title.skuIcon"
        v-imogr="{ h: 27 }"
        :src="title.skuIcon"
        width="auto"
        height="0.426rem"
      />
      {{ title.skuName }}
    </h4>
    <p>{{ title.sellPoint }}</p>
  </div>
</template>
<script>
import { mapGetters } from '../store';
import clipTextMixins from '@/mixins/clipText.mixins';

export default {
  name: 'Title',
  mixins: [clipTextMixins],
  data() {
    return {
      clipTimer: null
    };
  },
  computed: {
    ...mapGetters(['title'])
  },
  methods: {
    touchstart() {
      this.touchend();
      this.clipTimer = setTimeout(() => {
        this.setClipboardData({
          data: this.title.skuName,
          success: () => {
            this.$toast.success(`已复制`);
          }
        });
      }, 2000);
    },
    touchend() {
      clearTimeout(this.clipTimer);
    }
  }
};
</script>
<style lang="less" scoped>
.good__title {
  padding: @padding-sm;
  h4 {
    .text-size(16);
    font-weight: 500;
    color: @black;
    word-break: break-all;
  }
  p {
    margin-top: @padding-sm;
    white-space: pre-wrap;
    .text-size(12);
    color: @gray-4;
  }
}
</style>
