<template>
  <div class="ChooseImg Choosevideo">
    <el-row v-loading="loading" style="border: 1px solid rgb(227, 227, 227);">
      <el-col :span="6" style="border-right: 1px solid rgb(227, 227, 227);">
        <el-button @click="addGroup" style="margin-top: 12px;margin-left: 5%;" type="primary" size="small">添加分组
        </el-button>
        <div style="margin:20px 0">
          <el-input v-model="searchVal" style="width:90%;margin:0 5%" placeholder="请输入分类名称搜索" size="small"></el-input>
        </div>
        <div class="el-scrollbar" style="height: 450px; width: 100%;">
          <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 NewItems" :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==1" @click.prevent="HsGroup(item)">删除</span>
                  </el-col>
                </div>
              </li>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <div style="margin-top: 10px;margin-left: 20px;" class="appendInput">
          <el-input 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>
        <div class="basefix app-attachment-list">
          <div class="material-item material-upload">
            <el-upload class="avatar-uploader" action="" accept="video/mp4,video/ogg,video/webm" :show-file-list="false"
              :http-request="UploadVideo">
              <div class="app-upload" flex="main:center cross:center" style="width: 100px; height: 100px;">
                <i class="el-icon-upload"></i>
              </div>
            </el-upload>
          </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="selectId==item.Id ? 'selected' :''"
              class="el-tooltip item material-item ">
              <img :src="getIconLink(item.Image)" class="material-img" style="width: 100px; height: 100px;">
              <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>
            </div>
          </el-tooltip>
        </div>
        <div style="padding-right:10px">
          <el-pagination style="text-align:right" background :current-page="currentPage4"
            @current-change="handleCurrentChange" :page-size="msg.pageSize" layout="prev, pager, next,jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <div style="margin-top:20px;text-align:right">
      <el-button size="small" type="primary" @click="SelectImgId">选定</el-button>
    </div>
    <!-- 新增分组 -->
    <el-dialog :modal="false" :modal-append-to-body='false' 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>
      <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>
  </div>
</template>

<script>
  export default {
    name: 'ChooseImg',
    data() {
      return {
        czType: 0,
        searchVal: '',
        val: '',
        Id: '',
        currentPage4: 1,
        msg: {
          pageIndex: 1,
          pageSize: 15,
        },
        total: 0,
        loading: false,
        scgroupMsg: {
          Id: 0,
          Name: '',
          Type: 2,
          Recycled: 1,
        },
        groupList: [],
        PageMsg: {
          Id: 0,
          Name: '',
          Type: 2,
          Recycled: 1,
          pageIndex: 1,
          pageSize: 15,
          GroupId: 0,
        },
        PageList: [],
        addGroupMsgDig: false,
        pageMsgDig: false,
        addGroupMsg: {
          Id: 0,
          Name: '',
          Type: '',
          Sort: '',
        },
        addGroupMsgrules: {
          Name: [{
            required: true,
            message: '请填写分组名称',
            trigger: 'blur'
          }],
          Sort: [{
            required: true,
            message: '请填写排序',
            trigger: 'blur'
          }],
        },
        addpageMsg: {
          Id: 0,
          Name: '',
          Type: 2,
          GroupId: 0,
          Path: '',
          Image: '',
          VideoTime: 0,
          WithHeight: 0,
          PathType:0
        },
        selectId: -1,
        emitmsg: {},
      }
    },
    computed: {
      NewItems() {
        var _this = this;
        var NewItems = [];
        this.groupList.map(function (item) {
          if (item.Name.search(_this.searchVal) != -1) {
            NewItems.push(item);
          }
        });
        return NewItems;
      }
    },
    mounted() {
      this.GetMemberGradeList();
      this.GetPageList();
    },
    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;
      },
      //上传视频
      UploadVideo(file) {
        var that = this;
        this.UploadSelfFile(this.FileType().Video, file.file, res => {
          if (res.resultCode == 1) {
            that.addpageMsg.Image = res.VideoCoverImg;
            that.addpageMsg.Path = res.FileUrl;
            that.addpageMsg.Name = res.FileName;
            that.addPageList();
            that.$forceUpdate();
          }
        })
      },
      InitData(Type) {
        this.czType = Type;
        this.selectId = -1;
      },
      SelectImgId() {
        this.$emit('Selectvideo', this.emitmsg)
        this.selectId = -1;
      },
      UploadImage(file) {
        this.UploadFileToTencent(this.FileType().GoodsImg, file.file, res => {
          if (res.resultCode == 1) {
            this.addpageMsg.Path = res.FileUrl;
            this.addpageMsg.Name = res.FileName;
            this.addPageList();
          }
        })
      },
      // 新增素材信息
      addPageList() {
        var upInfo = JSON.parse(localStorage.uploadInfo);
        if(upInfo){
          this.addpageMsg.PathType=upInfo.StoreType;
        }
        this.apipost("/api/product/SetGetMaterialInfo", this.addpageMsg, res => {
          if (res.data.resultCode == 1) {
            this.GetPageList();
          }
        })
      },
      PageSelect(item) {
        this.emitmsg = {
          Path:item.Path,
          Id: item.Id,
          Image:item.Image,
          VideoTime:item.VideoTime,
          PathType:item.PathType
        }
        this.selectId = item.Id;
      },
      addGroup() {
        this.addGroupMsgDig = true;
        this.addGroupMsg = {
          Id: 0,
          Name: '',
          Type: 2,
          Sort: '',
        }
      },
      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(() => {

        });
      },
      EditGroup(item) {
        this.addGroupMsgDig = true;
        this.addGroupMsg = {
          Id: item.Id,
          Name: item.Name,
          Type: item.Type,
          Sort: item.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;
          }
        });
      },
      SelectGroup(id) {
        this.PageMsg.GroupId = id;
        this.GetPageList();
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.GetPageList();
      },
      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.PageList = data;
        })
      },
    },
  }

</script>

<style>
  .Choosevideo .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;
  }

  .Choosevideo .material-video-info {
    background: rgba(0, 0, 0, .35);
    color: #fff;
    position: absolute;
    left: 10px;
    bottom: 31px;
    padding: 1px 3px;
    font-size: 14px;
  }

  .Choosevideo .material-upload i {
    font-size: 30px;
    color: #909399;
  }

  .Choosevideo .material-item {
    display: inline-block;
    cursor: pointer;
    position: relative;
    float: left;
    width: 120px;
    height: 140px;
    margin: 7.5px;
    text-align: center;
    padding: 10px 10px 0;
  }

  .Choosevideo .material-upload {
    box-shadow: none;
    border: 1px dashed #b2b6bd;
    height: 100px;
    width: 100px;
    margin: 17.5px;
    padding: 0;
  }

  .ChooseImg .el-input.is-active .el-input__inner,
  .ChooseImg .el-input__inner:focus {
    border-color: #DCDFE6;
  }

  .ChooseImg .app-attachment-list .selected {
    box-shadow: 0 0 0 1px #1ed0ff;
    background: #daf5ff;
    border-radius: 5px;
  }

  .ChooseImg .selectActive .el-icon-tickets {
    color: #409EFF;
  }

  .ChooseImg .selectActive {
    color: #409EFF;
  }

  .ChooseImg .app-attachment-name {
    color: #666666;
    margin-top: 5px;
    font-size: 13px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }

  .ChooseImg .app-attachment-item .app-attachment-img {
    display: block;
  }

  .ChooseImg .app-attachment-upload i {
    font-size: 30px;
    color: #909399;
  }

  .ChooseImg .app-attachment-item {
    display: inline-block;
    cursor: pointer;
    position: relative;
    float: left;
    width: 120px;
    height: 140px;
    margin: 7.5px;
    text-align: center;
    padding: 10px 10px 0;
  }

  .ChooseImg .app-attachment-upload {
    box-shadow: none;
    border: 1px dashed #b2b6bd;
    height: 100px;
    width: 100px;
    margin: 17.5px;
    padding: 0;
  }

  .ChooseImg .app-attachment-list {
    padding: 5px;
    min-height: 475px;
  }

  .ChooseImg .appendInput .el-input__inner {
    border-right: none;

  }

  .ChooseImg .appendInput .el-input-group__append {
    background-color: #fff !important;
    border-left: none;
    padding: 0 15px;
  }

</style>
