<template>
  <div>
    <el-collapse v-model="activeName" accordion @change="handleChange" v-loading="loading">
      <!-- //collapse测试数据 -->
      <template v-if="collapseList.length>0">
        <!-- :key及:name要改成id -->
        <!-- <el-collapse-item  v-for="(item,index) in collapseList" :key="index+1" :title="item[queryParams.groupField]" :name="item[queryParams.groupField]"> -->
        <el-collapse-item  v-for="(item,index) in collapseList" :key="index+1" :title="`${item.key} （标注数量：${item.count}）`" :name="item.key">
          <div :style="{'height':sonHeight-(collapseList.length>1?'150':'100') +'px'}" style="padding: 10px;overflow-y: auto;">
            <indiciaCard :dataArr="dataArr" :queryParams="params" ></indiciaCard>
          </div>
        </el-collapse-item>
      </template>
      <template v-else>
        <el-collapse-item title="暂无数据" name="0">
          <indiciaCard></indiciaCard>
        </el-collapse-item>
      </template>

    </el-collapse>
  </div>
</template>

<script>
import indiciaCard from './card.vue'
export default {
  components: {
    indiciaCard
  },
  //collapse测试数据
  props: ['dataArr','collapseList','queryParams','sonHeight','loading'],
  data() {
    return {
      activeName: '',
      params: {
        current: this.queryParams.current,
        size:this.queryParams.size
      }
    }
  },
  computed: {
    // activeName() {
    //   let activeName = this.active
    //   return activeName
    // },
  },
  watch: {
    'collapseList'(val) {
      if (val) {
        this.params={
        current: this.queryParams.current,
        size:this.queryParams.size
      }
        let data = val[0].key
        this.activeName=data
      } else {
        this.activeName=''
      }
    },
  },
  mounted() { 

  },
  methods: {
    handleChange(val) {
      console.log(val);
      if (val) {
        this.$emit('collapseVal',val)
      }
    },
  },
}
</script>

<style lang="scss">

</style>