<template>
  <div class="ChooseImg">
    <el-row 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 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="el-menu-item" style="padding-left: 10px;padding-right: 10px;">
                <i class="el-icon-tickets"></i>
                <span>全部</span>
              </li>
              <li class="el-menu-item" v-for="(item,index) in saveObj" :class="commonIndex==index?'selectActive' : ''" @click="getImgList(index,saveObj)" :key="index"
                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.label}}</span>
                  </el-col>
                  <el-col class="blue" :span="6">
                    <span @click="editGroup(index)">编辑</span>
                    | <span @click="delGroup(index)">删除</span>
                  </el-col>
                </div>
              </li>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <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"
                style="width: 100px; height: 100px;display:flex;align-items:center;justify-content:center;">
                <i class="el-icon-upload"></i>
              </div>
            </el-upload>
          </div>
          <el-tooltip v-for="(item,index) in comImgArr" :key="index" class="item" effect="dark" placement="top-start">
            <div class="el-tooltip item app-attachment-item">
              <img :src="item" class="app-attachment-img" style="width: 100px; height: 100px;">
              <div class="app-attachment-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 label-width="100px">
        <el-form-item label="分组名称">
          <el-input size="small" type="text" placeholder="请输入内容" v-model="GroupName" 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="GroupCked()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    //是否多选
    props: {
      saveObj: {
        type: Array,
        default: null
      }
    },
    data() {
      return {
        GroupName: '', //分组名称
        addGroupMsgDig: false,
        pageMsgDig: false,
        ImageArr: [], //显示数组
        isAdd: 0, //添加标志
        commonIndex:-1,
        comImgArr:[],
      }
    },
    created() {},
    computed: {},
    mounted() {

    },
    methods: {
      //新增分组
      addGroup() {
        this.isAdd = 0;
        this.GroupName='';
        this.addGroupMsgDig = true;
      },
      //确定分组
      GroupCked() {
        if (this.isAdd == 0) {
          let obj = {
            Id: 0,
            label: this.GroupName,
            imgArr: []
          }
          this.saveObj.push(obj);
        }else{
          this.saveObj[this.commonIndex].label = this.GroupName;
        }
        this.addGroupMsgDig = false;
      },
      //编辑分组
      editGroup(index) {
        this.isAdd = 1;
        this.commonIndex = index;
        this.GroupName = this.saveObj[index].label;
        this.addGroupMsgDig = true;
      },
      //删除
      delGroup(index){
        this.saveObj.splice(index,1);
      },
      //点击获取图片arr
      getImgList(index,obj){
        this.commonIndex = index;
        this.comImgArr =this.saveObj[index].imgArr;
      },
      //选定
      SelectImgId() {
      },
      //上传酒店图片
      UploadImage(file) {
        if(this.commonIndex==-1){
            this.Error('请选择分类')
            return;
        }
        let newArr = [];
        newArr.push(file.file);
        let fileName = file.file.name;
        var path = "/Upload/DMC/";
        this.UploadSelfFileT(path, newArr, x => {
          var obj = this.$DMCUtils.DMCImageObj();
          var str = x.data.FilePath;
          var imgUrl = this.domainManager().ViittoFileUrl + x.data.FilePath;
          obj.Path = str;
          obj.ShowPath = imgUrl;
          this.saveObj[this.commonIndex].imgArr.push(obj.ShowPath);
        });
      },
    },
  }

</script>

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

  .ChooseImg {
    margin: 10px;
  }

  .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>
