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

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

export default defineComponent({
  props: {
    projectId: {
      type: String,
      default: () => ''
    }
  },
  setup(props) {
    let router: any = useRouter();
    const store = useStore();
    const scenarioArr: any = [
      {
        id: 1,
        name: "讨论",
        img: parseImgUrl("ipdImages", "taolun.svg"),
      },
      {
        id: 2,
        name: "投影",
        img: parseImgUrl("ipdImages", "touying.svg"),
      },
      // {
      //   id: 3,
      //   name: "散会",
      //   img: parseImgUrl("ipdImages", "sanhui.svg"),
      // },
    ];
    const proxyData = reactive({
      parseImgUrl: parseImgUrl,
      scenarioArr: scenarioArr,
      activeId: 1,
      onSubmit(values: any) {
        router.push({ path: "/choice-project" });
      },
      checkScenario(item: any) {
        proxyData.activeId = item.id;
      },
    });
    watch(
        props,
        (newProps: any) => {
          proxyData.scenarioArr = newProps.scenarioArr
          // if (newProps.spaceId) {   // 空间id改变的重新获取值调用接口
          //
          // }
        }
    )
    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>
