<template>
  <div>
    <h3 class="see-title">{{ title }}</h3>
    <ul>
      <li>创建用户：{{ createby }}</li>
      <li>是否启动：{{ isstate }}</li>
      <li>文件类型：{{ type }}</li>
      <li>生效时间：{{ startdate }}</li>
      <li>失效时间：{{ enddate }}</li>
    </ul>
    <hr>
    <div class="centents">
      <div v-if="!isShow" class="textCon">
        <p class="words-title">IVR内容</p>
        <div class="centents-con">
          {{ content }}
        </div>
      </div>

      <div v-if="isShow" class="audioCon">
        <p class="words-title">语音文件</p>
        <div class="centents-con">
          <aplayer v-if="isShow" :music="musicList" theme="#41b883" />
        </div>
      </div>

      <p class="words-title">备注</p>
      <div class="centents-con">
        {{ remark }}
      </div>

    </div>
  </div>

</template>
<script>
import { mapGetters } from 'vuex'
import VueAplayer from 'vue-aplayer'
import { getIvrGreeting } from '@/api/telCall/IVRgreeting'
export default {
  name: 'SeeIvrGreeting',
  components: {
    // 别忘了引入组件
    aplayer: VueAplayer
  },
  props: {
    rowid: {
      type: String,
      default: ''
    },
    layerid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isShow: false,
      musicList: {
        title: '名称', // 歌曲名称
        artist: ' ', // 演唱者
        src: '', // 音频文件的 URL
        pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg' // 封面图片 URL
      },
      title: '',
      createby: '',
      isstate: '',
      type: '',
      startdate: '',
      enddate: '',
      content: '',
      remark: ''
    }
  },
  computed: {
    ...mapGetters(['avatar'])
  },
  created() {
    if (this.rowid) {
      this.getDetail(this.rowid)
    }
  },
  methods: {
    // 获取详情
    getDetail(rid) {
      getIvrGreeting(rid).then(response => {
        if (response.state.toLowerCase() === 'success') {
          const res = response.data
          this.title = res.title
          this.createby = res.createby
          this.startdate = res.startdate
          this.enddate = res.enddate
          if (res.type === 1) {
            this.type = '文本文件'
          } else {
            this.type = '语音文件'
          }
          if (res.isstate === 0) {
            this.isstate = '未启动'
          } else if (res.isstate === 1) {
            this.isstate = '生效中'
          } else {
            this.isstate = '已失效'
          }
          this.content = res.content
          this.remark = res.remark
          if (res.wavfile && res.wavfile.length > 0) {
            this.musicList.artist = res.wavfile[0].filename
            this.musicList.src = res.wavfile[0].fileurl
            this.musicList.pic = this.avatar
            this.isShow = true
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "src/../../../../styles/mixin.scss";
.centents-con {
  padding: 0 15px;
}
.see-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  padding: 10px 0 20px 0;
  margin: 0;
}
hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
}
ul {
  @include clearfix;
  list-style: none;
  padding: 10px 0 0 0;
  font-size: 13px;
  color: #676a6c;
  li {
    float: left;
    width: 33.3333%;
    margin-bottom: 10px;
  }
}
.words-title {
  font-size: 14px;
  color: #7a7a7a;
  margin-bottom: 10px;
  font-weight: 600;
}
</style>

