<template>
  <div class="scene-config">
    <template v-for="(item, index) in scenarioArr" :key="'scene' + index">
      <div
        class="scene-item"
        @click="handleScene(item)"
        :style="{
          flex:
            scenarioArr.length &&
            scenarioArr.length == 2 &&
            item.sceneType === activeType
              ? 2
              : 1,
        }"
        :class="item.sceneType === activeType ? 'scene-active' : ''"
      >
        <img :src="item.img" alt="" />
        <span>{{ item.sceneName }}</span>
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  ref,
  watch,
} from "vue";
import { useRouter } from "vue-router";
import { getUserInfo, parseImgUrl } from "@/utils";
import { UserActionTypes } from "@/store/modules/user/action-types";
import { useStore } from "@/store";
import { switchoverSceneHttp } from "@/apis/envmonitor";

export default defineComponent({
  props: {
    projectId: {
      type: String,
      default: () => "",
    },
    spaceId: {
      type: String,
      default: () => "",
    },
    scenarioArr: {
      type: Array,
      default: () => [],
    },
    activeType: {
      type: String,
      default: () => "",
    },
  },
  setup(props, contx) {
    let router: any = useRouter();
    const store = useStore();
    let scenarioImgArr: any = {
      DISCUSSING: parseImgUrl("ipdImages", "taolun.svg"),
      PROJECTING: parseImgUrl("ipdImages", "touying.svg"),
      ADJOURNMENT: parseImgUrl("ipdImages", "sanhui.svg"),
    };
    const proxyData = reactive({
      parseImgUrl: parseImgUrl,
      scenarioArr: props.scenarioArr,
      scenarioImgArr: scenarioImgArr,
      activeType: "DISCUSSING",
      onSubmit(values: any) {
        router.push({ path: "/choice-project" });
      },
      formatScenarioImg() {
        // debugger
        proxyData.scenarioArr.map((item: any) => {
          item.img = proxyData.scenarioImgArr[item.sceneType];
        });
      },
      // 切换场景
      handleScene(item: any) {
        // 展示场景详情页面
        proxyData.activeType = item.sceneType;
        const userInfo: any = getUserInfo();
        const params = {
          spaceId: props.spaceId,
          projectId: props.projectId,
          type: item.sceneType,
          pubname: userInfo.pubname,
        };

        item.loading = true;
        item.lodingText = "正在切换至";
        contx.emit("setHeadScene", item);
        switchoverSceneHttp(params)
          .then((res) => {
            let resData: any = res;
            if (resData.result === "success") {
              item.loading = false;
              item.lodingText = "切换至";
              contx.emit("setHeadScene", item);
            }
          })
          .catch(() => {
            item.loading = false;
            item.lodingText = "";
            contx.emit("setHeadScene", item);
            // contx.emit('timerSpaceInfo')
          });
      },
    });
    watch(
      props,
      (newProps: any) => {
        proxyData.scenarioArr = newProps.scenarioArr;
        proxyData.formatScenarioImg();
        proxyData.activeType = newProps.activeType;
      },
      {
        deep: false,
        immediate: true,
      }
    );
    onMounted(() => {});
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
<style lang="scss" scoped>
.scene-config {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
  width: 100%;
  height: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
  border-radius: 25px;
  .scene-item {
    flex: 1;
    line-height: 58px;
    background: rgba(159, 183, 205, 0.15);
    border-radius: 16px;
    margin-left: 10px;
    text-align: center;
    &:nth-child(1) {
      margin-left: 0;
    }
    img {
      display: inline-block;
      vertical-align: middle;
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }
  }
  .scene-active {
    background: $elActive4;
  }
}
</style>
<style lang="scss">
</style>
