<template>
  <div class="allmaterial" style="padding: 0;margin: 0;">
    <!-- <div class="page-search row items-center">
        <div class="col row wrap q-mr-lg q-col-gutter-md">
          
        </div>
      </div> -->
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat 
        class="sticky-column-table" separator="none" title="" :data="dataList" :columns="columns"
        row-key="name">

        <template v-slot:body-cell-title="props">
          <q-td :props="props" style="max-width: 200px;white-space:	normal;word-break:break-all">
            {{getType(props.row,'title')}}
          </q-td>
        </template>

        <template v-slot:body-cell-Content="props">
          <q-td :props="props" style="max-width: 500px;white-space:	normal;word-break:break-all;">
            <div  style="display: flex;align-items: center;">
              <span v-if="props.row.Type==1">{{getType(props.row,'content')}}</span>
              <q-img v-if="props.row.Type==2 || props.row.Type==3 || props.row.Type==6"
                :src="getType(props.row,'content')" style="width: 100px;height: 100px;border-radius: 6px;display: flex;">
              </q-img>
              <!-- <audio controls="controls"
               
                style="width: 200px;height: 40px;">
                <source :src="props.row.AudioModel.AudioPath" type="audio/ogg">
                <source :src="props.row.AudioModel.AudioPath" type="audio/mpeg">
              </audio> -->
              <q-circular-progress v-if='props.row.Type==4 && props.row.AudioModel && props.row.AudioModel.AudioPath'
                show-value class="text-red q-ma-md" :max='props.row.duration' :value="props.row.timevalue" size="70px"
                :thickness="0.2" color="light-blue" track-color="grey-3"
                @click.stop="playVoice(props.row.AudioModel.AudioPath,props.pageIndex)">
                <q-icon name="volume_up" class="q-mr-xs" />
                <span style="font-size: 11px;">
                  {{props.row.timevalue?props.row.timevalue.toFixed(1):0}}
                </span>

              </q-circular-progress>
              <video width="200" height="120" controls="controls"
                v-if="props.row.Type==5 && props.row.VideoModel && props.row.VideoModel.VideoPath">
                <source :src="props.row.VideoModel.VideoPath" type="video/ogg" />
                <source :src="props.row.VideoModel.VideoPath" type="video/mp4" />
                <source :src="props.row.VideoModel.VideoPath" type="video/webm" />
              </video>
              <div v-if="props.row.Type==7 && props.row.FileModel && props.row.FileModel.FilePath!=''"
                @click.stop="showUpLoadFile(props.row.FileModel)">
                <i v-if="props.row.FileModel.FilePath.substring(props.row.FileModel.FilePath.lastIndexOf('.')+1,props.row.FileModel.FilePath.length).toUpperCase()=='PDF'"
                  class="iconfont icon-pdf"></i>
                <i v-else-if="props.row.FileModel.FilePath.substring(props.row.FileModel.FilePath.lastIndexOf('.')+1,props.row.FileModel.FilePath.length).toUpperCase()=='TXT'"
                  class="iconfont icon-txt"></i>
                <i v-else-if="props.row.FileModel.FilePath.substring(props.row.FileModel.FilePath.lastIndexOf('.')+1,props.row.FileModel.FilePath.length).toUpperCase()=='DOCX' || 
                            props.row.FileModel.FilePath.substring(props.row.FileModel.FilePath.lastIndexOf('.')+1,props.row.FileModel.FilePath.length).toUpperCase()=='DOC'
                            " class="iconfont icon-word"></i>
                <i v-else class="iconfont icon-excel"></i>
              </div>
              <q-icon v-if="(props.row.Type==2 || props.row.Type==4 || props.row.Type==5 || props.row.Type==6 || props.row.Type==7)&&  props.row.Media_Id && props.row.Media_Id!=''"  
                size="20px" name="iconfont icon-yiqueren" color="green"  style="margin-left: 10px;" >
                <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
                  已更新
                </q-tooltip>
              </q-icon>
              <q-icon v-if="(props.row.Type==2 || props.row.Type==4 || props.row.Type==5 || props.row.Type==6 || props.row.Type==7)&&  props.row.Media_Id==''"  
                size="20px" name="iconfont icon-weiwancheng" color="red"  style="margin-left: 10px;" >
                <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
                  未更新
                </q-tooltip>
              </q-icon>
            </div>

          </q-td>
        </template>
        <template v-slot:bottom>
          <!-- <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" /> -->
        </template>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">

            <q-btn flat size="xs" icon="edit" style="font-weight:400;color: #3FC4FF" class="q-mr-xs" label="编辑"
              v-if="props.row.Type==1 || props.row.Type==3 || props.row.Type==6 " @click="goedit(props.row)" />
            <q-btn flat size="xs" icon="iconfont icon-yidongdao" style="font-weight:400;color: #3FC4FF" class="q-mr-xs"
              label="移动" @click="plmove(props)" />
            <q-btn flat size="xs" icon="delete" color="negative" class="q-mr-xs" label="删除"
              @click="goDetailed(props.row,'0')" />
          </q-td>
        </template>

      </q-table>
    </div>
    <div v-if="Isadd==true">
      <alladdsc :allclassifyList="allclassifyList" :type='showtype' @editsuccess="getchildren" :editobj='editobj'
        @getcancel='Isadd=false'></alladdsc>
    </div>

  </div>
</template>

<script>

  import alladdsc from './allAddSC'
  import BenzAMRRecorder from 'benz-amr-recorder'
  import {
    delWecharMediumInfo,//删除素材
  } from '../../../api/system/wechat';
  export default {
    components: {
      alladdsc,
    },
    name: "allmaterial",
    props: {
      dataList: {
        type: Array,
        default: [],
      },
      allclassifyList: {
        type: Array,
        default: [],
      }
    },
    data() {
      return {
        loading: false,
        Isadd: false,

        ISsystem: false,
        editobj: null,
        showtype: 1,
        msg: {
          pageIndex: 1,
          pageSize: 10,
          rowsPerPage: 10,
        },
        //公告column
        columns: [{
          name: 'title',
          field: 'title',
          label: '标题',
          align: 'left'
        },
        {
          name: 'Content',
          field: 'Content',
          label: '内容',
          align: 'left',
        },
        {
          name: 'UpdateByName',
          field: 'UpdateByName',
          label: '上传者',
          align: 'left'
        },
        {
          name: 'MediumGroupName',
          field: 'MediumGroupName',
          label: '分组',
          align: 'left'
        },
        {
          name: 'TypeName',
          field: 'TypeName',
          label: '类型',
          align: 'left'
        },
        {
          name: 'UpdateTime',
          field: 'UpdateTime',
          label: '添加时间',
          align: 'left'
        },
        {
          name: 'optioned',
          label: '操作',
          field: 'DeptId'
        }
        ],
        playRec: null, //播放对象
        voiceActive: null,

      }
    },
    created() {

    },
    destroyed(){//页面销毁时候清楚音频的播放
        if(this.playRec){
            if (this.playRec.isPlaying()) {
                this.playRec.stop()
            }
        }
    },
    methods: {

      getType(row, name) {
        let title = ''
        let content = ''
        if (row.Type == 1) {
          title = row.TextModel.Title
          content = row.TextModel.Content
        } else if (row.Type == 2) {
          title = row.ImageModel.ImageName
          content = row.ImageModel.ImagePath
        } else if (row.Type == 3) {
          title = row.ImgTextModel.Title
          content = row.ImgTextModel.ImgPath
        } else if (row.Type == 4) {
          title = row.AudioModel.AudioName
          content = row.AudioModel.AudioPath
        } else if (row.Type == 5) {
          title = row.VideoModel.VideoName
          content = row.VideoModel.VideoPath
        } else if (row.Type == 6) {
          title = row.AppletModel.Title
          content = row.AppletModel.ImagePath
        } else if (row.Type == 7) {
          title = row.FileModel.FileName
          content = row.FileModel.FilePath
        }
        if (name == 'title') {
          return title
        } else if (name == 'content') {
          return content
        }


      },
      showUpLoadFile(i) {
        // 文件类型进行判断

        if (
          i.FileName.substring(
            i.FileName.lastIndexOf(".") + 1,
            i.FileName.length
          ).toUpperCase() == "PDF" ||
          i.FileName.substring(
            i.FileName.lastIndexOf(".") + 1,
            i.FileName.length
          ).toUpperCase() == "TXT"
        ) {
          this.previewPDF(i.Url);
        } else {
          window.open(
            "https://view.officeapps.live.com/op/view.aspx?src=" + i.FilePath
          );
        }
      },
      goDetailed(row) {//删除
        let delMsg = {
          MediumIds: row.Id,
        };
        this.$q.dialog({
          title: '提示信息',
          message: '是否确定删除该素材？',
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          delWecharMediumInfo(delMsg).then(res => {
            if (res.Code == 1) {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '删除成功！',
                position: 'top'
              })
              this.$emit('editsuccess')
            }
          })
        }).onCancel(() => {

        });
      },
      plmove(row) {
        this.dataList[row.rowIndex].check = !this.dataList[row.rowIndex].check
        this.$emit('getmove')
      },
      goedit(row) {
        this.editobj = {}
        this.editobj.Id = row.Id;
        this.editobj.MediaGroupId = row.MediaGroupId;
        this.editobj.Type = row.Type;
        if (row.Type == 1) {
          this.editobj.TextModel = JSON.parse(JSON.stringify(row.TextModel));
        } else if (row.Type == 3) {
          this.editobj.ImgTextModel = JSON.parse(JSON.stringify(row.ImgTextModel));
        } else if (row.Type == 6) {
          this.editobj.AppletModel = JSON.parse(JSON.stringify(row.AppletModel));
        }
        this.showtype = row.Type.toString()

        this.Isadd = true
      },
      getchildren() {
        this.$emit('editsuccess')
        this.Isadd = false
      },
      playVoice(_url, index) {
        // TODO 这里暂时没处理 音频播放中暂停
        let vm = this
        if (vm.voiceActive && (vm.voiceActive != index)) {//如果再放一个点击另一个上一个清0
          vm.dataList[vm.voiceActive].timevalue = 0
        }
        if (vm.playRec !== null) {
          vm.stopPlayVoice(index)
        }
        vm.playRec = new BenzAMRRecorder()
        //⚠️注意跨域问题
        vm.playRec.initWithUrl(_url).then(function () {
          vm.voiceActive = index
          vm.playRec.play()
          let timer = setInterval(() => {
            vm.dataList[index].timevalue += 0.1;
            vm.$set(vm.dataList, index, vm.dataList[index])
            // vm.$forceUpdate();
          }, 100);

          vm.playRec.onEnded(function () {
            vm.voiceActive = null;
            vm.dataList[index].timevalue = 0
            clearInterval(timer);//停止
            setTimeout(() => {
              vm.$set(vm.dataList, index, vm.dataList[index])
            }, 1000);

          })
        }).catch((e) => {
          vm.$message.error('播放录音失败')
        })
      },
      //停止播放
      stopPlayVoice() {
        if(this.playRec){
          if (this.playRec.isPlaying()) {
            this.playRec.stop()
          }
        }
       
      },

    }
  }

</script>

<style>
  .allmaterial .Sysuser_Date .el-input--prefix .el-input__inner {
    background-color: red;
    border: 0;
  }

  .allmaterial .state-item {
    padding: 2px 5px;
    border-radius: 3px;
    text-align: center;
    font-size: 10px;
  }

  .allmaterial .frIdlist {
    padding: 3px 10px;
    border-radius: 3px;
    background: #EEEEEF;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer;
  }

  .class-popover .q-pr-lg {
    padding-right: 0;
    margin-top: 20px;
  }

  .allmaterial .el-date-editor.el-input {
    width: 100%;
  }

  .allmaterial .el-date-editor.el-input input {
    background-color: transparent !important;
  }

  .allmaterial .el-range-editor .el-range-input {
    background: none;
  }

  .Sysuser_Date .el-input__inner {
    background: transparent !important;
    border: 0 !important;
  }

  .allmaterial .el-drawer.rtl {
    overflow: inherit;
  }

  .allmaterial .icon-excel,
  .allmaterial .icon-pdf,
  .allmaterial .icon-txt,
  .allmaterial .icon-wenjian,
  .allmaterial .icon-yasuobao,
  .allmaterial .icon-shipin,
  .allmaterial .icon-word {
    font-size: 38px;
    color: green;
    line-height: 75px;
  }
</style>