<template>
  <div class="page-module-tabs">
    <el-tabs :value="value" type="card" @tab-click="handleTabClick">
      <el-tab-pane v-for="tab in tabs" :key="tab.value" :name="tab.value">
        <div slot="label" class="page-module-header-tab"><img :class="tab.icon" :src="tab.icon" class="page-module-header-tab-icon"> {{ tab.label }}</div>
      </el-tab-pane>
    </el-tabs>
    <slot />
  </div>
</template>

<script>
export default {
  name: 'PageModuleTabs',
  props: {
    tabs: {
      type: Array,
      default: () => []
    },
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    /**
     * tab切换方法
     */
    handleTabClick(tab) {
      this.$emit('input', tab.name)
    }
  }
}
</script>

<style lang="scss">
.page-module-tabs {
  margin: 0 auto 12px;
  width: 960px;
  background: #fff;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 12px 32px 24px;
  .el-tabs__header {
    border-color: #EBEEF2;
    .el-tabs__nav {
      border: none;
      .el-tabs__item {
        background: #F9FAFB;
        border-radius: 4px 4px 0px 0px;
        border: 1px solid #EBEEF2;
        color: #212026;
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        width: 152px;
        line-height: 48px;
        margin-right: 12px;
        height: 48px;

        .page-module-header-tab {
          align-items: center;
          display: flex;
          opacity: 0.5;
          justify-content: center;

          .page-module-header-tab-icon {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-right: 8px;
          }
        }

        &.is-active {
          background-color: #ffffff;
          border-bottom: 0;
          color: #212026;
          .page-module-header-tab {
            opacity: 1;
          }
        }
      }
    }
  }
}
</style>
