<!--
 * @Descripttion:
 * @Version: 1.0
 * @Author: +C
 * @Date: 2022-02-18 09:32:43
 * @LastEditors: +C
 * @LastEditTime: 2022-03-07 11:37:30
-->
<template>
  <div v-if="tabList.length==0" class="showview ant-card ant-card-bordered">
    <div class="ant-card-head">
      <div class="ant-card-head-wrapper">
        <div class="ant-card-head-title">
          {{ $attrs.title }}
        </div>
        <div class="ant-card-extra">
          <slot name="extra"></slot>
        </div>
      </div>
    </div>
    <div class="ant-card-body">
      <slot></slot>
    </div>
  </div>
  <!-- tab -->
  <div v-else class="showview ant-card ant-card-bordered">
    <div class="ant-card-head">
      <div class="ant-tabs ant-tabs-top ant-tabs-large ant-tabs-line ant-card-head-tabs">
        <div class="ant-tabs-bar ant-tabs-top-bar ant-tabs-large-bar">
          <div class="ant-tabs-nav-container">
            <div class="ant-tabs-nav-wrap">
              <div class="ant-tabs-nav-scroll">
                <div class="ant-tabs-nav ant-tabs-nav-animated">
                  <div>
                    <div v-for="(item,i) in tabList" :key="i" class=" ant-tabs-tab" :class="{'ant-tabs-tab-active':item.tab==activeTabKey}" @click="changeTap(item.key)">
                      {{ item.tab }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="ant-card-extra">
                <slot name="extra"></slot>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ant-card-body">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DxxCard',
  //页面引用的组件
  components: {},
  //父页面传递参数
  props: {
    //tablist
    tabList: {
      type: Array, //类型 String Number Object Array Boolean
      required: false, //是否必填
      default: () => [] // 默认值
    },
    //tab默认值
    activeTabKey: {
      type: String, //类型 String Number Object Array Boolean
      required: false, //是否必填
      default: '' // 默认值
    }

  },
  data() {
    return {};
  },
  //监控计算变量
  computed: {

  },
  //监听
  watch: {},
  //页面的构造方法
  created() { },
  //父页面定义方法给子页面inject调用
  providee() { return {} },
  //子组件调用注入到父页面providee
  inject: [],
  //dom加载完
  mounted() { },
  //页面的自定义方法
  methods: {
    /**
     * @description: 切换
     * @author: +c
     * @param {*} key
     * @return {*}
     */
    changeTap(key) {
      this.$emit('tabChange', key)

    }
  }
};
</script>

<style scoped>
.ant-tabs-tab-active {
  border-bottom: 3px solid #1890ff;
}
.ant-tabs-nav-wrap .ant-card-extra {
  float: none;
  position: absolute;
  right: 0;
  top: 0;
}
</style>
