<template>
  <div class="fx-column">
    <el-tabs v-model="currentTabDisplayName" tab-position="left">
      <el-tab-pane v-for="(groupModel,idx) in settingModel['groupModels']" :key="`${idx}_${groupModel.localId}`"
                   :name="groupModel.displayName">
        <template #label>
          <el-badge is-dot :type="groupModel.completed?'primary':'danger'">
            <el-tag :effect="isActive(groupModel)?'light':'plain'">
              {{ groupModel.displayName }}
            </el-tag>
          </el-badge>
        </template>
        <round-setting-group ref="group" :setting-model="settingModel"
                             :group-model="groupModel" :group-model-index="idx" :enable-add="enableAdd"
                             :enable-delete="enableDelete" @new="handleNewModel" @clone="handleCloneModel"
                             @delete="handleDeleteModel"></round-setting-group>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import RoundSettingGroup from '@/views/elective/publish/components/steps/round-setting-group'

export default {
  name: 'round-setting-group-models',
  components: { RoundSettingGroup },
  props: {
    settingModel: {
      type: Object,
      default: _ => ({})
    }
  },
  data() {
    return {
      currentTabDisplayName: '',
      supportNames: ['模型一', '模型二', '模型三']
    }
  },
  computed: {
    enableAdd() {
      return this.settingModel.groupModels.length < this.supportNames.length
    },
    enableDelete() {
      return this.settingModel.groupModels.length > 1
    }
  },
  watch: {
    settingModel: {
      immediate: true,
      handler: function(newVal) {
        this.ensureGroupModels()
        this.currentTabDisplayName = newVal.groupModels.first().displayName
      }
    }
  },
  methods: {
    ensureGroupModels() {
      let groupModels = this.settingModel['groupModels']
      // at least 1 element.
      if (!groupModels?.length) {
        groupModels = [this.createEmptyModel()]
      }
      // keep support length
      if (groupModels.length > this.supportNames.length) {
        groupModels = groupModels.slice(0, this.supportNames.length)
      }
      // rename
      groupModels.forEach((gm, idx) => {
        this.$set(gm, 'displayName', this.supportNames[idx])
        gm.displayName = this.supportNames[idx]
        // code below: 形成按引用区分组件缓存的方法
        if (!gm.localId) gm.localId = new Date().getTime().toString()
      })
      this.$set(this.settingModel, 'groupModels', groupModels)
    },
    createEmptyModel() {
      return { groupIds: [], roundGroups: [], faculties: [], completed: false }
    },
    isActive(groupModel) {
      return groupModel.displayName == this.currentTabDisplayName
    },
    showBestValue(groupModel) {
      return this.settingModel.groupModels.length && groupModel.isBest ? '荐' : ''
    },
    showNotCompleted(groupModel) {
      return !groupModel.completed
    },
    handleNewModel() {
      const empty = this.createEmptyModel()
      this.settingModel['groupModels'].push(empty)
      this.ensureGroupModels()
      this.currentTabDisplayName = empty.displayName
    },
    handleCloneModel(model) {
      const clone = this.deepClone(model)
      // TODO: 清理关键的ID标识
      this.settingModel['groupModels'].push(clone)
      this.ensureGroupModels()
      this.currentTabDisplayName = clone.displayName
    },
    handleDeleteModel(model) {
      this.settingModel['groupModels'].remove(model)
      this.ensureGroupModels()
      this.currentTabDisplayName = this.settingModel['groupModels'].last().displayName
    },
    async shouldGoNext() {
      for (const groupRef of this.$refs.group) {
        await groupRef.shouldGoNext()
      }
      // confirm faculty calc
      const unFinished = this.settingModel.groupModels.filter(gm => !gm.completed)
      if (!unFinished.length) return Promise.resolve()
      const confirm = `[${unFinished.map(gm => gm.displayName).toString()}]尚未完成师资匹配计算，确认要进入下一步？`
      return this.$confirm(confirm)
    }
  }
}
</script>

<style scoped>
/deep/ .el-badge__content.is-fixed {
  top: 10px;
}

/deep/ .el-badge__content {
  line-height: 16px;
}
</style>
