<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-card>
        <template #header>
          <div class="fx-row fx-bet-cen">
            您的自选专业:
            <el-button @click="toMatch(1)">整体匹配</el-button>
          </div>
        </template> <div>
        <el-popover
          placement="bottom"
          trigger="hover"
          v-for="item in optionalMajors"
          popper-class="zero-padding-popover"
        >
          <div class="fx-column">
            <el-button plain type="text" @click="toGroupMatch(item)">匹配组合</el-button>
          </div>
          <el-tag class="mr10 mb10" type="success" slot="reference">{{ item.majorCategoryName }}</el-tag>
        </el-popover>
      </div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <template #header>
          <div class="fx-row fx-bet-cen">
            您的测评推荐专业:
            <div>
              <el-button type="primary" @click="$router.push('/career/testSelectSubject')">查看报告</el-button>
              <el-button @click="toMatch(2)">整体匹配</el-button>
            </div>
          </div>
        </template>
        <div>
          <el-popover
            placement="bottom"
            trigger="hover"
            v-for="item in evaluationMajors"
            popper-class="zero-padding-popover"
          >
            <div class="fx-column">
              <el-button plain type="text" @click="toGroupMatch(item)">匹配组合</el-button>
            </div>
            <el-tag class="mr10 mb10" type="success" slot="reference">{{ item.majorCategoryName }}</el-tag>
          </el-popover>
        </div>
      </el-card>
    </el-col>
    <!-- 整体组合匹配 -->
    <group-match ref="groupMatch"></group-match>
    <!-- 单组合匹配-->
    <single-group-match ref="singleMatch"></single-group-match>
  </el-row>
</template>
<script>
import GroupMatch from './groups-match'
import SingleGroupMatch from './single-group-match'
export default {
  components: {
    GroupMatch,
    SingleGroupMatch
  },
  props: {
    list: {
      type:Array,
      default: _ => []
    },
    optionalMajors: {
      type:Array,
      default: _ => []
    },
    evaluationMajors: {
      type:Array,
      default: _ => []
    }
  },
  data() {
    return {
      dialogVisible:false,
      propDefines: {},
    }
  },
  created() {
  },
  methods: {
    // 整体组合匹配
    toMatch(type) {
      // type 1 自选 2 测评
      if(type == 1) this.$refs.groupMatch.open(this.list,this.optionalMajors,type)
      if(type == 2) this.$refs.groupMatch.open(this.list,this.evaluationMajors,type)

    },
    // 单组合匹配
    toGroupMatch(major) {
      this.$refs.singleMatch.open(major,this.list)
    }
  }
}
</script>
<style scoped>

</style>
