<template>
  <div class="dec-modify-content dec-set-voice">
    <div @click="addSource" style="margin: 10px 0 6px">
      <a-button style="width: 100%">{{
        source ? "更换视频" : "添加视频"
      }}</a-button>
    </div>
    <div class="d-error" v-if="!source">请选择视频</div>
    <div v-else class="dec-truncate">
      视频地址:
      {{ source }}
    </div>

    <div @click="selectImg" style="margin: 20px 0 6px">
      <a-button style="width: 100%">{{
        arg.cover ? "更换封面" : "添加封面"
      }}</a-button>
    </div>
    <div class="d-error" v-if="!arg.cover">请添加封面</div>
    <div class="dec-border-box" v-else>
      <img
        style="width: 100%"
        :src="decImgDomain(arg.cover)"
        alt
        draggable="false"
      />
    </div>
    <div class="d-splitline"></div>

    <div class="dec-flex-list side">
      <span class="d-left">分辨率-长</span>
      <div class="d-right" style="width: 100px">
        <a-input-number
          style="width: 80px"
          :min="1"
          v-model:value="width"
          @change="changeRatio"
        />px
      </div>
    </div>
    <div class="dec-flex-list side">
      <span class="d-left">分辨率-宽</span>
      <div class="d-right" style="width: 100px">
        <a-input-number
          style="width: 80px"
          :min="1"
          v-model:value="height"
          @change="changeRatio"
        />px
      </div>
    </div>
    <div class="dec-flex-list side">
      <span class="d-left">显示跳转图标</span>
      <div class="d-right" style="width: 100px">
        <a-radio-group
          v-model="arg.isSkip"
          @change="clearLink"
          button-style="solid"
        >
          <a-radio-button :value="'yes'">是</a-radio-button>
          <a-radio-button :value="'no'">否</a-radio-button>
        </a-radio-group>
      </div>
    </div>
    <div class="dec-flex-list side" v-if="arg.isSkip == 'yes'">
      <span class="d-left">跳转链接</span>
      <div class="d-right" style="width: 200px">
        <a-button
          class="linkTarget"
          @click="selectLink($event, arg)"
          style="width: 200px"
        >
          <a class="dec-link-name" style="width: 180px">{{
            getLinkName(arg.linkArg)
          }}</a>
        </a-button>
      </div>
    </div>
    <div
      class="dec-flex-list side"
      v-if="
        arg.linkArg.pathName !== '商品' &&
        arg.isSkip == 'yes' &&
        !!arg.linkArg.path
      "
    >
      <span class="d-left">跳转链接图标</span>
      <div class="d-right" style="width: 59px">
        <div class="dec-float-box">
          <template v-if="arg.linkArg.tagImg">
            <div class="float-item">
              <a-icon
                type="close-circle"
                class="ic-close"
                @click="arg.linkArg.tagImg = ''"
              />
              <img
                :src="decImgDomain(arg.linkArg.tagImg)"
                alt
                draggable="false"
              />
            </div>
          </template>
          <div class="float-item ic-plus" @click="selectTagImg(arg)" v-else>
            <a-icon type="plus" />
          </div>
        </div>
      </div>
    </div>
    <div
      style="text-align: right"
      v-if="
        arg.linkArg.pathName !== '商品' &&
        arg.isSkip == 'yes' &&
        !!arg.linkArg.path &&
        !arg.linkArg.tagImg
      "
    >
      <div class="d-error">除商品外的链接需选择图标图片</div>
    </div>
    <source-win
      ref="sourceWinRef"
      @choose="getSource"
      :ismp4="true"
    ></source-win>
  </div>
</template>

<script>
import Vue from "vue";
import sourceWin from "../../../modal/sourceModal";
export default {
  inject: ["decImgDomain", "$isEmptyObj"],
  props: ["tab", "checked"],
  components: {
    sourceWin,
  },
  data() {
    return {
      arg: null,
      source: "", // 视频路径
      width: 100,
      height: 50,
    };
  },
  created() {
    this.arg = this.tab.arg;
    this.source = this.arg.source;
    const arr = (this.arg.ratio || "*").split("*");
    this.width = parseInt(arr[0] || 100);
    this.height = parseInt(arr[1] || 50);
  },
  computed: {},
  methods: {
    selectLink(e, target) {
      Vue.prototype.$decLinkBoxRef.show(e, "linkTarget");
      Vue.prototype.$decLinkBoxRef.$once("promise", (res) => {
        console.log(res);

        if (res.success) {
          target.linkArg = res;
        }
      });
    },
    // 选中图片区
    selectTagImg(item) {
      console.log(this.arg, "获取");
      Vue.prototype.$decImgMdRef.show("shopNav", "160 * 160");
      Vue.prototype.$decImgMdRef.$once("promise", (res) => {
        if (res.success) {
          if (!this.$isEmptyObj(item.linkArg)) {
            this.$set(item.linkArg, "tagImg", res.fileUrl);
          } else {
            item.linkArg = {
              tagImg: res.fileUrl,
            };
          }
        }
      });
    },
    clearLink() {
      this.arg.linkArg = {};
    },
    getLinkName(item) {
      if (!this.$isEmptyObj(item)) {
        return item.pathName + (item.argName ? `-${item.argName}` : "");
      } else {
        return "选择链接";
      }
    },
    // 打开语音选择弹窗
    addSource() {
      this.$refs.sourceWinRef.show();
    },
    // 接收传递过来的音频数据
    getSource(obj) {
      this.source = obj.fileUrl;
      this.arg.source = this.source;
    },
    changeRatio() {
      const ratio = `${this.width || 100}*${this.height || 66}`;
      if (ratio != this.arg.ratio) {
        this.arg.ratio = ratio;
      }
    },
    // 选中图片区
    selectImg() {
      Vue.prototype.$decImgMdRef.show("videoLink", "750 * 374");
      Vue.prototype.$decImgMdRef.$once("promise", (res) => {
        if (res.success) {
          this.arg.cover = res.fileUrl;
        }
      });
    },
  },
};
</script>
