<template>
  <div class="scenario">
    <div class="title">切换场景</div>
    <div class="scenario-box">
      <div class="scenario-item"
           @click="handleScene(item,index)"
           :class="item.code===activeIndex?'active':''"
           :key="index"
           v-for="(item,index) in popList"
      >
        <img :src="parseImgUrl('page-officehome',item.img)" alt="">
        <span>{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted, reactive, toRefs, watch, getCurrentInstance } from 'vue'
import { switchoverSceneHttp } from '@/apis/envmonitor'
import Keys from '@/constant/key'
import { getUserInfo, parseImgUrl } from '@/utils'
import { Toast } from 'vant'

export default defineComponent({
  props: {
    projectId: {
      type: String,
      default: () => ''
    },
    spaceId: {
      type: String,
      default: () => ''
    },
    popList: {  // 场景信息
      type: Array,
      default: () => []
    },
    vanPopupIndex: {
      type: String,
      default: () => ''
    }
  },
  setup(props, contx) {
    const sceneDetail: any = {}
    // const activeIndex: any = props.vanPopupIndex
    const proxyData = reactive({
      parseImgUrl: parseImgUrl,
      showSecenDetailDalig: false,    // 是否展示场景详情页面
      sceneDetail: sceneDetail,
      activeIndex: props.vanPopupIndex,
      /**
       * 加载loading
       */
      loadingStart() {
        Toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: '正在切换...'
        })
      },
      /**
       * 结束
       */
      loadinngEnd() {
        Toast.clear()
      },
      // 切换场景
      handleScene(mitem: any, idx: any) {
        let popList = props.popList
        let name = mitem.name
        for (let i = 0; i < popList.length; i++) {
          let item: any = popList[i]
          if (name === item.name) {
            proxyData.sceneDetail = JSON.parse(JSON.stringify(item))
            proxyData.sceneDetail.textObj = []

            item.textObj.map((element: any, idx: any) => {
              setTimeout(() => {
                proxyData.sceneDetail.textObj.push(element)
              }, 150 * (idx + 1))
            })
          }
        }
        proxyData.loadingStart()
        proxyData.activeIndex = proxyData.sceneDetail.code
        // 展示场景详情页面
        proxyData.showSecenDetailDalig = true
        const userInfo: any = getUserInfo()
        const params = {
          spaceId: props.spaceId,
          projectId: props.projectId,
          type: proxyData.sceneDetail.code,
          pubname: userInfo.pubname
        }
        switchoverSceneHttp(params).then(res => {
          // contx.emit('timerSpaceInfo')
          proxyData.loadinngEnd()
          contx.emit('setHeadScene', proxyData.sceneDetail.name, proxyData.sceneDetail)
        }).catch(() => {
          proxyData.loadinngEnd()
          contx.emit('setHeadScene', proxyData.sceneDetail.name, proxyData.sceneDetail)
          // contx.emit('timerSpaceInfo')
        })
      }
    })
    watch(
        props,
        (newProps: any) => {
          proxyData.activeIndex = newProps.vanPopupIndex
          // if (newProps.spaceId) {   // 空间id改变的重新获取值调用接口
          //
          // }
        }
    )
    return {
      ...toRefs(proxyData)
    }
  }
})
</script>

<style lang="scss" scoped>
.scenario {
  padding: 20px 24px;

  .title {
    font-family: PingFang SC;
    padding-bottom: 15px;
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 24px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #000000;
  }

  .scenario-item {
    display: inline-block;
    padding-top: 20px;
    margin-right: 10px;
    width: 78px;
    height: 88px;
    vertical-align: middle;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    color: #4D5262;

    img {
      display: block;
      margin: 0 auto;
      margin-bottom: 13px;
      width: 24px;
      height: 22px;
    }

    &.active {
      background: #FFE823;
      border-radius: 16px;
    }
  }
}
</style>
