/*** 
 * @Author: yangxin yangxin@weiling.cn
 * @Date: 2023-04-25 16:32:55
 * @LastEditors: yangxin yangxin@weiling.cn
 * @LastEditTime: 2023-06-19 14:45:00
 * @FilePath: \mobile-monorapo\packages\mobile-ui\src\components\BCFooterTabs\src\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
<template>
  <div class="multiple-operation" data-weiling-mobile-ui-bc-footer-tabs>
    <ul class="multiple-operation-main">
      <li class="multiple-operation-main-item" v-for="item in tabList" :key="item.id" v-show="item.visible"
        @click="onClickIcon(item)">
        <div class="icon">
          <WlPic :src="item.icon" />
        </div>
        <p class="title">{{ item.title }}</p>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
export default {
  name: "BCFooterTabs",
};
</script>

<script lang="ts" setup>
import WlPic from "@mobileUI/components/WlPic/src/index.vue";
type TData = {
  id: string;
  icon: string;
  title: string;
  visible: string;
};
type Props = {
  tabList: TData[];
}
withDefaults(defineProps<Props>(), {
  tabList: () => [],
});
const emit = defineEmits(["onChange"]);
const onClickIcon = (item: TData) => emit("onChange", item);
</script>

<style lang="scss">
.multiple-operation[data-weiling-mobile-ui-bc-footer-tabs] {
  height: 76px;
  background-color: var(--wl-primary-color);
  box-shadow: 0px -4px 8px rgba(28, 159, 255, 0.1);
  @extend %flex-direction-column;

  .multiple-operation-main {
    flex: 1;
    @extend %flex-middle;

    &-item {
      flex: 1;
      cursor: pointer;

      .icon {
        width: j(20);
        height: j(20);
        margin: 0 auto;
      }

      .title {
        color: #fff;
        font-size: j(12);
        margin-top: j(4);
        text-align: center;
      }
    }
  }
}
</style>
