<template>
  <!-- <div class="selectImg" > -->
  <div class="selectImg" id="imgBox">
    <div class="boxHeader" id="imgTitle">
      <span></span>
      <div class="title_img">图标选择</div>
      <span></span>
      <div class="header_close" @click="close">
        <i>✕</i>
      </div>
    </div>
    <div class="boxBody">
      <el-tabs v-model="activeName" type="card">
        <template v-if="hasGEMarker1">
          <el-tab-pane label="立体图标" name="GEMarker1">
            <div class="imgItem" :style="item.selected ? 'border-color:red' : ''" v-for="item in imgList_GEMarker1s"
              :key="item.key + 'GEMarker1s'" @click="selectImg(item)">
              <img :src="item.url" />
            </div>
          </el-tab-pane>
        </template>
        <el-tab-pane label="普通图标" name="GEMarker">
          <div class="imgItem" :style="item.selected ? 'border-color:red' : ''" v-for="item in imgList_GEMarker"
            :key="item.key + 'GEMarker'" @click="selectImg(item)">
            <img :src="item.url" />
          </div>
        </el-tab-pane>
        <el-tab-pane class="zidingyi" label="自定义图标" name="GEMarkerz">
          <!-- http://192.168.110.19:8891/yjearth4.0/api/v1/user/addRole -->
          <div style="display: flex;">
            <el-upload class="upload-demo" :action="url + '/yjearth4.0/api/v1' + '/icon/upload'" multiple
              :file-list="fileList" :show-file-list="false" accept=".png,.jpg,.jpge" :on-success="onSuccess">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <el-button style="margin-left: 10px;" type="primary" :disabled="imgList_zidingyi.length == 0"
              @click="handleCheckAllChange" size="small">全选</el-button>
            <!-- <el-checkbox-group style="margin-left: 10px;" v-model="isIndeterminate" size="small"
              @change="handleCheckAllChange">
              <el-checkbox-button>全选</el-checkbox-button>
            </el-checkbox-group> -->
            <!-- 这里全选和取消全选 -->
            <el-button style="margin-left: 10px;" size="small" type="primary" @click="delImg">删除</el-button>
          </div>
          <div style="display: flex;" class="sssssssssss">
            <el-checkbox-group v-model="checkList">
              <el-checkbox :label="item.id" v-for="item in imgList_zidingyi" :key="item.id" style="padding-left: 0;">
                <div class="imgItem" :style="item.selected ? 'border-color:red' : ''" @click="selectImg(item)">
                  <img :src="url + '/yjearth4.0/api/v1/icon/' + item.id + '/' + item.suffix" />
                </div>
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
  <!-- </div> -->
</template>

<script>
import { setMove } from "./myHeaderAll/systemPopup/js/moveDiv";
import { zidinyi, deleteIcon } from "../api/gisAPI"
import { getIP } from "../utils";
export default {
  name: "selectImg",
  data() {
    return {
      activeName: "GEMarker",
      imgList_GEMarker: [],
      imgList_GEMarker1: [],
      imgList_GEMarker1s: [],
      imgList_zidingyi: [],
      fileList: [],
      checkList: [],
      hasGEMarker1: true,
      flag: null,
      url: '',
      isIndeterminate: false,
      checkAll: true,
      isAll: false,
    };
  },
  mounted() {
    // $(".selectImg .el-tab-pane").addClass("custom_scroll_bar")
    // this.getList();
    setMove("imgTitle", "imgBox");
  },
  methods: {
    // 这里全选和取消全选
    handleCheckAllChange() {
      let arr = this.imgList_zidingyi.map(item => {
        return item.id
      })
      this.isAll = !this.isAll
      this.checkList = this.isAll ? arr : [];
    },
    // 删除
    delImg() {
      let arr = []
      this.imgList_zidingyi.filter(item => {
        if (this.checkList.includes(item.id)) {
          arr.push({
            id: item.id,
            suffix: item.suffix
          })
        }
      })
      if (arr.length == 0) {
        this.$message.warning("请选择要删除的图标");
        return
      }
      deleteIcon({ icons: arr }).then(res => {
        if (res.code == 0) {
          this.$message.success("删除成功");
          this.getList()
        }
      })
    },
    //获取列表
    getList() {
      zidinyi({}, data => {
        this.imgList_zidingyi = data.list || []
      })
    },
    onSuccess(file) {
      this.getList()
    },
    selectImg(item) {
      let selectedImg
      let onLine = false
      if (!item.key) {
        onLine = true
        selectedImg = '/yjearth4.0/api/v1/icon/' + item.id + '/' + item.suffix
      } else {
        selectedImg = item.key.indexOf("1s/") > -1 ? item.key.replace(/1s/g, "1") : item.key;
      }
      this.$sendChanel("selectedImg", { img: selectedImg, flag: this.flag, onLine });
      this.close();
    },
    close() {
      this.$changeComponentShow(".selectImgBox", false);
      this.checkList = []
    },
    set(key) {
      this.flag = key
    },
    init(obj, selected, hasGEMarker1 = true) {
      console.log('obj, selectedobj, selectedobj, selectedobj, selected', obj, selected);
      let selectedd
      this.getList()
      let arr = selected.split("/");
      if (selected.includes('/yjearth4.0/api/v1/icon/')) {
        const parts = selected.split("/");
        selectedd = parts[parts.indexOf("icon") + 1];
        this.activeName = 'GEMarkerz';
      } else {
        console.log('selected1111', selected, arr);
        this.activeName = arr[0];
      }
      this.hasGEMarker1 = hasGEMarker1;
      this.url = localStorage.getItem('service')

      for (const objKey in obj) {
        let imgList = [];
        obj[objKey].forEach((item) => {
          // console.log(
          //   arr[0].indexOf("GEMarker1") > -1
          //     ? `${arr[0]}s`
          //     : arr[0] + "/" + arr[1]
          // );
          // 特定一个数据排到第一个
          if (item == "GEMarker1s/A-ablu-blank.png") {
            imgList.unshift({
              key: item,
              selected:
                item ==
                (arr[0].indexOf("GEMarker1") > -1 ? `${arr[0]}s` : arr[0]) +
                "/" +
                arr[1],
              url: "http://localhost:" + window.staticPort + "/" + item,
            });
          } else {
            imgList.push({
              key: item,
              selected:
                item ==
                (arr[0].indexOf("GEMarker1") > -1 ? `${arr[0]}s` : arr[0]) +
                "/" +
                arr[1],
              url: "http://localhost:" + window.staticPort + "/" + item,
            });
          }
        });

        this["imgList_" + objKey] = imgList;
      }
    },
  },
};
</script>

<style lang="scss">
.sssssssssss {
  .el-checkbox__label {
    padding-left: 0 !important;
  }
}

.selectImg {
  // border: 1px solid red;
  width: 30vw;
  min-height: 21vw;
  display: flex;
  flex-direction: column;
  background-color: #b2e3eff0;
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  background: linear-gradient(0deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.6);
  border: 1.5px solid rgba(0, 255, 255, 1);
  padding: 10px;
  backdrop-filter: blur(2px);

  .el-tabs__item {
    color: #fff;
  }

  .el-tabs__item.is-active,
  .el-tabs__item:hover {
    color: rgba(0, 255, 255, 1);
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
    border-bottom-color: rgba(0, 255, 255, 1)
  }

  .el-tabs--card>.el-tabs__header {
    border-color: rgba(204, 204, 204, 0.2);
  }

  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  .el-tab-pane::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: #f5f5f5;
    margin-left: 5px;
    border-radius: 5px;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  .el-tab-pane::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #f5f5f5;
    border-radius: 5px;
  }

  /*定义滑块 内阴影+圆角*/
  .el-tab-pane::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgb(0, 217, 255);
    background-color: #0bf7f7;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: none;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item {
    border-left: none;
  }

  .boxHeader {
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 18px;
    padding-bottom: 15px;

    .title_img {
      width: 229px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      background: url('../assets/images/titlebg.png') no-repeat;
    }

    .header_close {
      position: absolute;
      height: 30px;
      line-height: 30px;
      width: 30px;
      top: -1px;
      background: rgb(0 255 255 / 50%);
      right: 0;
      border-radius: 0 0 0 90%;
      text-align: center;
      cursor: pointer;

      i {
        font-style: normal;
        font-size: 18px;
        // font-weight: 900;
      }
    }

    i {
      cursor: pointer;
    }
  }

  .boxBody {
    display: flex;

    .el-checkbox-button__inner {
      padding: 8px 15px;
      border-radius: 3px;
      margin-left: 10px;
    }

    .zidingyi {
      display: flex;
      flex-direction: column;

      .el-checkbox {
        margin-right: 0;
      }
    }

    .imgItem {
      padding: 5px;
      border: 1px solid transparent;
      width: 45px;
      height: 45px;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 35px;
        height: 35px;
      }

      &:hover {
        cursor: pointer;

        & {
          border-color: red;
        }
      }
    }
  }
}
</style>
