<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 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" multiple>
                          <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="UploadVideo"
                          multiple>
                          <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>
    <video width="320" height="240" controls id="upvideo" style="display:none">
    </video>
    <img :src="testImg" style="width:120px;height:60px;border:1px solid red;" />
    <canvas id='mycanvas'  ></canvas>
  </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: 20,
          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,
        testImg: ""
      }
    },
    created() {
      this.GetMemberGradeList();
      this.GetPageList();
    },
    mounted() {
      this.findvideocover("http://192.168.2.214:8130/Upload/Video/20200901114120428.mp4")
    },
    methods: {
      //获取视频封面
      findvideocover(videoUrl) {
       let _this = this;
      this.$nextTick(() => {
        let video = document.getElementById("upvideo");
        let source = document.createElement("source");
  
        source.src = videoUrl;
        source.type = "video/mp4";
        video.appendChild(source);
        video.addEventListener("loadeddata", function() {
          var canvas = document.createElement("canvas");
          canvas.width = "320";
          canvas.height = "320";
          canvas
            .getContext("2d")
            .drawImage(video, 0, 0, canvas.width, canvas.width);
            console.log("video",video);
          var img = document.createElement("img");
          let imgsrc = canvas.toDataURL("image/png");
          _this.testImg=imgsrc
        });
      });
      },
      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();
          }
        })
      },
      //上传视频
      UploadVideo(file) {
        var that = this;
        this.UploadSelfFile(this.FileType().Video, file.file, res => {
          if (res.resultCode == 1) {
            if (that.addpageMsg.Type == 2) {
              that.addpageMsg.Image = res.FileUrl;
            }
            that.addpageMsg.Path = res.FileUrl;
            that.addpageMsg.Name = res.FileName;
            that.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>
