<template>
  <div v-loading="loading" class="addOrEditIVRgreeting">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="欢迎词标题" prop="title">
        <el-input v-model="ruleForm.title"/>
      </el-form-item>
      <el-form-item label="坐席组" prop="groupcode">
        <el-select v-model="ruleForm.groupcode" placeholder="请选择坐席组">
          <el-option
            v-for="item in seatOptions"
            :key="item.zxzcode"
            :label="item.zxzname"
            :value="item.zxzcode"/>
        </el-select>
      </el-form-item>
      <el-form-item label="添加方式" prop="type">
        <el-radio-group v-model="ruleForm.type">
          <el-radio label="1">文本</el-radio>
          <el-radio label="2">语音文件</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="ruleForm.type==='1'" label="欢迎词内容" prop="content">
        <el-input :rows="6" v-model="ruleForm.content" type="textarea"/>
      </el-form-item>
      <el-form-item v-if="ruleForm.type==='2'" label="上传文件" prop="wavstr">
        <el-upload ref="upload" :show-file-list="false" :action="uploadData.uploadUrl" :data="uploadData.uploaderFiles" :on-success="uploadSuccess" :on-error="uploadError" :on-remove="uploadRemove" class="uploadFiles" multiple>
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <div v-if="ruleForm.type==='2'&& ruleForm.wavstr.length<1" class="el-form-item__error">请选择语音文件</div>
      </el-form-item>
      <el-form-item v-if="ruleForm.type==='2' && isShow" label="语音文件">
        <aplayer v-if="isShow" :music="musicList" theme="#41b883" />
      </el-form-item>
      <el-form-item label="是否启动" prop="isstate">
        <el-radio-group v-model="ruleForm.isstate">
          <el-radio label="1">启动</el-radio>
          <el-radio label="2">不启动</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="生效时间" required>
        <el-date-picker v-model="searchDate" type="datetimerange" range-separator="至" value-format="yyyy-MM-dd hh:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期"/>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input :rows="4" v-model="ruleForm.remark" type="textarea"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">立即保存</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import VueAplayer from 'vue-aplayer'
import {
  getIvrGreeting,
  addIvrGreeting,
  editIvrGreeting
} from '@/api/telCall/IVRgreeting'
import { delFiles, filterContent } from '@/utils'
import { getSeatGroup } from '@/api/commonAPI'
export default {
  name: 'AddOrEditIVRgreeting',
  components: {
    // 别忘了引入组件
    aplayer: VueAplayer
  },
  props: {
    rowid: {
      type: String,
      default: ''
    },
    layerid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      isShow: false,
      uploadData: {
        // 文件上传数据
        uploadUrl: this.$store.getters.serverConfig.BASE_API + 'fileserverapi/Api/Upload',
        uploaderFiles: {
          // 上传文件的参数 //是	string	模块code，如：test
          uploadtype: 'orderFiles'
        }
      },
      musicList: {
        title: '名称', // 歌曲名称
        artist: ' ', // 演唱者
        src: '', // 音频文件的 URL
        pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg' // 封面图片 URL
      },
      searchDate: '',
      files: [], // 否	list	语音文件
      seatOptions: [],
      ruleForm: {
        id: '',
        title: '',
        groupcode: '',
        type: '1',
        content: '',
        isstate: '1',
        sdate: '',
        edate: '',
        remark: '',
        wavstr: []
      },
      rules: {
        title: [
          { required: true, message: '请输入欢迎词标题', trigger: 'blur' }
        ],
        // groupcode: [
        //   { required: true, message: '请选择坐席组编号', trigger: 'change' }
        // ],
        type: [
          { required: true, message: '请选择添加方式', trigger: 'change' }
        ],
        isstate: [
          { required: true, message: '请选择是否启动', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请填写欢迎词内容', trigger: 'blur' }
        ],
        searchDate: [
          {
            type: 'datetimerange',
            required: true,
            message: '请选择生效时间',
            trigger: 'change'
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['avatar'])
  },
  created() {
    if (this.rowid) {
      this.ruleForm.id = this.rowid
      this.getDetail(this.rowid)
    }
  },
  mounted: function() {
    this.getSeatGroupSelects()
  },
  methods: {
    // 保存
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true
          // 添加
          if (!this.rowid) {
            this.ruleForm.sdate = this.searchDate && this.searchDate[0]
            this.ruleForm.edate = this.searchDate && this.searchDate[1]
            addIvrGreeting(this.ruleForm).then(response => {
              this.loading = false
              if (response.state.toLowerCase() === 'success') {
                this.$parent.$layer.close(this.layerid)
                this.$parent.getLists() // 重新加载父级数据
                this.$message.success('恭喜你，IVR欢迎词添加成功!')
              }
            }).catch(() => {
              this.loading = false
            })
            return
          }
          // 编辑
          this.ruleForm.sdate = this.searchDate && this.searchDate[0]
          this.ruleForm.edate = this.searchDate && this.searchDate[1]
          editIvrGreeting(this.ruleForm).then(response => {
            this.loading = false
            if (response.state.toLowerCase() === 'success') {
              this.$parent.$layer.close(this.layerid)
              this.$parent.getLists() // 重新加载父级数据
              this.$message.success('恭喜你，IVR欢迎词编辑成功!')
            }
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.$message.error('请输入有效的必填项信息!')
          return false
        }
      })
    },
    // 获取详情
    getDetail(rid) {
      getIvrGreeting(rid).then(response => {
        if (response.state.toLowerCase() === 'success') {
          const res = response.data
          this.ruleForm.title = res.title
          this.ruleForm.content = res.content
          this.ruleForm.groupcode = res.groupcode
          this.ruleForm.type = res.type && res.type.toString()
          // if(res.type==2){
          //   this.isShow=true;
          // }
          this.ruleForm.isstate = res.isstate && res.isstate.toString()
          this.searchDate = res.startdate + '至' + res.enddate
          this.ruleForm.remark = res.remark
          if (res.wavfile && res.wavfile.length > 0) {
            this.ruleForm.wavstr = res.wavfile
            this.musicList.artist = res.wavfile[0].filename
            this.musicList.src = res.wavfile[0].fileurl
            this.musicList.pic = this.avatar
            this.isShow = true
          }
        }
      })
    },
    // 文件上传
    uploadSuccess(response, file, fileList) {
      if (response.state.toLowerCase() === 'success') {
        this.files.push(response.data[0])
        this.ruleForm.wavstr = response.data
        this.musicList.artist = response.data[0].filename
        this.isShow = true
        // this.musicList.title = this.filename;
        this.musicList.src = response.data[0].fileurl
        this.musicList.pic = this.avatar
      } else {
        this.$message.error(response.message)
      }
    },
    uploadRemove(file, fileList) {
      if (this.ruleForm.files.length > 0) {
        for (let i = 0, len = this.ruleForm.files.length; i < len; i++) {
          if (this.ruleForm.files[i].filename === file.name) {
            delFiles(
              this.ruleForm.files[i].filesmallurl,
              this.ruleForm.files[i].fileurl
            )
            this.ruleForm.files.splice(i, 1)
            return
          }
        }
      }
    },
    uploadError(err, file, fileList) {
      // console.log(err)
      this.$message.error(err)
    },
    // 获取坐席组下拉数据
    getSeatGroupSelects() {
      return new Promise(resolve => {
        getSeatGroup().then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.seatOptions = response.data
          }
        })
        resolve()
      })
    }
  }
}
</script>
 <style lang="scss" >
// .addOrEditIVRgreeting .el-upload-list {
//   display: none;
// }
</style>
<style lang="scss" scoped>
</style>

