<template>
  <div class="tabs">
    <a-tabs v-model="modelValue" class="ant-tabs-card-bar" :type="type" :tab-position="tabPosition" @change="tabChange">
      <slot></slot>
    </a-tabs>
  </div>
</template>

<script>
export default {
  name: 'AdminTabs',

  /**
   * Tabs
   * @property {String} value v-model语法糖
   * @property {String} type tabs类型
   * @property {String} tabPosition tabs标签位置
   * @author Matrix
   * @since 2022/09/16
   */
  props: {
    value: {
      type: String,
      required: false,
      default: ''
    },
    type: {
      type: String,
      required: false,
      default: 'card'
    },
    tabPosition: {
      type: String,
      required: false,
      default: 'top'
    }
  },
  data() {
    return {
      modelValue: this.value
    }
  },
  watch: {
    value: {
      handler(val) {
        this.modelValue = val
      },
      immediate: true
    }
  },
  methods: {
    /**
     * 切换标签触发
     * @param {String} key tabs下标
     * @author Matrix
     * @since 2022/09/16
     */
    tabChange(key) {
      this.$emit('input', key)
      this.$emit('on-change', key)
    }
  }
}
</script>

<style scoped>
::v-deep .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  border-radius: 4px 4px 0 0;
  margin-right: 8px;
}
::v-deep .ant-tabs-card-bar {
  margin: 0 0 4px 0 !important;
}
::v-deep .ant-tabs-tab-active {
  background-color: #1890ff !important;
  color: #fff !important;
}
</style>
