<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="clearGroupMsg" style="margin-top: 12px;margin-left: 5%;" type="primary" size="small">{{$t('objFill.tianjiafenzu')}}
        </el-button>
        <div class="el-scrollbar" style="height: 450px; width: 100%;overflow-y:auto;">
          <div style="margin-bottom: -8px; margin-right: -8px;">
            <div class="el-scrollbar__view">
              <li class="el-menu-item" :class="commonIndex==-1?'selectActive' : ''" @click="getImgList(-1)"
                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>{{$t('advmanager.v_all')}}</span>
                  </el-col>
                </div>
              </li>
              <li class="el-menu-item" v-for="(item,index) in saveObj" :class="commonIndex==index?'selectActive' : ''"
                @click="getImgList(index)" :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==''?$t('objFill.moren'):item.Label}}</span>
                  </el-col>
                  <el-col class="blue" :span="6" v-if="index!=0">
                    <span @click="editGroup(index)">{{$t('pub.edit')}}</span>
                    | <span @click="delGroup(index)">{{$t('system.table_delete')}}</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" style="margin:1px 0 0 8px;">
            <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>
          <div style="display:inline-block;margin-left:9px;position:relative" v-for="(item,index) in comImgArr"
            :key="index">
            <img :src="getIconLink(item.Path)"  class="app-attachment-img"
              style="width: 100px; height: 100px;">
            <i class="iconfont icon-bumenguanli-shanchu hotel_DelIcon" @click="delHotelImg(item,index)"></i>
          </div>
        </div>
      </el-col>
    </el-row>
    <div style="margin-top:20px;text-align:right">
      <el-button size="small" type="primary" @click="SelectImgId">{{$t('pub.sureBtn')}}</el-button>
    </div>
    <!-- 新增分组 -->
    <el-dialog :modal="false" :modal-append-to-body='false' :title="$t('objFill.fenzhuguanl')" :visible.sync="groupMsg.addGroupMsgDig"
      width="400px">
      <el-form label-width="100px">
        <el-form-item :label="$t('objFill.fenzhumingc')">
          <el-input size="small" type="text" :placeholder="$t('fnc.qsrneirong')" v-model="groupMsg.GroupName" maxlength="8"
            show-word-limit>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="groupMsg.addGroupMsgDig = false">{{$t('pub.cancelBtn')}}</el-button>
        <el-button size="small" type="primary" @click="SaveGroup()">{{$t('pub.sureBtn')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    //图片数组
    props: {
      saveObj: {
        type: Array,
        default: null
      }
    },
    data() {
      return {
        groupMsg: {
          isAdd: 0, //添加标志
          GroupName: '', //分组名称
          addGroupMsgDig: false,
        },
        commonIndex: 0,
        comImgArr: [],
      }
    },
    watch: {

    },
    created() {},
    computed: {},
    mounted() {
      this.getAll();
    },
    methods: {
      getAll() {
        this.comImgArr = [];
        if (this.saveObj.length > 0) {
          this.saveObj.forEach(item => {
            this.comImgArr = this.comImgArr.concat(item.ImgList);
          })
        } else {
          let obj = {
            Label: '',
            ImgList: this.comImgArr
          }
          this.saveObj.unshift(obj);
        }
      },
      //删除图片
      delHotelImg(item, index) {
        var that = this
        that.Confirm(this.$t('objFill.shangchutpjbnhf'), function () {
          if (item.MappingId && item.MappingId > 0) {
            let msg = {
              Id: item.MappingId,
              PicId: item.PicId
            }
            that.apipost("hotel_post_RemoveHotelImage", msg, res => {
              if (res.data.resultCode == 1) {
                that.comImgArr.splice(index, 1);
              }
            });
          } else {
            that.comImgArr.splice(index, 1);
          }
        });
      },
      //清空消息
      clearGroupMsg() {
        this.groupMsg.isAdd = 0;
        this.groupMsg.GroupName = '';
        this.groupMsg.addGroupMsgDig = true;
      },
      //新增修改分组
      SaveGroup() {
        if (this.groupMsg.isAdd == 0) {
          let obj = {
            Label: this.groupMsg.GroupName,
            ImgList: []
          }
          this.saveObj.push(obj);
        } else {
          this.saveObj[this.commonIndex].Label = this.groupMsg.GroupName;
        }
        this.clearGroupMsg();
        this.groupMsg.addGroupMsgDig = false;
      },
      //编辑分组
      editGroup(index) {
        this.groupMsg.isAdd = 1;
        this.commonIndex = index;
        this.groupMsg.GroupName = this.saveObj[index].Label;
        this.groupMsg.addGroupMsgDig = true;
      },
      //删除
      delGroup(index) {
        var that = this
        that.Confirm(this.$t('objFill.shangchutpjbnhf'), function () {
          this.saveObj.splice(index, 1);
        });
      },
      //点击获取图片arr
      getImgList(index) {
        this.commonIndex = index;
        if (index == -1) {
          this.comImgArr = [];
          this.saveObj.forEach(item => {
            this.comImgArr = this.comImgArr.concat(item.ImgList);
          })
        } else {
          this.comImgArr = this.saveObj[index].ImgList;
        }
      },
      //选定
      SelectImgId() {
        this.$emit('getHotelImg', this.saveObj);
      },
      //上传酒店图片
      UploadImage(file) {
        let newArr = [];
        newArr.push(file.file);
        let fileName = file.file.name;
        var path = "/Upload/DMC/";
        this.UploadSelfFileT(path, newArr, x => {
          var str = x.data.FilePath;
          var obj = {
            MappingId: 0,
            PicId: 0,
            Path: x.data.FilePath
          }
          if (this.commonIndex == -1) {
            this.saveObj[0].ImgList.push(obj);
            this.getImgList(-1)
          } else {
            this.saveObj[this.commonIndex].ImgList.push(obj);
            this.getImgList(this.commonIndex)
          }
        });
      },
    },
  }

</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;
  }

  .hotel_DelIcon {
    position: absolute;
    right: -5px;
    top: -7px;
    color: red;
    cursor: pointer;
  }

</style>
