<template>
  <div class="dec-video">
    <img
      :style="{ height: height }"
      class="image"
      :src="decImgDomain(arg.cover, 'temp-video.png')"
    />
    <div class="dec-skip-tag" v-if="arg.isSkip == 'yes'">
      <img
        class="dec-image"
        :src="decImgDomain(arg.linkArg.tagImg, 'img-list.png')"
      />
      <p class="dec-price" v-if="arg.linkArg.pathName == '商品'">
        ￥{{ arg.linkArg.salePrice }}
      </p>
    </div>
  </div>
</template>

<script>
// 设置视频
export default {
  inject: ["decImgDomain"],
  props: {
    tab: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      windowWidth: 375,
      arg: null,
      width: 100,
      height: 50,
    };
  },
  watch: {
    "arg.ratio": function (val) {
      this.initRatio(val);
    },
    arg: function (val) {
      console.log(val);
    },
  },
  created() {
    this.arg = this.tab.arg;
    if (!this.arg.ratio) this.arg.ratio = "100*66";
    this.initRatio(this.arg.ratio);
  },
  methods: {
    initRatio(val) {
      const arr = (val || "*").split("*");
      const width = parseInt(arr[0] || 100);
      const height = parseInt(arr[1] || 50);
      this.width = this.windowWidth;
      this.height =
        parseInt((this.windowWidth / width) * height * 10) / 10 + "px";
    },
  },
};
</script>
