
<template>
  <el-tabs v-model="activeTagId" type="card" v-loading="loading">
    <el-tab-pane
      v-for="item in options"
      :key="item.id"
      :label="item.name"
      :name="item.name"
    >
    </el-tab-pane>
  </el-tabs>
</template>

<script>
// import { getQuestionTypeOptionsApi } from '@/api/assessment-evaluation/questions'

export default {
  data: (_) => ({
    difficultyLevel: null,
    activeTagId: null,
    loading: false
  }),
  mounted () {
    this.initActive()
  },
  activated () {
    this.initActive()
  },
  props: {
    value: {
      default: null
    },
    options: {
      default: () => []
    }
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler (nv) {
        if (nv && Object.keys(nv).includes('id')) {
          this.activeTagId = nv.name
        }
      }
    },
    activeTagId: {
      immediate: false,
      deep: true,
      handler (nv) {
        let nObj = null
        if (this.options.length > 0) {
          nObj = this.getTypeById(nv)
        }
        this.$emit('input', nObj)
        this.$emit('change', nObj)
      }
    }
  },
  methods: {
    /*
      初始化tabbar当前选中项
    */
    initActive () {
      this.$nextTick(() => {
        this.activeTagId =
          this.activeTagId != null ? this.activeTagId : this.options[0].name
      })
    },
    /*
      根据ID获取选中项
    */
    getTypeById (name) {
      return this.options.find((item) => item.name === name)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-tabs--card > .el-tabs__header {
  border: none;
  border-bottom: 1px solid #e4e7ed;
}

::v-deep .el-tabs__nav-scroll {
  border: none;

  .el-tabs__nav {
    border: unset;
    border-bottom: 1px solid #e4e7ed;

    .el-tabs__item {
      padding: 0 30px !important;
      border-radius: 4px 4px 0 0 !important;
      border: 0;
      background: #fff;
      color: $--color-primary;

      &.is-active {
        background: $--color-primary;
        color: #fff;
      }
    }
  }
}
</style>
