<template>
  <div class="ChooseImg">
    <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="请输入内容" @keyup.enter.native="GetPageList"
            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="app-attachment-item app-attachment-upload">
            <el-upload class="avatar-uploader" action="" accept="image/jpeg,image/gif,image/png,image/bmp"
              :show-file-list="false" :http-request="UploadImage" multiple>
              <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, 1)" @dblclick="PageSelect(item, 2)"
              :class="getChecked(item) ? 'selected' : ''" class="el-tooltip item app-attachment-item">
              <img :src="getIconLink(item.Path)" class="app-attachment-img" style="width: 100px; height: 100px;">
              <div class="app-attachment-name">{{ item.Name }}</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-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>
  </div>
</template>

<script>
export default {
  //是否多选
  props: ["IsMultiple"],
  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: 1,
        Recycled: 1,
      },
      groupList: [],
      PageMsg: {
        Id: 0,
        Name: '',
        Type: 1,
        Recycled: 1,
        pageIndex: 1,
        pageSize: 17,
        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: 1,
        GroupId: 0,
        Path: '',
        Image: '',
        VideoTime: 0,
        WithHeight: 0,
        PathType: 0
      },
      selectId: -1,
      emitmsg: [],
    }
  },
  created() { },
  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: {
    getChecked(item) {
      var isChecked = false;
      if (this.emitmsg && this.emitmsg.length > 0) {
        this.emitmsg.forEach(eItem => {
          if (eItem.selectId == item.Id && !isChecked) {
            isChecked = true;
          }
        });
      }
      return isChecked;
    },
    InitData(Type) {
      this.czType = Type;
      this.selectId = -1;
    },
    SelectImgId() {
      //多选
      if (this.IsMultiple) {
        this.$emit('SelectId', this.emitmsg)
      }
      //单选
      else {
        if (this.emitmsg && this.emitmsg.length > 0) {
          var result = {
            selectId: this.emitmsg[0].selectId,
            url: this.emitmsg[0].url
          };
          this.$emit('SelectId', result)
        }
      }
      this.selectId = -1;
      this.emitmsg = [];
    },
    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();
        }
      })
    },
    //选择图片 clickType 1单击 2双击
    PageSelect(item, clickType) {
      //多选
      if (this.IsMultiple) {
        var findIndex = this.emitmsg.findIndex(eItem => eItem.selectId == item.Id);
        if (findIndex > -1) {
          //第二次点击相同图片就删除
          this.emitmsg.splice(findIndex, 1)
        } else {
          this.emitmsg.push({
            selectId: item.Id,
            url: item.Path
          });
        }
      } else {
        this.emitmsg = [];
        this.emitmsg.push({
          selectId: item.Id,
          url: item.Path
        });
      }
      this.selectId = item.Id;
      if (clickType == 2) {
        this.SelectImgId();
      }
    },
    addGroup() {
      this.addGroupMsgDig = true;
      this.addGroupMsg = {
        Id: 0,
        Name: '',
        Type: 1,
        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);
            }
          }
        );
      }).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);
              }
            }
          );
        } else {
          return false;
        }
      });
    },
    SelectGroup(id) {
      this.PageMsg.GroupId = id;
      this.addpageMsg.GroupId = id;
      this.GetPageList();
    },
    handleCurrentChange(val) {
      this.PageMsg.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>
.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>
