<template>
  <div class="ChooseImg materialMan">
    <div class="head-title">
        <span class="point" @click="SelectRecycled(1)" :class="scgroupMsg.Recycled==2 ? 'blue' :''">素材管理</span> 
        <span v-if="scgroupMsg.Recycled==2"> / 回收站</span>
        <el-button @click="SelectRecycled(2)" style="float:right;margin-top: -5px;" size="small" type="primary">回收站</el-button>
    </div>
    <div v-loading="loading" style="margin-top:10px;background:#fff;padding:20px">
        <div class="TabDiv">
            <span :class="commonType==1?'spanActive':''" @click="handleClick(1)">图片</span>
            <span :class="commonType==2?'spanActive':''" @click="handleClick(2)">视频</span>
        </div>
        <div>
                <div style="height: 718px;" flex="box:first">
                    <div style="margin-right: 15px;width: auto;-webkit-box-flex: 0;flex-shrink: 0;flex-grow: 0;">
                        <el-button @click="addGroup" style="margin-bottom: 12px;" type="primary" size="small">添加分组</el-button>
                        <div style="border: 1px solid rgb(227, 227, 227);width:250px">
                            <!-- <div style="margin:20px 0">    
                                    <el-input v-model="val" style="width:90%;margin:0 5%" placeholder="请输入分类名称搜索" size="small"></el-input>
                            </div> -->
                            <div class="el-scrollbar" style="width: 100%;height:670px">
                                <div class="el-scrollbar__wrap" style="margin-bottom: -8px; margin-right: -8px;">
                                    <div class="el-scrollbar__view">
                                            <li :class="PageMsg.GroupId==0?'selectActive' : ''" @click="SelectGroup(0)" class="el-menu-item" style="padding-left: 10px;padding-right: 10px;">
                                                <i class="el-icon-tickets"></i> 
                                                <span>全部</span>
                                            </li> 
                                            <li :class="PageMsg.GroupId==item.Id?'selectActive' : ''" @click="SelectGroup(item.Id)" v-for="(item,index) in groupList" :key="index" class="el-menu-item" style="padding-left: 10px;padding-right: 10px;">
                                                <div flex="dir:left box:last">
                                                    <el-col :span="18" style="overflow: hidden; text-overflow: ellipsis;">
                                                        <i class="el-icon-tickets"></i> 
                                                        <span>{{item.Name}}</span>
                                                    </el-col> 
                                                    <el-col class="blue" :span="6">
                                                        <span v-if="scgroupMsg.Recycled==1" @click.prevent="EditGroup(item)">编辑 |</span>  
                                                        <span v-if="scgroupMsg.Recycled==2" @click.prevent="HYGroup(item)">还原 |</span>  
                                                        <!-- 回收 -->
                                                        <span v-if="scgroupMsg.Recycled==1" @click.prevent="HsGroup(item)">删除</span> 
                                                        <!--回收站删除  -->
                                                        <span v-if="scgroupMsg.Recycled==2" @click.prevent="DeleteGroup(item)">删除</span>
                                                    </el-col>
                                                </div>
                                            </li>
                                        </div>
                                    </div>
                                </div>
                        </div>
                    </div>
                    <div flex="dir:top" class="box">
                        <div>
                            <div class="basefix" style="margin-bottom:12px">
                                <span>全部</span>
                                <div style="display:inline-block;float:right">
                                    <div style="margin-left: 20px;display:inline-block;" class="appendInput">
                                        <el-input @keyup.enter.native="GetPageList()" size="small" style="width:250px" placeholder="请输入内容" v-model="PageMsg.Name">
                                            <el-button @click="GetPageList" slot="append" icon="el-icon-search"></el-button>
                                        </el-input>
                                    </div>
                                    <el-checkbox style="margin-left:12px" :indeterminate="isIndeterminate" v-model="checkAll" @change="CheckAllChange">全选</el-checkbox>
                                    <el-button v-if="PageMsg.Recycled==1" @click="HsPage" style="margin:0 12px" size="small">删除</el-button>
                                    <el-button v-if="PageMsg.Recycled==2" @click="HYPage" style="margin-left:12px" size="small">还原</el-button>
                                    <el-button v-if="PageMsg.Recycled==2" @click="DeletePage" size="small">删除</el-button>
                                    <el-dropdown v-if="scgroupMsg.Recycled==1" size="small" split-button>
                                        移动至
                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item v-for="(item,index) in groupList" :key="index">
                                                <div @click="SelectPageId(item)">{{item.Name}}</div>
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                        </el-dropdown>
                                </div>

                            </div>
                            <div style="border: 1px solid rgb(227, 227, 227);height:674px">
                                <div class="basefix app-attachment-list">
                                    <template v-if="PageMsg.Type==1">
                                        <div class="material-item material-upload">
                                            <div class="app-upload" flex="main:center cross:center" style="width: 140px; height: 140px;">
                                                    <el-upload class="avatar-uploader" action="" 
                                                    accept="image/jpeg,image/gif,image/png,image/bmp"
                                                    :show-file-list="false" :http-request="UploadImage">
                                                    <i class="el-icon-upload"></i>
                                                    </el-upload>
                                                
                                            </div>
                                        </div>
                                        <el-tooltip v-for="(item,index) in PageList" :key="index" class="item" effect="dark" :content="item.Name" placement="top-start">
                                            <div @click="PageSelect(item,index)" :class="item.Selected ? 'selected' :''" class="el-tooltip item material-item ">
                                                <img :src="getIconLink(item.Path)" class="material-img" style="width: 140px; height: 140px;">
                                                <div flex="dir:left" style="margin-top: 5px;">
                                                    <div class="material-name">{{item.Name}}</div> 
                                                    <div style="margin: 0px 5px;">|</div> 
                                                    <div>
                                                        <button type="button" class="el-button el-button--text" style="padding: 0px;">
                                                            <span @click="EditPage(item)">编辑</span>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </el-tooltip>
                                    </template>
                                    <template v-if="PageMsg.Type==2">
                                        <div class="material-item material-upload">
                                            <div class="app-upload" flex="main:center cross:center" style="width: 140px; height: 140px;">
                                                    <el-upload class="avatar-uploader" action="" 
                                                    :before-upload="beforeAvatarUpload"
                                                    accept="video/mp4,video/ogg,video/webm"
                                                    :show-file-list="false" :http-request="UploadImage">
                                                    <i class="el-icon-upload"></i>
                                                    </el-upload>
                                            </div>
                                        </div>
                                        <el-tooltip v-for="(item,index) in PageList" :key="index" class="item" effect="dark" :content="item.Name" placement="top-start">
                                            <div @click="PageSelect(item,index)" :class="item.Selected ? 'selected' :''" class="el-tooltip item material-item ">
                                                <img :src="getIconLink(item.Path)+'?x-oss-process=video/snapshot,t_9,f_jpg,w_299,h_0,m_fast'" class="material-img" style="width: 140px; height: 140px;">
                                                <div class="material-video-info"><i class="el-icon-video-play"></i> <span>{{Time(item.VideoTime)}}</span></div>
                                                <div flex="dir:left" style="margin-top: 5px;">
                                                    <div class="material-name">{{item.Name}}</div> 
                                                    <div style="margin: 0px 5px;">|</div> 
                                                    <div>
                                                        <button type="button" class="el-button el-button--text" style="padding: 0px;">
                                                            <span @click="EditPage(item)">编辑</span>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </el-tooltip>
                                    </template>
                                    
                                    
                                </div>
                                <div style="padding-right:10px">
                                    <el-pagination style="text-align:right"
                                    background
                                    :current-page="currentPage4"
                                    @current-change="handleCurrentChange"
                                    :page-size="PageMsg.pageSize"
                                    layout="prev, pager, next,jumper"
                                    :total="total">
                                    </el-pagination>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
            <video style="display:none;" controls="controls" id="aa" oncanplaythrough="myFunction(this)">
	   	
	   </video>

    </div>
    <!-- 新增分组 -->
    <el-dialog title="分组管理" :visible.sync="addGroupMsgDig" width="400px">
      <el-form :model="addGroupMsg" :rules="addGroupMsgrules" ref="addGroupMsg" label-width="100px">
        <el-form-item label="分组名称" prop="Name">
            <el-input
                size="small"
                type="text"
                placeholder="请输入内容"
                v-model="addGroupMsg.Name"
                maxlength="8"
                show-word-limit
                >
            </el-input>
        </el-form-item>
        <el-form-item label="排序" prop="Sort">
          <el-input @keyup.native="checkInteger(addGroupMsg,'Sort')" size="small" v-model="addGroupMsg.Sort"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="addGroupMsgDig = false">取 消</el-button>
        <el-button size="small" type="primary" @click="GroupsubmitForm('addGroupMsg')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改素材 -->
    <el-dialog title="图片名称修改" :visible.sync="pageMsgDig" width="400px">
      <el-form :model="addpageMsg" :rules="addpageMsg" ref="addpageMsg" label-width="100px">
        <el-form-item label="图片名称" prop="Name">
            <el-input
                size="small"
                type="text"
                placeholder="请输入内容"
                v-model="addpageMsg.Name"
                >
            </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="pageMsgDig = false">取 消</el-button>
        <el-button size="small" type="primary" @click="pagesubmitForm('addpageMsg')">确 定</el-button>
      </span>
    </el-dialog>
    
    
  </div>
</template>

<script>
export default {
  name: 'ChooseImg',
  data(){
    return{
        loading:false,
        commonType:1,
        activeName:'first',
        val:'',
        Id:'',
        currentPage4:1,
        scgroupMsg:{
            Id:0,
            Name:'',
            Type:1,
            Recycled:1,
        },
        isIndeterminate:false,
        groupList:[],
        addGroupMsg:{
            Id:0,
            Name:'',
            Type:'',
            Sort:'',
        },
        addGroupMsgrules:{
            Name: [{
            required: true,
            message: '请填写分组名称',
            trigger: 'blur'
            }],
            Sort: [{
            required: true,
            message: '请填写排序',
            trigger: 'blur'
            }],
        },
        addGroupMsgDig:false,
        PageMsg:{
            Id:0,
            Name:'',
            Type:1,
            Recycled:1,
            pageIndex:1,
            pageSize:15,
            GroupId:0,
        },
        PageList:[],
        total:0,
        addpageMsg:{
            Id:0,
            Name:'',
            Type:1,
            GroupId:0,
            Path:'',
            Image:'',
            VideoTime:0,
            WithHeight:0,
        },
        pageMsgDig:false,
        checkList:[],
        checkAllList:[],
        checkAll:false,

    }
  },
  created(){
      this.GetMemberGradeList();
      this.GetPageList();
  },
  mounted(){
    
  },
  methods:{
    Time(value){
        var theTime = parseInt(value);// 秒
        var middle= 0;// 分
        var hour= 0;// 小时

        if(theTime > 60) {
            middle= parseInt(theTime/60);
            theTime = parseInt(theTime%60);
            if(middle> 60) {
                hour= parseInt(middle/60);
                middle= parseInt(middle%60);
            }
        }
        var result = ""+parseInt(theTime);
        if(theTime<10){
            result="0"+parseInt(theTime);
        }
        if(middle > 0) {
            result = ""+parseInt(middle)+":"+result;
        }
        else{
            result = "00:"+result;
        }
        if(hour> 0) {
            result = ""+parseInt(hour)+"小时"+result;
        }
        return result;
    },
    SelectPageId(item){
        this.PageList.forEach(item=>{
            if(item.Selected){
                this.checkList.push(item.Id)
            }
        })
        if(this.checkList.length==0){
            this.Error("至少选择一项！");
            return;
        }
        let MaterialIds= this.checkList.join(",");
        let msg={
            MaterialIds:MaterialIds,
            GroupId:item.Id,
            Type:this.commonType
        }
        this.apipost("/api/product/SetMaterialInfoTransfer",msg, res => {
            this.loading=false;
            if(res.data.resultCode==1){
                this.GetPageList();
                this.checkList=[];
            }
        })
    },
    //   全选
    CheckAllChange(val){
        this.PageList.forEach(item=>{
            if(val){
                item.Selected=true;
            }else{
                item.Selected=false;

            }
        })
    },
    //   删除
    DeletePage(){
        this.checkList=[];
        this.PageList.forEach(item=>{
            if(item.Selected){
                this.checkList.push(item.Id)
            }
        })
        if(this.checkList.length==0){
            this.Error("至少选择一项！");
            return;
        }
        let MaterialIds= this.checkList.join(",");
        this.loading=true;
        this.apipost("/api/product/DelMaterialInfo",{MaterialIds:MaterialIds}, res => {
            this.loading=false;
            if(res.data.resultCode==1){
                this.GetPageList();
                this.checkList=[];
            }
        })
    },
    // 还原
    HYPage(){
        this.checkList=[];
        this.PageList.forEach(item=>{
            if(item.Selected){
                this.checkList.push(item.Id)
            }
        })
        if(this.checkList.length==0){
            this.Error("至少选择一项！");
            return;
        }
        let MaterialIds= this.checkList.join(",");
        this.loading=true;
        this.apipost("/api/product/SetMaterialInfoRestore",{MaterialIds:MaterialIds}, res => {
            this.loading=false;
            if(res.data.resultCode==1){
                this.GetPageList();
                this.checkList=[];
            }
        })
    },
    // 回收
    HsPage(){
        this.checkList=[];
        this.PageList.forEach(item=>{
            if(item.Selected){
                this.checkList.push(item.Id)
            }
        })
        if(this.checkList.length==0){
            this.Error("至少选择一项！");
            return;
        }
        let MaterialIds= this.checkList.join(",");
        this.loading=true;
        this.apipost("/api/product/SetMaterialInfoRecycled",{MaterialIds:MaterialIds}, res => {
            this.loading=false;
            if(res.data.resultCode==1){
                this.GetPageList();
                this.checkList=[];
            }
        })

    },
    // 单个删除
    PageSelect(item,index){
        item.Selected=!item.Selected;
    },
    // 数组去重
    unique(arr) {
        return arr.filter(function(item, index, arr) {
            //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
            return arr.indexOf(item, 0) === index;
        });
    },
    
    SelectGroup(id){
        this.PageMsg.GroupId=id;
        this.addpageMsg.GroupId=id;
        this.GetPageList();
    },
    EditPage(item){
        this.pageMsgDig=true;
        this.addpageMsg={
            Id:item.Id,
            Name:item.Name,
            Type:item.Type,
            GroupId:item.GroupId,
            Path:item.Path,
            Image:item.Image,
            VideoTime:item.VideoTime,
            WithHeight:item.WithHeight,
        }
    },
    pagesubmitForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
                this.apipost('/api/product/SetMaterialInfo',this.addpageMsg,
                    res => {
                    if (res.data.resultCode === 1) {
                        this.GetPageList();
                        this.Success(res.data.message)
                        this.pageMsgDig=false;

                    } else {
                        this.Error(res.data.message);
                    }
                    },
                    null
                );
            } else {
            return false;
            }
        });
    },
    beforeAvatarUpload(file) {
		this.getTimes(file); //
	},
    getTimes(file) {  //获取时长
        var content = file;
        var url = URL.createObjectURL(content);
        //经测试，发现audio也可获取视频的时长
        var audioElement = new Audio(url);
        audioElement.addEventListener("loadedmetadata", (_event) => {
            this.audioDuration = parseInt(audioElement.duration);
            this.addpageMsg.VideoTime=this.audioDuration;
        });
    },
    UploadImage(file) {
        this.UploadFileToTencent(this.FileType().GoodsImg, file.file, res => {
          if (res.resultCode == 1) {
              if(this.addpageMsg.Type==2){
                    this.addpageMsg.Image = res.FileUrl;
              }
                this.addpageMsg.Path = res.FileUrl;
                this.addpageMsg.Name = res.FileName;
                this.addPageList();
          }
        })
    },
    // 新增素材信息
    addPageList(){
        this.apipost("/api/product/SetMaterialInfo",this.addpageMsg, res => {
            if(res.data.resultCode==1){
                this.GetPageList();
                
            }
        })
    },
    SelectRecycled(num){
        this.scgroupMsg.Recycled=num;
        this.PageMsg.Recycled=num;
        this.GetMemberGradeList();  
        this.GetPageList();  
    },
    EditGroup(item){
        this.addGroupMsgDig=true;
        this.addGroupMsg={
            Id:item.Id,
            Name:item.Name,
            Type:item.Type,
            Sort:item.Sort,
        }
    },
    HYGroup(item){
        let that=this;
        that.$confirm('是否还原?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.apipost('/api/product/SetMaterialGroupRestore',{GroupId:item.Id},
                res => {
                if (res.data.resultCode === 1) {
                    this.GetMemberGradeList();
                    this.Success(res.data.message)

                } else {
                    this.Error(res.data.message);
                }
                },
                null
            );
        }).catch(() => {
            
        });
    },
    HsGroup(item){
        let that=this;
        that.$confirm('是否删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.apipost('/api/product/SetMaterialGroupRecycled',{GroupId:item.Id},
                res => {
                if (res.data.resultCode === 1) {
                    this.GetMemberGradeList();
                    this.Success(res.data.message)

                } else {
                    this.Error(res.data.message);
                }
                },
                null
            );
        }).catch(() => {
            
        });
    },
    DeleteGroup(item){
        let that=this;
        that.$confirm('是否删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.apipost('/api/product/DelMaterialGroupInfo',{GroupId:item.Id},
                res => {
                if (res.data.resultCode === 1) {
                    this.GetMemberGradeList();
                    this.Success(res.data.message)

                } else {
                    this.Error(res.data.message);
                }
                },
                null
            );
        }).catch(() => {
            
        });
    },
    addGroup(){
        this.addGroupMsgDig=true;
        this.addGroupMsg={
            Id:0,
            Name:'',
            Type:this.commonType,
            Sort:'',
        }

    },
    GroupsubmitForm (formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
                this.apipost('/api/product/SetMaterialGroupInfo',this.addGroupMsg,
                    res => {
                    if (res.data.resultCode === 1) {
                        this.GetMemberGradeList();
                        this.Success(res.data.message)
                        this.addGroupMsgDig=false;

                    } else {
                        this.Error(res.data.message);
                    }
                    },
                    null
                );
            } else {
            return false;
            }
        });
    },
    GetMemberGradeList(){
        this.loading=true;
        this.apipost("/api/product/GetMaterialGroupList",this.scgroupMsg, res => {
            this.loading=false;
            this.groupList=res.data.data;
        })
    },
    GetPageList(){
        this.loading=true;
        this.apipost("/api/product/GetMaterialInfoPageList",this.PageMsg, res => {
            this.loading=false;
            this.total=res.data.data.count;
            let data=res.data.data.pageData;
            this.checkAllList=[];
            data.forEach(item=>{
                this.checkAllList.push(item.Id)
                item.Selected=false;
            })
            this.PageList=data;

            
        })
    },
    handleClick(val){
        this.commonType=val;
        this.scgroupMsg.Type=val;
        this.PageMsg.Type=val;
        this.addpageMsg.Type=val;
        this.GetMemberGradeList();  
        this.GetPageList(); 

    },
    handleCurrentChange(val) {
        this.PageMsg.pageIndex = val;
        this.GetPageList();
    },
    
  },
}
</script>

<style>
.materialMan .material-video-info {
    background: rgba(0, 0, 0, .35);
    color: #fff;
    position: absolute;
    left: 10px;
    bottom: 31px;
    padding: 1px 3px;
    font-size: 14px;
}
.materialMan .TabDiv .spanActive{
    border-bottom: 2px solid #409EFF;
    color:#409EFF;
}
.materialMan .TabDiv span{
    font-size: 14px;
    margin-right: 20px;
    display: inline-block;
    height: 100%;
    cursor: pointer;
}
.materialMan .TabDiv{
    height: 40px;
    line-height: 40px;
    border-bottom: 2px solid #f3f3f3;
    margin-bottom: 20px;
}
.materialMan .selectActive .el-icon-tickets{
    color: #409EFF;
}
.materialMan .selectActive{
    color: #409EFF;
}
.materialMan .material-name {
    color: #666666;
    font-size: 13px;
    margin-top: 0px;
    margin-right: auto;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.materialMan .material-item.checked, .material-item.selected {
    box-shadow: 0 0 0 1px #1ed0ff;
    background: #daf5ff;
    border-radius: 5px;
}
.materialMan .material-upload i {
    font-size: 30px;
    color: #909399;
}
.materialMan .material-item {
    display: inline-block;
    cursor: pointer;
    position: relative;
    float: left;
    width: 160px;
    height: 180px;
    margin: 7.5px;
    text-align: center;
    padding: 10px 10px 0;
}
.materialMan .material-upload {
    box-shadow: none;
    border: 1px dashed #b2b6bd;
    height: 140px;
    width: 140px;
    margin: 17.5px;
    padding: 0;
}

.ChooseImg .app-attachment-list{
    padding: 5px;
}
.materialMan .appendInput .el-input.is-active .el-input__inner,.materialMan .appendInput .el-input__inner:focus{
    border-color: #DCDFE6;
}
.ChooseImg .appendInput .el-input__inner{
    border-right: none;
    outline: none;
}
.ChooseImg .appendInput .el-input-group__append{
    background-color: #fff!important;
    border-left: none;
    padding: 0 15px;
}
</style>
