<template>
  <div class="materialManage page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-select filled @input="resetSearch" option-value="Id" option-label="Name" v-model="msg.MediaGroupId"
            ref="Id" :options="classifyList" label="分组" :dense="false" emit-value map-options />
        </div>
        <div class="col-3">
          <q-input @keyup.enter.native="resetSearch" @clear="resetSearch()" clearable filled v-model="msg.MediaName"
            label="输入搜索内容" maxlength="20" />
        </div>
      </div>
    </div>
    <div class="page-content">
      <q-tabs style="margin-bottom:20px;" v-model="tabCheck" narrow-indicator dense align="left" class="text-primary">
        <q-tab :ripple="false" :name="x.Id" :label="x.Name" v-for="(x,y) in MediumList" :key="y"
          @click="msg.Type = x.Id,resetSearch()" />
      </q-tabs>
      <div v-if="tabCheck=='1'">
       <imgmaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren"
        @getdelete="getdelete" @getmove="getmove"></imgmaterial>
      </div>
      <div v-if="tabCheck=='2'">
        <audiomaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren"  @getdelete="getdelete" @getmove="getmove"></audiomaterial>
      </div>
      <div v-if="tabCheck=='3'">
        <videomaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren"  @getdelete="getdelete" @getmove="getmove"></videomaterial>
      </div>
    </div>

    <q-dialog v-model="Ismove" persistent>
      <q-card style="width: 520px; max-width: 80vw;" class="addscfile">
        <q-card-section>
          <div class="text-h6">选择分组</div>
        </q-card-section>
        <q-separator />
        <q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
          <q-select filled stack-label option-value="Id" option-label="Name" v-model="moveMsg.MediumGroupId"
            @input="$forceUpdate()" ref="Id" :options="allclassifyList" label="分组" :dense="false" emit-value
            map-options />
        </q-card-section>
        <q-separator />
        <q-card-actions align="right" class="bg-white">
          <q-btn class="q-mr-md" label="取消" @click="Ismove=false" />
          <q-btn color="accent" class="q-mr-md" label="确定" @click="savemove()" />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
  import {
    GetContributeMediumType,
    getWeChatMediumGroupList,
    GetContributeMediumPage,
    GetContributeMediumGroupList,
    SetContributeMediumMoveGroup,
    DelContributeMediumBatch
  } from '../../../api/system/wechat';

  import imgmaterial from '../components/imgmaterial'
  import audiomaterial from '../components/audiomaterial'
  import videomaterial from '../components/videomaterial'

  import BenzAMRRecorder from 'benz-amr-recorder'

  export default {
    components: {
      imgmaterial,
      audiomaterial,
      videomaterial
    },
    meta: {
      title: "素材库"
    },
    name: "materialManage",
    data() {
      return {
        loading: false,
        PageCount: 0,
        tabCheck: 1,
        msg: {
          pageIndex: 1,
          pageSize: 10,
          rowsPerPage: 10,
          MediaGroupId: 0, //分组
          Type: 1, //类型
          MediaName: '',
        },
        classifyList: [],
        MediumList: [],
        dataList: [],
        allclassifyList: [],
        Ismove: false,
        moveMsg: {
          MediumIds: '',
          MediumGroupId: '',
        }
      }
    },
    created() {},
    mounted() {
      this.getMediumTypeList() //素材类型枚举
      this.getWeChatMediumGroupList() //素材分组
      this.getList() //获取列表数据
    },
    methods: {
      getMediumTypeList() {
        GetContributeMediumType({}).then(res => {
          this.MediumList = res.Data
        })
      },
      getWeChatMediumGroupList() {
        GetContributeMediumGroupList({}).then(res => {
          this.classifyList = res.Data
          this.allclassifyList = JSON.parse(JSON.stringify(res.Data))
          let obj = {
            Name: '全部',
            Id: 0,
          }
          this.classifyList.unshift(obj)
        })
      },
      getList() {
        this.loading = true
        if (this.tabCheck == 1) {
          this.msg.pageSize = 15
        } else if (this.tabCheck == 2 || this.tabCheck == 3) {
          this.msg.pageSize = 12
        }
        GetContributeMediumPage(this.msg).then(res => {
            this.loading = false
            this.dataList = res.Data.PageData;
            this.PageCount = res.Data.Count
            this.dataList.forEach(x => {
              x.check = false;
              // let amr = new BenzAMRRecorder()
              // if (x.Type == 4 && x.AudioModel != null) {
              //   x.timevalue = 0;
              //   amr.initWithUrl(x.AudioModel.AudioPath).then(function () {
              //     x.duration = amr.getDuration()
              //   }).catch((e) => {

              //   })
              // }
            })
          })
          .catch(err => {
            this.loading = false
          })
      },
      changePage(e) {
        if (this.tabCheck == 0 || this.tabCheck == 4) {
          this.$refs.allm.stopPlayVoice()
        }
        this.msg.pageIndex = e;
        this.getList()
      },
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getList()
      },
      getchildren(addMsg) { //子级过来的新增和修改
        this.getList()
      },
      getdelete() { //批量删除
        let data = []
        this.dataList.forEach(x => {
          if (x.check == true) {
            data.push(x.Id)
          }
        })
        if (data.length == 0) {
          this.$q.notify({
            type: 'negative',
            message: `请选择删除的对象`,
            position: 'top'
          })
          return
        }
        let msg = data.join(',')
        this.$q.dialog({
          title: '提示信息',
          message: '是否确定删除所选素材？',
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          DelContributeMediumBatch({
            MediumIds: msg
          }).then(res => {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: res.Message,
              position: 'top'
            })
            this.getList()

          })
        }).onCancel(() => {

        });
      },
      getmove() {
        let data = []
        this.dataList.forEach(x => {
          if (x.check == true) {
            data.push(x.Id)
          }
        })
        if (data.length == 0) {
          this.$q.notify({
            type: 'negative',
            message: `请选择分组的对象`,
            position: 'top'
          })
          return
        };
        this.moveMsg.MediumIds = data.join(',')
        this.Ismove = true
      },
      savemove() {
        if (this.moveMsg.MediumGroupId == '') {
          this.$q.notify({
            type: 'negative',
            message: `请选择分组选择`,
            position: 'top'
          })
          return
        }
        SetContributeMediumMoveGroup(this.moveMsg).then(res => {
          this.$q.notify({
            icon: 'iconfont icon-chenggong',
            color: 'accent',
            timeout: 2000,
            message: res.Message,
            position: 'top'
          })
          this.Ismove = false
          this.moveMsg.MediumGroupId = ''
          this.getList()

        })
      }

    }
  }

</script>

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

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

  .materialManage .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;
  }

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

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

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

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

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

  .materialupload {
    width: 118px;
    height: 118px;
    border-radius: 4px;
    border: 1px dashed #d9d9d9;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
  }

</style>
