<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="confirmCancel"></i>
      </div>
      <div class="content">
        <div>
          <ul>
            <li app-border dir-bottom>
              <div class="ui-remark">请点击热点图标，将鼠标移至全景图进行标记。</div>
              <div class="medias-list">
                  <ul>
                      <li
                          v-for="item in mediaList"
                          :key="item.name"
                          :class="{active:mediaType==item.name}"
                      >
                          <span></span>
                          <div>{{item.name}}</div>
                      </li>
                  </ul>
              </div>
              <div style="margin-bottom: 0">
                <ul class="styles">
                  <li
                    :class="{ active: item.id == hotspot.icontype }"
                    v-for="(item,i) in hotStyle"
                    @click="addhotspot(item)"
                    :key="i"
                  >
                    <img :src="item.thumb" alt="">
                  </li>
                </ul>
              </div>
              <div class="bars">
                  <RangeItem :value="rang" @input="onRangeChange" />
              </div>
            </li>
            <li app-border dir-bottom>
              <div class="ui-between title">标题
                  <div
                    class="checkbox"
                    @click="hotspot.visible=!hotspot.visible"
                    :class="{checked:hotspot.visible}"
                >
                    <i class="iconfont icon_checkbox"></i>
                    &nbsp;显示标题
                </div>
              </div>
              <div>
                <input
                  type="text"
                  class="ui-input"
                  placeholder="请填写标题限15字"
                  :maxlength="15"
                  v-model="hotspot.hotspotTitle"
                />
              </div>
              <div class="ui-between title">字号</div>
              <div class="medias-list">
                  <ul>
                      <li
                          v-for="item in fontSizeList"
                          :key="item.name"
                          @click="hotspot.fontSize = item.name"
                          :class="{active:hotspot.fontSize==item.name}"
                      >
                          <span></span>
                          <div>{{item.name}}</div>
                      </li>
                  </ul>
              </div>
            </li>
            <li>
              <div class="ui-between title">效果</div>
              <combox
                :data="hotSpotTypeList"
                :selected-id="hotspot.hotspotType"
                @change="onhotSpotTypeChange"
              ></combox>
              <component 
              @sceneSelect="handleSceneSelect" 
              :scene="hotspot.secne"

              @imageChange="data=>{hotspot.image=data}" 
              :image="hotspot.image"

              @linkChange="data=>{hotspot.hyperlink=data}" 
              :link="hotspot.hyperlink"

              @textChange="data=>{hotspot.textarea=data}" 
              :textarea="hotspot.textarea"

              @audioChange="data=>{hotspot.audio=data}" 
              :audio="hotspot.audio"

               @videoChange="data=>{hotspot.video=data}" 
              :video="hotspot.video"
              
              :is="component"
              ></component>
            </li>
          </ul>
        </div>
      </div>
      <div class="ui-between footer" app-border dir-top>
        <button class="ui-button submit"  :class="{disable: false}" @click="save">完成</button>
      </div>
    </div>
  </transition>
</template>


<script>
import RangeItem from "@/components/rangeItem";
import Combox from "@/components/shared/Combox";
import { mapGetters } from "vuex";

let HTMap = {
  scene:{
    key:'secne',
    type:'Object',
    errortxt:'请选择场景'
  },
  audio:{
    key:'audio',
    type:'String',
    errortxt:'请选择音频'
  },
   video:{
    key:'video',
    type:'String',
    errortxt:'请选择视频'
  },
   image:{
    key:'image',
    type:'Array',
    errortxt:'请选择图片'
  },
  link:{
    key:'hyperlink',
    type:'String',
    errortxt:'请输入超链接'
  },
  textarea:{
    key:'textarea',
    type:'String',
    errortxt:'请输入文本'
  }
}

export default {
  props: ['show','data','editTitle'],
  components:{
    RangeItem,
    Combox
  },

  

  data(){
    let cdn = this.$config.getStaticResource('/panoassets/images/hotspot/icon/')
    let hotStyle = []

    for (let i = 0; i < 12; i++) {
      hotStyle[i] = {
        id:'icon'+(i+1),
        img:cdn+`img_doticon_${String(i+1).padStart(2, '0')}@2x.png`,
        thumb:cdn+`img_doticon_${String(i+1).padStart(2, '0')}@2x.png`
      }
    }

   
    return {
      canSave:false,
      hotSpotTypeList:[
        {
          id:'scene',
          name:'场景切换'
        },
        {
          id:'link',
          name:'超链接'
        },
        {
          id:'textarea',
          name:'文本'
        },
        {
          id:'image',
          name:'图片'
        },
        {
          id:'audio',
          name:'音频'
        },
        {
          id:'video',
          name:'视频'
        }
      ],
      mediaList: [
          {
              name: "默认",
              icon: "iconphotoview",
          }
      ],
      fontSizeList:[
          {
              name: "12",
              icon: "iconphotoview",
          },
          {
              name: "14",
              icon: "iconvideo_view",
          },
          {
              name: "16",
              icon: "iconsoundview",
          }
      ],
      mediaType:'默认',
      hotStyle,
      rang: {
        label: '图标大小',
        unit: "倍",
        gradient: 0.5,
        value: 1,
        min: 0.5,
        max: 2
      },
      selectItem:'',
      styIcon:'',
      linkicon:'',
      infoItem: '',
      isAdd:true,
    }
  },

  watch:{
    'hotspot.hotspotTitle':function () {
      let krpano = document.getElementById('krpanoSWFObject');
      krpano.set('layer[tooltip_'+this.hotspot.name+'].html',this.hotspot.hotspotTitle)
    },
    'hotspot.visible':function () {
      let krpano = document.getElementById('krpanoSWFObject');
      krpano.set('layer[tooltip_'+this.hotspot.name+'].visible',this.hotspot.visible)
    },
    'hotspot.size': {
      immediate:true,
      handler:function (newVal) {
        let krpano = document.getElementById('krpanoSWFObject');
        let h = 50
        let scaleH = h*newVal
        this.rang = { ...this.rang, value: newVal }
        krpano.set(`hotspot[${this.hotspot.name}].height`,scaleH)
      }
    },
    'hotspot.fontSize':{
      handler:function (newVal) {
        let krpano = document.getElementById('krpanoSWFObject');
        krpano.set('layer[tooltip_'+this.hotspot.name+'].css',`text-align:center; color:#FFFFFF;
          font-family:STXihei;font-size:${newVal}px;`)
      }
    },
    show(newVal){
      if (!newVal) {
        this.$bus.removeListener('selectUrl',this.listerFn)
      }
    }
  },
  beforeDestroy(){
    this.$bus.removeListener('selectUrl',this.listerFn)
  },
  computed:{
    ...mapGetters({
      hotspot:'hotspot',
      backupHotSpot:'backupHotSpot'
    }),
    component(){
      let tmp = this.hotspot.hotspotType
      return () => import(`./hotspotType/${tmp}.vue`);
    },
  },
  mounted(){
      this.selectItem = {
        sceneCode: this.infoItem.link
      }
      this.$bus.on('selectUrl',this.listerFn)
      this.$bus.on('delhotspot',()=>{
        this.cancel()
      }) 

    this.$nextTick(()=>{
      if (this.editTitle != '编辑') {
        this.addhotspot(this.hotStyle[0])
      }
    })
  },

  methods: {
    handleSceneSelect(data){
      this.hotspot.secne= data
    },
    onhotSpotTypeChange(data){
      this.hotspot.hotspotType = data.id
    },
    onRangeChange(data) {
      this.rang = { ...this.rang, value: data.value }
      this.hotspot.size = data.value
    },
    listerFn(data){
      this.selectItem = {
        sceneCode: data.sceneCode
      }
      this.infoItem.link = data.sceneCode
      this.infoItem.thumb = data.icon  
    },
    confirmCancel(){
      this.$confirm({
            content: "热点内容未编辑完，确定要关闭吗",
            ok: () => {
              this.cancel()
            }
        });
    },
    cancel() {
      this.$store.commit("SetHotspot", this.backupHotSpot);
      this.$emit("close",{
        type:this.editTitle=='编辑'?'edit':'add',
        data:this.backupHotSpot
      });
    },
    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() {
      let {img,hotspotTitle,hotspotType} = this.hotspot
      let item = HTMap[hotspotType]

      if (!img) {
        return this.$alert({
          content: "请选择热点图标",
        });
      }

       if (!hotspotTitle.trim()) {
        return this.$alert({
          content: "请输入热点标题",
        });
      }

       if (!this.hotspot[item.key]||(item.type == 'Array'&&this.hotspot[item.key].length<=0)) {
        return this.$alert({
          content: `${item.errortxt}`,
        });
      }
      this.$store.commit("SetHotspot", this.hotspot);
      this.$emit("close");
      this.$emit("save",this.hotspot);
    },
    addhotspot(data){
      let krpano = document.getElementById('krpanoSWFObject');

      if (this.isAdd) {
        this.isAdd = false
        this.hotspot.img = data.img
        this.hotspot.icontype = data.id
        this.styIcon = data.id
        this.$bus.emit('addhotspot',this.hotspot)
        krpano.set('layer[tooltip_'+this.hotspot.name+'].css',`text-align:center; color:#FFFFFF;
          font-family:STXihei;font-size:${this.hotspot.fontSize}px;`)
      }
      else{
        this.hotspot.img = data.img
        this.hotspot.icontype = data.id
        this.styIcon = data.id
        krpano.set(`hotspot[${this.hotspot.name}].url`,data.img)
        krpano.set(`hotspot[${this.hotspot.name}].hotspottitle`,this.hotspot.hotspotTitle)
        

      }
    }
  }
};
</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%;
      overflow-y: auto;
    }
    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-list {
            position: relative;
            ul {
                margin-bottom: 10px;
                display: flex;
                justify-content: space-between;
            }
            li {
                position: relative;
                // cursor: pointer;
                padding: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                span {
                    width: 14px;
                    height: 14px;
                    background-color: #fff;
                    border: solid 3px #fff;
                    border-radius: 50%;
                }
                i {
                    font-size: 23px;
                    margin-left: 4px;
                    color: rgba(255, 255, 255, 0.5);
                }
                em {
                    display: none;
                    position: absolute;
                    top: -8px;
                    left: 50%;
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-width: 8px;
                    border-color: #000 transparent transparent;
                }

                div {
                    padding: 5px;
                    border-radius: 4px;
                    font-size: 14px;
                }

                &.active {
                    span {
                        background-color: @color;
                    }
                    i {
                        color: @color;
                    }
                }
                &:hover {
                    em,
                    div {
                        display: block;
                    }
                }
            }
        }
    .medias {
        height: 105px; 
        width: 210px;
        position: relative;
        background: #161A1A;
        cursor: pointer;
        border: 1px solid #555A5A;
        >img{
          width: 100%;
          height: 100%;
        }
        .btn-push{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            text-align: center;
            color: @color;
            >i{
                font-size: 20px;
            }
            >span{
                display: block;
            }
        }
    }
    .styles {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      min-width: 216px;
      li {
        position: relative;
        cursor: pointer;
        padding: 0;
        margin-left: 20px;
        margin-top: 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(4n+1) {
          margin-left: 0;
        }

        &:nth-of-type(-n+4) {
          margin-top: 0;
        }
        
        > span {
          position: absolute;
          left: 0;
          right: 0;
          bottom: -20px;
          text-align: center;
          font-size: 12px;
        }
        >i{
            font-size: 32px;
        }
        >img{
          width: 34px;
          height: 34px;
        }
        &.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: @color;
              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;
            }
          }
        }
      }
    }
    .bars{
      margin-top: 20px;
    }
    .remark {
      color: #ababab;
      line-height: 1.5;
      letter-spacing: 0.1px;
      white-space: pre-wrap;
      font-size: 12px;
    }
  }
}
</style>
