<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 stack-label @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 standout="bg-primary text-white" v-model="msg.Content"
                        label="输入搜索内容" maxlength="20" />
                </div>
                <div class="col-6" style="color: red;display: flex;">
                    注：更新为整点更新到企业微信
                    (<span>
                        <i class="iconfont icon-weiwancheng" style="font-size: 14px;color: red;"></i>
                        未更新
                        <i class="iconfont icon-yiqueren" style="font-size: 14px;color: green;"></i>
                        已更新
                        
                    </span>)
                </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=='0'" >
                 <allmaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren"  @getmove="getmove" ref="allm"></allmaterial>
              </div>
            <div v-if="tabCheck=='1'">
                 <textmaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren"  @getmove="getmove"></textmaterial>
            </div>
            <div v-if="tabCheck=='2'">
                 <imgmaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren" @getdelete="getdelete" @getmove="getmove"></imgmaterial>
            </div>
            <div v-if="tabCheck=='3'">
                 <imgtextmaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren" @getdelete="getdelete" @getmove="getmove"></imgtextmaterial>
            </div>
            <div v-if="tabCheck=='4'">
                 <audiomaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren"  @getdelete="getdelete" @getmove="getmove" ref="allm"></audiomaterial>
            </div>
            <div v-if="tabCheck=='5'">
                 <videomaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren" @getdelete="getdelete" @getmove="getmove"></videomaterial>
            </div>
            <div v-if="tabCheck=='6'">
                 <appletmaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren" @getdelete="getdelete" @getmove="getmove"></appletmaterial>
            </div>
            <div v-if="tabCheck=='7'">
                 <filematerial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren" @getdelete="getdelete" @getmove="getmove"></filematerial>
            </div>
            <div style="width: 100%;height: 50px;">
                <el-pagination @current-change="changePage" style="float: right;margin-top: 9px;" layout="total,prev, pager, next, jumper"
                    :current-page.sync="msg.pageIndex" :page-size="msg.pageSize" :total='PageCount'>
                </el-pagination>
            </div>
            <q-inner-loading :showing="loading">
                <q-spinner-gears size="50px" color="primary" />
            </q-inner-loading>
            
        </div>
        <!-- <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="PageCount" :input="true" @input="changePage" /> -->
       
        <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 {
        getMediumTypeEnumList,
        getWeChatMediumGroupList,
        getWeChatMediumPageList,
        setWeChatMediumInfo,//新增修改素材
        delWecharMediumInfo,//删除
        setWecharMediumMore,//批量分组
    } from '../../api/system/wechat';
    import allmaterial from '../../components/enterprise/material/allmaterial'
    import textmaterial from '../../components/enterprise/material/textmaterial'
    import imgmaterial from '../../components/enterprise/material/imgmaterial'
    import imgtextmaterial from '../../components/enterprise/material/imgtextmaterial'
    import audiomaterial from '../../components/enterprise/material/audiomaterial'
    import videomaterial from '../../components/enterprise/material/videomaterial'
    import appletmaterial from '../../components/enterprise/material/appletmaterial'
    import filematerial from '../../components/enterprise/material/filematerial'
    import BenzAMRRecorder from 'benz-amr-recorder'

    export default {
        components: {
            allmaterial,//所有列表
            textmaterial,
            imgmaterial,
            imgtextmaterial,
            audiomaterial,
            videomaterial,
            appletmaterial,
            filematerial
        },
        meta: {
            title: "素材库"
        },
        name: "materialManage",
        data() {
            return {
                loading: false,
                PageCount: 0,
                tabCheck: 0,
                msg: {
                    pageIndex: 1,
                    pageSize: 10,
                    rowsPerPage: 10,
                    MediaGroupId: 0,//分组
                    Type: 0,//类型
                    Content: '',
                },
                classifyList: [],
                MediumList: [],
                dataList: [],
                allclassifyList: [],
                Ismove:false,
                moveMsg:{
                    MediumIds:'',
                    MediumGroupId:'',
                }
            }
        },
        created() {
            this.getMediumTypeList()//素材类型枚举
            this.getWeChatMediumGroupList()//素材分组
            this.getList()//获取列表数据
        },
        methods: {
            getMediumTypeList() {
                getMediumTypeEnumList({}).then(res => {
                    this.MediumList = res.Data
                    let obj = {
                        Name: '全部',
                        Id: 0,
                    }
                    this.MediumList.unshift(obj)
                })
            },
            getWeChatMediumGroupList() {
                getWeChatMediumGroupList({}).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==0 || this.tabCheck==1){
                    this.msg.pageSize = 15
                }else if(this.tabCheck==2 || this.tabCheck==3 || this.tabCheck==6){
                    this.msg.pageSize = 12
                }else if(this.tabCheck==4 || this.tabCheck==5 || this.tabCheck==7){
                    this.msg.pageSize = 10
                }
                getWeChatMediumPageList(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(() => {
                    delWecharMediumInfo({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
                }
                setWecharMediumMore(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>