<style>
  .CLM-Form .el-input__inner {
    background: transparent;
    border: 0;
  }

  .CLM-Form .el-input-group__append {
    background: transparent;
    border: 0;
  }

  .common_Style {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
  }

  .classForm_monday {
    background-color: #ced9f8;
    color: #2961FE;
  }

  .classForm_tuesday {
    background-color: #d9f3ff;
    color: #3FC4FF;
  }

  .classForm_wednesday {
    background-color: #f6e2cb;
    color: #F28C1D;
  }

  .classForm_thursday {
    background-color: #ccf3eb;
    color: #02C499;
  }

  .classForm_friday {
    background-color: #f7cfd6;
    color: #F72E52;
  }

  .classForm_saturday {
    background-color: #fff5cc;
    color: #FFCC00;
  }

  .classForm_sunday {
    background-color: #e6e3fe;
    color: #8175FB;
  }

  .CLM-Form .Emp_Line {
    width: 3px;
    height: 10px;
    background-color: #3FC4FF;
    margin-right: 10px;
  }

  .CLM-Form .EmpLine_title {
    display: flex;
    align-items: center;
    font-size: 12px;
    margin-bottom: 20px;
  }

  .planTimeLi2 tbody::before {
    content: '';
    display: table-row;
    height: 20px;
  }
</style>
<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale">
    <q-card style="width: 800px;max-width:900px;" class="CLM-Form">
      <q-card-section>
        <div class="text-h6">{{optionTitle}}</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="EmpLine_title">
          <div class="Emp_Line"></div>
          <div>基本信息</div>
        </div>
        <div class="row wrap">
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.WordType" ref="WordType"
              class="col-6 q-pr-lg q-pb-lg" label="单词类型" :rules="[val => !!val || '请填写单词类型']" />
          </div>
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.WordContent" ref="WordContent"
              class="col-6 q-pr-lg q-pb-lg" label="单词内容" :rules="[val => !!val || '请填写单词内容']" />
          </div>
        </div>
        <div class="row wrap">
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.WordWrite" ref="WordWrite"
              class="col-6 q-pr-lg q-pb-lg" label="日文书写" />
          </div>
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.ChineseMean" ref="ChineseMean"
              class="col-6 q-pr-lg q-pb-lg" label="中文意思" />
          </div>
        </div>
        <div class="row wrap" style="align-items:center">
          <div class="col-6">
            <el-upload class="avatar-uploader " action="" :before-upload="uploadFile" :show-file-list="false">
              <q-btn color="accent" size="sm" class="q-mr-md" icon="cloud_upload" label="上传">
              </q-btn>
            </el-upload>
          </div>
          <div class="col-6">
            <audio v-if="objOption.FileUrl" :src="objOption.FileUrl" controls="controls">
              您的浏览器不支持 audio 标签。
            </audio>
          </div>
        </div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right" class="bg-white">
        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeCourseForm" />
        <q-btn label="保存" color="accent q-px-md" style="font-weight:400 !important" :loading="saveWordLoading"
          @click="saveWords">
        </q-btn>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  import {
    GetCourseWords,
    SetCourseWords
  } from '../../api/course/index'
  import {
    UploadSelfFile
  } from "../../api/common/common"; //上传图片
  export default {
    components: {},
    props: {
      saveObj: {
        type: Object,
        default: null
      },
      addObj: {
        type: Object,
        default: null
      },
      ChapterId: {
        type: Number,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        objOption: {
          Id: 0, //编号（新增传0）
          CourseId: 1, //课程编号
          ChapterId: 1, //章节编号
          WordType: "", //单词类型
          WordContent: "", //单词内容
          WordTone: "", //单词声调
          WordWrite: "", //日文书写
          ChineseMean: "", //中文意思
          FileUrl: "", //读音文件路径
        },
        optionTitle: "",
        saveWordLoading: false,
        FileName: ''
      }
    },
    created() {

    },
    mounted() {
      this.initObj()
    },
    methods: {
      //初始化表单
      initObj() {
        if (this.saveObj && this.saveObj.Id > 0) {
          GetCourseWords({
            Id: this.saveObj.Id
          }).then(res => {
            if (res.Code == 1) {
              var tempDate = res.Data;
              this.objOption.Id = tempDate.Id;
              this.objOption.CourseId = tempDate.CourseId;
              this.objOption.ChapterId = tempDate.ChapterId;
              this.objOption.WordType = tempDate.WordType;
              this.objOption.WordContent = tempDate.WordContent;
              this.objOption.WordTone = tempDate.WordTone;
              this.objOption.WordWrite = tempDate.WordWrite;
              this.objOption.ChineseMean = tempDate.ChineseMean;
              this.objOption.FileUrl = tempDate.FileUrl;
            }
          })
          this.optionTitle = "修改单词信息"
        } else {
          this.optionTitle = "新增单词"
          this.objOption.Id = 0;
          this.objOption.CourseId = this.addObj.CourseId;
          this.objOption.ChapterId = this.ChapterId;
          this.objOption.WordType = '';
          this.objOption.WordContent = '';
          this.objOption.WordTone = '';
          this.objOption.WordWrite = '';
          this.objOption.ChineseMean = '';
          this.objOption.FileUrl = '';
        }
      },
      //关闭弹窗
      closeCourseForm() {
        this.$emit('close');
        this.persistent = false;
      },
      //上传音频
      uploadFile(files) {
        // 文件类型进行判断
        let types = ['mp3', 'wma', 'wav', 'amr'];
        const isAudio = types.includes(files.type);
        if (files && files.name) {
          let flieArr = files.name.split(".");
          let fileSuffix = flieArr[flieArr.length - 1];
          if (fileSuffix != 'mp3') {
            this.$q.notify({
              type: 'negative',
              message: `请上传mp3格式文件!`,
              position: 'top'
            })
            return
          }
          UploadSelfFile('words', files, res => {
            if (res.Code == 1) {
              this.objOption.FileUrl = res.FileUrl;
              this.FileName = res.FileName ? res.FileName : '';
            }
          })
        }
      },
      playVoice(_url) {
        // TODO 这里暂时没处理 音频播放中暂停
        let vm = this
        if (vm.voiceActive && (vm.voiceActive != index)) { //如果再放一个点击另一个上一个清0
          vm.dataList[vm.voiceActive].timevalue = 0
        }
        vm.playRec = new BenzAMRRecorder()
        //⚠️注意跨域问题
        vm.playRec.initWithUrl(_url).then(function () {
          vm.voiceActive = index
          vm.playRec.play()
        }).catch((e) => {
          vm.$message.error('播放录音失败')
        })
      },
      //保存单词
      saveWords() {
        if (this.objOption.WordType == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请填写单词类型`
          })
          return;
        }
        if (this.objOption.WordContent == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请填写单词内容`
          })
          return;
        }
        this.saveWordLoading = true;
        SetCourseWords(this.objOption).then(res => {
          this.saveWordLoading = false;
          if (res.Code == 1) {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '保存成功!',
              position: 'top'
            })
            this.$emit('success', this.ChapterId);
            this.$emit('close');
          }
        })
      }
    }
  }
</script>