<template>
  <div style="padding: 8px 20px 20px;">
    <el-collapse v-model="activeShowList" @change="collapseChange">
      <el-collapse-item v-for="(val,key, index) of secondChartList" :title="`【${val && val.title || ''}】`" :name="key || ''">
        <div class="mt10 w100">
          <div class="w100 plr-20" style="font-size: 14px">
            <div v-for="(item,key,index) of val && val.formList || []" :key="`${key}-${index}`"  class="w50 disInlineBlock p10">
              <span class="w50 disInlineBlock" style="color: #C0C4CC;">{{item}}</span><span class="w50">{{val && val.formModel[key] || '-'}}</span>
            </div>
          </div>
          <div v-for="item of val && val.echartList || []" :key="`div-${val && val.title || ''}-${item && item.title || ''}-${index}`" class="w100 mt20 mb20" style="height: 200px;border-top: 1px solid #d8dce5">
            <EchartsLine class="w100 h100" :key="`chart-${val && val.title || ''}-${item && item.title || ''}-${index}`" :lineData="item && item.dataVal || {}" :dateDataTrans="item && item.dateDataTrans || {}" :dateShowType="item && item.dateShowType || 'datetimerange'" :title="item && item.title || '图表数据'" :chartData="(valData) => chartDataEvent(valData, item.fnEvent,val.title, key)"></EchartsLine>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
  import EchartsLine from "@/components/echartsList/line.vue";
  export default {
    name: 'SecondAutoFind',
    components: {EchartsLine},
    props: {
      secondChartList: {
        type: Object,
        default: () => {}
      },
      activeNames: {
        type: Array,
        default: () => []
      },
    },
    watch: {
      activeNames: {
        handler(val) {
          this.activeShowList = val;
        },
        deep: true,
        immediate: true
      },
    },
    data() {
      return {
        activeShowList: []
      }
    },
    created() {},
    methods: {
      collapseChange(val) {
        this.activeShowList = this.activeNames;
        this.$emit("collapseChangeData", val);
      },
      chartDataEvent(valData, funcName, tabName, key) {
        this.$emit("chartFnEvent", valData, funcName, tabName, key);
        // // 检查函数是否存在，避免报错
        // if (typeof this[funcName] === 'function') {
        //   // 调用实际函数，并传递参数（如选中的值、当前项）
        //   // this[funcName]({startTime: valData[0], endTime: valData[1]});
        // } else {
        //   console.warn(`函数 ${funcName} 未定义`);
        // }
      }
    }
  }
</script>
<style scoped>
  ::v-deep .el-collapse-item__header {
    background-color: #d4e3fc!important;
    /*color: #fff!important;*/
    padding-left: 20px;
    font-size: 1rem;
  }
</style>
