<template>
  <view class="c-tabs">
    <view>
      <u-tabs :list="props.list" lineColor="var(--w-main)" :itemStyle="{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '44px',
      }" :activeStyle="{
        color: 'var(--w-text-dark)',
        fontWeight: 'bold',
      }" :inactiveStyle="{
        color: 'var(--w-text-light)'
      }" @change="tabsChange" />
    </view>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance();

const props = defineProps({
  list: {
    type: Array,
    required: true
  }
})

const emit = defineEmits(['change']);

const tabsChange = (item) => {
  emit("change", item);
}

</script>

<style lang="scss" scoped>
.c-tabs {
  height: 44px;
  position: relative;

  &>view {
    background-color: var(--w-bg-light);
    position: fixed;
    width: 100%;
    z-index: calc(var(--w-z-index) - 1);
    box-shadow: 0 0 .5rem #0003;
  }
}
</style>
