<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane v-for="(item,index) in combinationCodes" :key="index">
        <div slot="label" @click="changeCombination(item)">{{ item }}
        </div>
        <CombinationInfo ref="combRef" :showBtn="$attrs.showBtn === undefined?true: $attrs.showBtn" :combinationCode="combinationCode"></CombinationInfo>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import CombinationInfo from "./info.vue";
import Da from "element-ui/src/locale/lang/da";

export default {
  name: "CombinationInfos",
  components: {CombinationInfo},
  props: {
    combinationCodes: {
      type: Array,
      default: null
    }
  },
  data() {
    return {combinationCode: '', key: ''}
  },
  watch: {
    combinationCodes: {
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          console.log(newVal)
          this.combinationCode = this.combinationCodes[0]
        })
      },
      immediate: true
    }
  },
  created() {
  },
  methods: {
    changeCombination(combinationCode) {
      this.$nextTick(() => {
        this.combinationCode = combinationCode
        this.$refs.combRef[0].changeCombination(combinationCode)
      })
    }
  }
};
</script>


<style scoped>

</style>
