<template>
  <section class="AiTabs" :class="{wrap}">
    <div class="tabItem" v-for="(op,i) in ops" :key="i"
         :class="{active:value==op.value,plain}"
         :style="{width:itemWidth}"
         @tap="$emit('change',op.value)">
      {{ op.name }}
    </div>
    <div class="end">
      <slot name="end"/>
    </div>
  </section>
</template>

<script>
export default {
  name: "AiTabs",
  model: {
    prop: "value",
    event: "change"
  },
  props: {
    value: {default: ""},
    ops: {default: () => []},
    wrap: Boolean,
    plain: Boolean,
    itemWidth: String
  },
}
</script>

<style lang="scss" scoped>
.AiTabs {
  display: flex;
  flex: 1;
  min-width: 0;
  max-height: 240px;
  overflow-y: auto;

  &.wrap {
    flex-wrap: wrap;
  }

  .tabItem {
    flex-shrink: 0;
    min-width: 144px;
    max-width: 100%;
    min-height: 64px;
    font-size: 28px;
    font-weight: 400;
    color: #666;
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #CCC;
    text-align: center;
    line-height: 64px;
    margin-bottom: 16px;
    margin-right: 16px;
    padding: 0 16px;
    box-sizing: border-box;

    &.active {
      border-color: $uni-color-primary;
      color: $uni-color-primary;

      &.plain {
        color: #fff;
        border-color: transparent;
        background: $uni-color-primary;
      }
    }
  }

  .end {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
