<template>
  <div style="padding: 8px 20px 20px;">
    <el-collapse v-model="activeShowList" @change="collapseChange">
      <template v-for="(val,key, index) of chartDataLit">
        <el-collapse-item :title="`【${val && val.title || ''}】${val && val.serverIp || ''}`" :name="val && val.title || ''">
          <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 class="disInlineBlock" style="width: 120px;color: #C0C4CC;">{{item}}</div>
                <div style="width: calc(100% - 120px);vertical-align: top;" class="disInlineBlock">{{val && val.formModel[key] || '-'}}</div>
              </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, unit) => chartDataEvent(valData, item.fnEvent,val.title, unit)"></EchartsLine>
            </div>
          </div>
        </el-collapse-item>
      </template>
    </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) {
          console.log();
          // 因加入了fnFilterData方法进行了筛选排序，导致默认打开的不为原指定的元素了，这里就没用了
          // this.activeShowList = val;
        },
        deep: true,
        immediate: true
      },
      secondChartList: {
        handler(val) {
          this.chartDataLit = this.fnFilterData(val);
          // 因加入了fnFilterData方法进行了筛选排序，导致默认打开的不为原指定的元素了，这里就没用了
          // this.activeShowList = val;
        },
        deep: true,
        immediate: true
      },
    },
    data() {
      return {
        activeShowList: [],
        chartDataLit: {},
      }
    },
    created() {},
    methods: {
      // 筛选
      fnFilterData(chartList) {
        const allKeys = Object.keys(chartList);
        const hasKeys = allKeys.filter(key => key.includes('Corporation')); // 含'Corporation'的键
        const noKeys = allKeys.filter(key => !key.includes('Corporation')); // 不含'Corporation'的键
        const newObj = {};
        // 先添加含'Corporation'的键（保持原顺序）
        hasKeys.forEach(key => {
          newObj[key] = chartList[key];
        });
        // 再添加不含'Corporation'的键（保持原顺序）
        noKeys.forEach(key => {
          newObj[key] = chartList[key];
        });
        // 默认打开第一个元素
        if (newObj && Object.keys(newObj).length > 0 && this.activeShowList && this.activeShowList <= 0) {
          this.collapseChange([hasKeys[0]] || [Object.keys(newObj)[0]]);
        }
        return newObj;
      },
      collapseChange(val) {
        this.activeShowList = val;
        if (val && val.length > 0) {
          this.$emit("collapseChangeData", val);
        }
      },
      chartDataEvent(valData, funcName, tabName, unit) {
        this.$emit("chartFnEvent", valData, funcName, tabName, unit);
        // // 检查函数是否存在，避免报错
        // 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>
