<template>
  <div>
    <div v-if="Object.keys(model).length > 0">
       <h3 class="text-center f28">{{`${year}年${model.location}省选科大数据分析`}}</h3>
       <el-row class="mb20" :gutter="10">
         <el-col class="f14" :span="col.span" v-for="col in cols">
           <p class="pb10" style="border-bottom: 1px solid #ebeef5;"> {{col.label}}</p>
           <p class="f20 f-333 pt10 pb10"> {{col.value}}</p>
           <p class="f16" :class="{'f-red':col.span == 4}"> {{col.subValue}}</p>
         </el-col>
       </el-row>
      <mx-table :prop-defines="propDefines" :rows="model.majorCombine">
          <template #groupInfo="{row}">
            <div >
              <span >{{row.name}}</span >
              <el-progress style="width:70%;float: right" :text-inside="true" :stroke-width="24" :percentage="row.percent" status="success"></el-progress>
            </div>

          </template>
      </mx-table>
    </div>
    <div v-else>
      暂无数据
    </div>
  </div>
</template>
<script>
import { getSelectCourseBigdata } from '@/api/webApi/selection'
import { xkcxYears } from '@/api/webApi/webQue'

export default {
  name: 'GroupSubjectQuery',
  props: {
    level:{
      type: String,
      default: ''
    }
  },
  data() {
    return{
      year: '',
      model: {},
      propDefines:{
       index:{
         label: '序号',
         type: 'index'
       },
        name:{
          label: '选科组合',
          slot: 'groupInfo'
        },
        count:{
          label: '匹配专业',
          width:'100px',
        },
        percentview:{
          label: '匹配率',
          width:'100px',
        },
      }

    }
  },
  computed: {
    cols(){
      if(!this.model) return []
      const cols = [
        {
          label: '院校',
          span: 4,
          value: this.model.countcollege,
          subValue: '院校（所）'
        },
        {
          label: '专业',
          span: 4,
          value: this.model.countmajor,
          subValue: '专业（个）'
        }
      ]
      this.model.majorSubject.forEach(item => {
         cols.push(
           {
             label: item.name,
             value: item.count,
             span: 2,
             subValue: item.percentview
           }
         )
      })
      return cols
    }
  },
  created() {
    console.log(111111111111111)
    this.getYears()
  },
  methods: {
    // 取有效年份清单
    getYears() {
      xkcxYears().then((res) => {
        this.year = res.data[0]
        this.$nextTick(_ => {
          this.getList()
        })
      });
    },
    getList() {
      getSelectCourseBigdata({
        year: this.year,
        eduLevel:this.level
      }).then(res => {
        this.model = res.data || {}
          console.log(res)
      })
    }
  }
}
</script>
<style scoped>
</style>
