<template>
  <view class="dec-video">
    <video
      id="myVideo"
      :style="{ height: height }"
      :src="source"
      @error="videoErrorCallback"
      :poster="cover"
      controls
    ></video>
    <div class="dec-skip-tag" v-if="arg.isSkip == 'yes'" @click="go">
      <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>
  </view>
</template>

<script>
// 设置视频
export default {
  inject: ["decImgDomain"],
  props: {
    tab: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      windowWidth: "",
      arg: null,
      source: "",
      cover: "",
      width: 100,
      height: 50,
    };
  },
  created() {
    this.windowWidth = uni.getSystemInfoSync().windowWidth;
    this.arg = this.tab.arg;

    const test =
      "https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4";
    this.source = this.tab.arg.source || test;
    this.cover = this.decImgDomain(this.arg.cover, "temp-video.png");

    if (!this.arg.ratio) this.arg.ratio = "100*66";
    this.initRatio(this.arg.ratio);
  },
  methods: {
    videoErrorCallback: function (e) {
      uni.showModal({
        content: e.target.errMsg,
        showCancel: false,
      });
    },
  },
  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";
    },
    go() {
      this.decAxios.decEventHandler(
        {
          moudle: this.moudle,
          type: "videoLink",
          desc: "跳商品详情页",
        },
        this.arg.linkArg
      );
    },
  },
};
</script>
