<template>
  <transition
    appear
    name="custom-classes-transition"
    enter-active-class="animated slideInRight speed"
    leave-active-class="animated slideOutRight speed"
  >
    <div class="hots-panel" v-show="show"  >
      <div class="ui-between header" app-border dir-bottom>
        <span>{{ editTitle }}热点</span>
        <i class="iconfont icon_close" @click="cancel"></i>
      </div>
      <div class="content" >
        <div>
          <ul>
            <li app-border dir-bottom>
              <div class="title">图标库</div>
              <div style="margin-bottom: 0">
                <ul class="styles">
                  <li
                    :class="{ active: item.id == styIcon }"
                    v-for="(item, i) in hotStyle"
                    @click="addhotspot(item)"
                    :key="i"
                  >
                    <img :style="{padding:item.type=='static'?'8px':'0'}" :src="item.thumb" alt="" />
                  </li>
                </ul>
              </div>
            </li>
            <li app-border dir-bottom>
              <div class="ui-between title">链接到</div>
              <div class="medias">
                <template v-if="infoItem.thumb">
                  <img :src="infoItem.thumb+`?${Math.random()}`" alt="" />
                  <div class="mask">
                    <button @click="handleDel" class="ui-button submit">删除</button>
                  </div>
                </template>

                <div class="btn-push" @click="$emit('select', selectItem || null)" v-else>
                  <i class="iconfont iconfont icon_plus"></i>
                  <span>选择场景</span>
                </div>
              </div>
       
              <div class="ui-between title">
                标题
                <div
                  class="checkbox"
                  @click="infoItem.visible = !infoItem.visible"
                  :class="{ checked: infoItem.visible }"
                >
                  <i class="iconfont icon_checkbox"></i>
                  &nbsp;显示标题
                </div>
              </div>
              <div>
                <input
                  type="text"
                  class="ui-input"
                  placeholder="请填写标题限15字"
                  :maxlength="15"
                  v-model="infoItem.hotspotTitle"
                />
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="ui-between footer" app-border dir-top>
        <button class="ui-button submit" @click="save">完成</button>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  props: ["show", "data", "editTitle"],
  data() {
    let cdn = this.$config.getStaticResource(
      "/panoassets/images/hotspot/xulie/"
    );
    localStorage.setItem(
      "initItem",
      this.data ? JSON.stringify(this.data) : ""
    );
    return {
      hotStyle: [
        {
          id: "ditu",
          img: cdn + "ditu_2021.png",
          thumb: cdn + "ditu_000.png",
        },
        {
          id: "kaimen",
          img: cdn + "kaimen_2021.png",
          thumb: cdn + "kaimen_000.png",
        },
        {
          id: "shinei",
          img: cdn + "shinei_2021.png",
          thumb: cdn + "shinei_000.png",
        },
        {
          id: "line-l",
          img: cdn + "line-l.png",
          thumb: cdn + "line-l.png",
          type:'static'
        },
        {
          id: "line-r",
          img: cdn + "line-r.png",
          thumb: cdn + "line-r.png",
          type:'static'
        }
      ],
      selectItem: "",
      styIcon: "ditu",
      linkicon: "",
      infoItem: ""
    };
  },

  watch: {
    data: {
      immediate: true,
      deep: true,
      handler: function (newVal) {
        // 热点名字不允许数字开头 所以param.name前加个_
        this.infoItem = newVal || {
          name: "_" + this.$randomWord(true, 8, 8),
          hotspotTitle: "",
          img: "",
          thumb: "",
          link: "",
          visible: true,
          ath: "",
          atv: "",
          icontype: "",
          lineTxt:''
        };
        this.styIcon = this.infoItem.icontype;
      },
    },
    "infoItem.hotspotTitle": function () {
      this.$bus.emit("edithotspotTitle", this.infoItem);
    },
    "infoItem.visible": function () {
      this.$bus.emit("edithotspotTitleisShow", this.infoItem);
    },
     "infoItem.link": function () {
        this.$refreshHotspot(this.infoItem)
      // this.$bus.emit("edithotspotTitle", this.infoItem);
    },
    show(newVal) {
      if (!newVal) {
        this.$bus.removeListener("selectUrl", this.listerFn);
      }
    },
  },
  beforeDestroy() {
    this.$bus.removeListener("selectUrl", this.listerFn);
  },
  mounted() {
    this.selectItem = {
      sceneCode: this.infoItem.link,
    };

    this.$bus.on("selectUrl", this.listerFn);
  },

  methods: {
    handleDel(){
      this.infoItem.thumb=''
      this.infoItem.link=''
      this.selectItem = null
    },
    listerFn(data) {
      this.selectItem = {
        sceneCode: data.num,
      };
      this.infoItem.link = data.num;
      this.infoItem.thumb = data.thumb;
      this.infoItem.hotspotTitle= data.sceneName
    },
    cancel() {
      let tmp = localStorage.getItem("initItem");
      if (tmp) {
        this.reset(JSON.parse(tmp));
        this.$emit("close", {
          type: "edit",
          data: JSON.parse(tmp),
        });
      } else {
        this.$emit("close", {
          type: "add",
          data: this.infoItem,
        });
      }
    },
    reset(data) {
      this.$bus.emit("edithotspotTitle", data);
      this.$bus.emit("edithotspotTitleisShow", data);
      let krpano = document.getElementById("krpanoSWFObject");
      krpano.set(`hotspot[${data.name}].url`, data.img);
    },
    save() {
      if (
        !this.infoItem.hotspotTitle ||
        // !this.infoItem.thumb ||
        !this.infoItem.img
      ) {
        return this.$alert({
          content: "请补全必填信息(图标和标题)",
        });
      }
      this.$emit("close");
      this.$emit("save", this.infoItem);
    },
    
    addhotspot(data) {
      this.infoItem.img = data.img;
      this.infoItem.icontype = data.id;
      this.infoItem.lineTxt = data.type == 'static'
      this.styIcon = data.id;
      this.$refreshHotspot(this.infoItem)
    },
  },
};
</script>
<style lang="less" scoped>
.icon_checkbox {
  font-size: 14px;
  &::before {
    content: "\e667";
  }
}

.checkbox {
  cursor: pointer;
  &.checked {
    color: @color;
    .icon_checkbox::before {
      content: "\e671";
    }
  }
}

.hots-panel {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 236px;
  background: rgba(38, 39, 41, 1);
  box-shadow: 0px 0px 20px #090909;
  z-index: 10;
  display: flex;
  flex-direction: column;
  .header {
    height: 51px;
    padding: 0 10px;
    display: flex;
    .icon_close {
      cursor: pointer;
    }
  }
  .footer {
    padding: 15px;
    .ui-button {
      width: 100%;
    }
  }
  .content {
    display: flex;
    flex: 1;
    overflow: hidden;
    > div {
      width: 100%;
      height: 100%;
    }
    ul {
      width: 100%;
      &.lock {
        li {
          pointer-events: none;
          opacity: 0.5;
        }
        li.position {
          pointer-events: auto;
          opacity: 1;
        }
      }
    }
    li {
      padding: 10px;
      > div {
        margin-bottom: 15px;
        &:last-child {
          margin-bottom: 0;
        }
        &.title {
          margin-bottom: 10px;
        }
        label {
          color: #ababab;
          font-size: 12px;
        }
      }
      &:last-child {
        border: none;
        &::after {
          display: none;
        }
      }
      .link-button {
        display: flex;
        justify-content: space-between;
        button {
          width: 45%;
        }
      }
    }
    .medias {
      height: 105px;
      width: 210px;
      position: relative;
      background: #161a1a;
      border: 1px solid #555a5a;
      margin-bottom: 10px;
      > img {
        width: 100%;
        height: 100%;
      }
      .btn-push {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        text-align: center;
        color: @color;
        cursor: pointer;
        > i {
          font-size: 20px;
        }
        > span {
          display: block;
        }
      }
      .mask {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        > button {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          min-width: 60px;
          height: 24px;
          font-size: 12px;
        }
      }
      &:hover {
        .mask {
          display: block;
        }
      }
    }

  
    .styles {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      li {
        position: relative;
        cursor: pointer;
        padding: 0;
        margin-left: 20px;
        margin-bottom: 20px;
        display: flex;
        width: 38px;
        height: 38px;
        border: solid 2px transparent;
        align-items: center;
        justify-content: center;
        &:first-child {
          margin-left: 0;
        }
        &:nth-of-type(5) {
          margin-left: 0;
        }
        &:nth-of-type(n + 5) {
          margin-bottom: 0;
        }
        > span {
          position: absolute;
          left: 0;
          right: 0;
          bottom: -20px;
          text-align: center;
          font-size: 12px;
        }
        > i {
          font-size: 32px;
        }
        > img {
          width: 40px;
          height: 40px;
        }
        &.active {
          border-color: @color;
          > span {
            color: @color;
          }
        }
        .hot-style {
          margin: 0;
          position: relative;
          width: 28px;
          height: 28px;
          &.hot-style-image {
            background-position: center center;
            background-repeat: no-repeat;
            background-size: contain;
            background-repeat: no-repeat;
            &:hover {
              a {
                display: block;
              }
            }
            a {
              display: none;
              position: absolute;
              right: 0;
              top: 0;
              width: 16px;
              height: 16px;
              line-height: 16px;
              text-align: center;
              background-color: #c77a7a;
              border-radius: 50%;
              transform: translate(50%, -50%);
              &:hover {
                background-color: #e85353;
              }
              i {
                font-size: 12px;
              }
            }
          }
          &.hot-style-default {
            border-radius: 50%;
            border: solid 1px rgba(255, 255, 255, 0.1);
            em {
              position: absolute;
              left: 50%;
              top: 50%;
              margin-left: -5px;
              margin-top: -5px;
              width: 10px;
              height: 10px;
              border: solid 0.5px #fff;
              background-color: #05c8ae;
              border-radius: 50%;
            }
            ul {
              margin: 0;
              cursor: default;
              position: fixed;
              right: 236px;
              width: 254px;
              padding-top: 14px;
              z-index: 10000;
              background: rgba(37, 40, 40, 1);
              box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
              border-radius: 5px;
              white-space: normal;
              li {
                width: 26px;
                height: 26px;
                margin: 0;
                margin-left: 14px;
                display: inline-block;
                border: solid 1px rgba(255, 255, 255, 0.5);
                border-radius: 50%;
                margin-bottom: 14px;
                &.active {
                  border: solid 2px #fff;
                  padding: 2px;
                }
                div {
                  width: 100%;
                  height: 100%;
                  border-radius: 50%;
                }
              }
            }
            > span {
              position: absolute;
              right: -6px;
              top: -6px;
              width: 16px;
              height: 16px;
              border-radius: 50%;
              background-color: @color;
              display: flex;
              align-items: center;
              justify-content: center;
              i {
                font-size: 12px;
              }
            }
          }

          &.hot-style-upload {
            display: flex;
            align-items: center;
            justify-content: center;
            border: solid 1px #555a5a;
            i {
              font-size: 20px;
              color: @color;
            }
          }
        }
      }
    }
    .remark {
      color: #ababab;
      line-height: 1.5;
      letter-spacing: 0.1px;
      white-space: pre-wrap;
      font-size: 12px;
    }
    .sceneTil{
      margin-bottom: 20px;
    }
  }
}
</style>
