<template>
  <div class="dec-modify-content dec-set-voice">
    <div class="dec-flex-list side">
      <span class="d-left"> 选择风格 </span>
      <div class="d-right">
        <a-radio-group size="small" v-model="arg.styleArg" button-style="solid">
          <a-radio-button :value="'weChat'">微信</a-radio-button>
          <a-radio-button :value="'simple'">简易</a-radio-button>
        </a-radio-group>
      </div>
    </div>
    <template v-if="arg.styleArg === 'simple'">
      <div class="dec-flex-list side">
        <span class="d-left">设置标题</span>
        <div class="d-right" style="width: 286px">
          <a-input
            style="width: 100%"
            v-model="arg.title"
            placeholder="录音标题"
          />
        </div>
      </div>
      <div style="text-align: right" class="d-error mt-15" v-if="!arg.title">
        标题不能为空
      </div>
    </template>
    <div class="dec-flex-list side">
      <span class="d-left"
        >添加{{ arg.styleArg === "weChat" ? "头像" : "封面" }}</span
      >
      <div class="d-right border" style="width: 286px">
        <div class="dec-float-box">
          <template v-if="arg.titleImg">
            <div class="float-item" style="float: right">
              <a-icon
                type="close-circle"
                class="ic-close"
                @click="arg.titleImg = ''"
              />
              <img :src="arg.titleImg" alt draggable="false" />
            </div>
          </template>
          <div
            class="float-item ic-plus"
            style="float: right"
            @click="selectImg"
            v-else
          >
            <a-icon type="plus" />
          </div>
        </div>
      </div>
    </div>
    <div style="text-align: right" class="d-error mt-15" v-if="!arg.titleImg">
      选择图片
    </div>

    <div class="dec-flex-list side">
      <span class="d-left">添加音频</span>
      <div class="d-right" style="width: 286px">
        <a-button class="linkTarget" @click="addSource" style="width: 100%">
          <a class="dec-link-name" style="width: 100%">{{
            source || "选择音频"
          }}</a>
        </a-button>
      </div>
    </div>
    <div style="text-align: right" class="d-error mt-15" v-if="!source">
      请添加音频
    </div>

    <template v-if="arg.styleArg === 'simple'">
      <div class="dec-flex-list side">
        <span class="d-left">循环播放 </span>
        <div class="d-right">
          <a-switch
            v-model="arg.loop"
            checked-children="开"
            un-checked-children="关"
          />
        </div>
      </div>
    </template>
    <div class="dec-flex-list side">
      <span class="d-left">播放方式</span>
      <div class="d-right">
        <a-radio-group size="small" v-model="arg.play" button-style="solid">
          <a-radio-button :value="'again'">重播</a-radio-button>
          <a-radio-button :value="'continue'">继续</a-radio-button>
        </a-radio-group>
      </div>
    </div>
    <div class="d-tips dec-truncate" style="font-size: 14px">
      <em class="tip">T</em>
      重播方式指暂停再播放时将会从头开始播放
    </div>
    <div class="d-tips dec-truncate" style="font-size: 14px">
      <em class="tip">T</em>
      继续方式指暂停再播放时将从上次暂停处继续播放
    </div>
    <source-win
      ref="sourceWinRef"
      @choose="getSource"
      :ismp4="false"
    ></source-win>
  </div>
</template>

<script>
import Vue from "vue";
import sourceWin from "../../../modal/sourceModal";
export default {
  components: {
    sourceWin,
  },
  props: ["tab", "checked"],
  inject: ["decImgDomain"],
  data() {
    return {
      arg: null,
      playTxt: "点击播放",
      playing: false, // 正在播放
      source: "",
    };
  },
  created() {
    this.arg = this.tab.arg;
    this.source = this.arg.source;
  },
  methods: {
    selectImg() {
      Vue.prototype.$decImgMdRef.show("voiceLink", "160 * 160");
      Vue.prototype.$decImgMdRef.$once("promise", (res) => {
        if (res.success) {
          this.arg.titleImg = res.fileUrl;
        }
      });
    },
    // 打开语音选择弹窗
    addSource() {
      this.$refs.sourceWinRef.show();
    },
    // 接收传递过来的音频数据
    getSource(obj) {
      this.source = obj.fileUrl;
      this.arg.source = this.source;
    },
    // 播放结束
    endPlay() {
      if (!this.arg.loop) {
        this.playing = false;
        this.playTxt = "暂停";
      }
    },
  },
};
</script>
