<template>
<div
  :class="[
    'sections', scene,
    isDownCtrls ? 'down' : 'up',
    direction ? 'out' : 'in'
  ]"
>

  <div class="inner">
    <div
      v-for="(_, x) in data"
      :key="x"
      :style="{ flexGrow: _.grow }"
      :class="['x-section', { act: x === act && scene === 'section' }]"
      @click="() => goSection(x)"
    >
    </div>
  </div>

</div>

</template>

<script lang='ts' setup>

import { defineProps } from 'vue'

const props = withDefaults(defineProps<{
  data: any[],
  scene: string,
  isDownCtrls?: boolean,
  direction: number
}>(), {
  isDownCtrls: false
})


const emits = defineEmits(['go-section'])
const act = defineModel<number>()


// 进入缎面模式 | 缎面切换
const goSection = (x) => {
  emits('go-section', x)
}

</script>

<style lang='scss' scoped>

// $base-common: '@/assets/images/common/';

.sections {
  position: relative;

  .inner {
    display: flex;
  }
  .x-section {
    cursor: pointer;
    height: 12px;
    border-radius: 32px;
    background: #1f5080;
    margin-right: 1px;
    transition-property: all;
    transition-duration: 0.3s;
    &:hover {
      box-sizing: border-box;
      background: rgba(0, 221, 255, 0.3);
      border: 1px solid rgba(0, 221, 255, 1);
      box-shadow: 0 0 10px rgba(0, 221, 255, 1);
    }
    &.act {
      background: #00ddff;
    }
  }

  &.in {
    .inner {
      flex-direction: row-reverse;
    }
  }

}

.panorama {
  &.up {
    margin: 8px 90px 0;
    flex-direction: row-reverse;
  }

  &.down {
    margin: 8px 90px 0;
  }
}

.section {
  margin: 28px 90px 0;
}

</style>