<style>
.DMCchooseImg .resAddImg {
  width: 520px;
  padding-right: 45px;
  margin-top: 15px;
}
.DMCchooseImg .resource-name {
  height: 34px;
  background: rgba(255, 255, 255, 1);
  outline: none;
  border: 1px solid #d6d6d6;
  padding-left: 10px;
}
.DMCchooseImg .search-imgicon {
  padding-right: 20px;
  margin-left: -40px;
}
.DMCchooseImg .searchImgIcon {
  cursor: pointer;
}
.DMCchooseImg .addimgContent {
  height: 290px;
  overflow: auto;
  margin: 30px 0 20px 25px;
  width: 560px;
}
.DMCchooseImg .addimgDiv {
  width: 160px;
  height: 155px;
  float: left;
  margin: 0 20px 15px 0;
  overflow: hidden;
}
.DMCchooseImg .addimgContent div:first-child {
  margin-left: 0;
}
.addimgContent div:nth-child(3n) {
  margin-right: 0;
}
.DMCchooseImg .test-1::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background-color: #f5f5f5;
}
.DMCchooseImg .test-1::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}
.DMCchooseImg .test-1::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background-color: #aaa;
  margin-bottom: 24px;
}
.DMCchooseImg .test-1:hover::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background-color: #f5f5f5;
}
.DMCchooseImg .itemImgdiv {
  width: 160px;
  height: 106px;
  position: relative;
}
.DMCchooseImg .itemImgdiv img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.DMCchooseImg .imgseclet {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  position: absolute;
  top: 0;
  text-align: center;
  line-height: 106px;
  color: #e95252;
}
.DMCchooseImg .addimg-btnlist {
  text-align: center;
}
.DMCchooseImg .addimg-select {
  font-size: 14px;
  color: #999999;
  float: right;
  margin-bottom: 10px;
  position: relative;
  bottom: 20px;
}
.DMCchooseImg .save-Btn {
  width: 90px;
  height: 30px;
  background: rgba(233, 82, 82, 1);
  border-radius: 15px;
  color: #fff;
  outline: none;
  border:none;
  border: 1px solid #e95252!important;
  cursor: pointer;
  margin-right: 20px;
}
.DMCchooseImg .cancel-Btn,
.save-Btn:hover {
  opacity: 0.8;
}
.DMCchooseImg .cancel-Btn {
  width: 90px;
  height: 30px;
  background: rgba(255, 255, 255, 1);
  border-radius: 15px;
  color: #e95252;
  outline: none;
  cursor: pointer;
  border: 1px solid #e95252!important;
}
.DMCchooseImg .el-pagination__total{display:none!important;}
.DMC_addContent{
  width:160;
  height:106px;
  border-radius:10px;
  background-color: rgba(236, 236, 236, 1);
  color:#fff;
  position: relative;
}
.DMC_addContent .el-upload{
  width:100%;
  height:105px;
}
.DMC_addContent i{
  font-size: 50px;
  color: #d1d1d1;
  position: relative;
  left: 0;
  top: 43px;
}
</style>
<template>
    <div class="DMCchooseImg">
        <span style="margin-left:24px;">
                <input type="text" class="resource-name resAddImg" v-model="queryMsg.Name" @keyup.enter="getList" placeholder="请输入关键字"/>
                <span class="search-imgicon"><i class="iconfont icon-img_cz searchImgIcon" @click="getList"></i></span>
            </span>
            <div class="addimgContent test-1">
                <div class="addimgDiv" v-for="(item,index) in imglistArry" :key="item.subCode" v-if="item.isShowImgDiv&&item.Path!=null">
                    <div class="itemImgdiv" @click="selectImg(index)">
                        <img :src='compressImg(item.Path, "filt", 160, "")' @error="imgError(item)"/>
                        <div class="imgseclet" v-show="item.isShow"><i class="iconfont icon-dagouyouquan"></i></div>
                    </div>
                    <div class="imgDescription">{{item.Name}}</div>
                </div>  
                <div class="addimgDiv" v-if="IsShowAdd" >
                    <div class="DMC_addContent">
                        <el-upload class="upload-demo" :http-request="UploadImage" :multiple="false" accept="image/jpeg,image/gif,image/png,image/bmp"
                          :show-file-list="false" action="">
                          <i class="iconfont icon-img_haha"></i>
                        </el-upload>
                    </div>
                </div>    
            </div>
            <div class="addimg-btnlist">
                <input type="button" class="save-Btn" @click="dmccheckImgList()" value="确定" />
                <input type="button" class="cancel-Btn" @click="closeDialog()" value="取消" />
            </div>
            <span class="addimg-select">已选择<span style="color:#E95252;"><span>{{selectImgArr.length}}</span></span>张图片</span>
            <el-pagination 
                background
                @current-change="handleCurrentChange"
                :current-page.sync="queryMsg.currentPage" 
                :page-size="queryMsg.pageSize" 
                layout="total,prev, pager, next, jumper" :total="queryMsg.total">
            </el-pagination>
    </div>
</template>

<script>
export default {
  props: ["imgType", "isCheckmore",'queryItem','IsShowAdd'],
  data() {
    return {
      queryMsg: {
        pageSize: 50,
        pageIndex: 1,
        currentPage: 1,
        total: 0,
        Type: 1,//1-酒店,2-餐厅,3-景点,4-票务,5-车辆,6-领队,7-购物店
        Name: "",//资源图片名称
        SourceId:0//资源编号
      },
      //显示数组
      imglistArry: [],
      //选中显示数组
      selectImgArr: [],
    };
  },
  methods: {
    getList() {
      //初始化弹窗图片列表
      this.imglistArry = [];
      this.apipost(
        "hotel_post_GetPicList",
        this.queryMsg,
        res => {
          if (res.data.resultCode == 1) {
            this.imglistArry = res.data.data.pageData;
            this.imglistArry.forEach(x=>{
              x.isShowImgDiv = true;
            })
            this.queryMsg.total = res.data.data.count;
          }
        },
        null
      );
    },
    closeDialog() {
      this.imglistArry.forEach(selImg => {
        selImg.isShow = false;
      });
      this.selectImgArr = [];
      this.queryMsg.Name='';
      this.queryMsg.SourceId=0;
      this.$emit("closeImg");
    },
    sendMsg() {},
    handleCurrentChange(val) {
      this.queryMsg.pageIndex = val;
      this.getList();
    },
    resetPageIndex() {
      this.queryMsg.pageIndex = 1;
      this.queryMsg.currentPage = 1;
    },
    selectImg(index) {
      //选取弹窗图片
      if (this.isCheckmore == 1) {
        this.imglistArry.forEach(item => {
          item.isShow = false;
        });
        this.imglistArry[index].isShow = true;
        this.selectImgArr = [];
        this.selectImgArr.push(this.imglistArry[index]);
      } else {
        this.imglistArry[index].isShow = !this.imglistArry[index].isShow;
        if (this.imglistArry[index].isShow) {
          this.selectImgArr.push(this.imglistArry[index]);
        } else {
          this.removeImg();
        }
      }
    },
    //删除选中图片
    removeImg() {
      var newArr = [];
      this.selectImgArr.forEach(selImg => {
        if (selImg.isShow) {
          newArr.push(selImg);
        }
      });
      this.selectImgArr = newArr;
    },
    //点击确定
    dmccheckImgList() {
      this.$emit("headCallBack", this.selectImgArr);
      this.$emit("closeImg");
      this.imglistArry.forEach(selImg => {
        selImg.isShow = false;
      });
      this.selectImgArr = [];
    },
    //无效路径整个div不显示
    imgError(item){
      item.isShowImgDiv=false;
      this.$forceUpdate();
    },
    //上传图片
    UploadImage(file) {
      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.name;
        var imgUrl = this.domainManager().ViittoFileUrl + x.data.FilePath;
        obj.Path = str;
        obj.ShowPath = imgUrl;
        this.uploadImageFile(x.data.FilePath);
      });
    },
    //上传图片方法
    uploadImageFile(Path) {
      let msg = {
        SourceId:this.queryMsg.SourceId,
        ResourceType: this.imgType,
        PicPath:Path,
        imageName:this.queryMsg.Name
      };
      this.apipost(
        "dmcimg_post_SetDmcImage",
        msg,
        response => {
          if (response.data.resultCode == 1) {
              this.getList();
          }
        },
        null
      );
    },
    getQueryItem(){
      if(this.queryItem && this.queryItem.queryName!=undefined){
        this.queryMsg.Name = this.queryItem.queryName;
        this.queryMsg.SourceId=this.queryItem.queryId;
      }else{
        this.queryMsg.Name = '';
        this.queryMsg.SourceId=0;
      }
    }
  },
  created() {},
  mounted() {
    this.queryMsg.Type = this.imgType;
    this.getQueryItem();
    this.getList();
  },
  watch: {
    queryItem: {
      //深度监听，可监听到对象、数组的变化
      handler: function (val, oldVal) {
        this.getQueryItem();
        this.getList();
      },
      deep: true
    }
  }

};
</script>
