<template>
  <div v-loading="GDPLoading" style="padding: 0PX 30PX;">
    <!-- 折叠表格 -->
    <!-- <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'children'}">
      <el-table-column
          type="index"
          label="line"
          width="50">
      </el-table-column>
      <el-table-column
          width="150">
        <template slot-scope="scope">
        <span>
            {{directionData[scope.$index]}}
        </span>
        </template>
      </el-table-column>
      <el-table-column v-for="item in headData" :label="item.head" :key="item.head" >
        <el-table-column v-for="i in item.body" :prop="i.prop" :label="i.name" :key="i.name" width="120">

        </el-table-column>
      </el-table-column>
    </el-table> -->
    <!-- 未折叠表格 注：时间查询按年返回数据 -->
    <p style="font-size: 12px;">{{ $t(`home.GDPRemind`) }}</p>
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      @cell-click="handleCellClick"
      :row-style="rowStyle"
     

      >
    <el-table-column  
        type="index"  
        label="line"  
        width="60">
    </el-table-column>
    <el-table-column
        width="300">
      <template slot-scope="scope">
        <span :class="{symbolActive:scope.row.name==activeName}">
            {{directionData[scope.$index].label}}
        </span>
      </template>
    </el-table-column>
  
    <el-table-column v-for="(item,index) in headData" :label="item.year+``" :key="index" >
     
      <el-table-column v-for="(i,index) in item.head" :prop="i.prop" :label="i.name" :key="index" >
     
         
      </el-table-column>
      
    </el-table-column>
  </el-table>




    

    <el-row>
      <el-col :span="24" class="chartsBox">
        <div class="nameRefresh">
          <span>{{ activeName }}</span>
          <i @click="handelRefresh" class="i ishuaxin1 Refresh"></i>
        </div>
        <div
          v-loading="chartLoading"
          id="GDPBox" 
          style="width: 100%; min-height: 700px"
        ></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import IndexJs from "./index";
export default {
  mixins: [IndexJs],
};
</script>

<style lang="scss" scoped>
.GDPTable {
  outline: 1px solid red;
  li {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      width: 50px;
      
    }
  }
}
.chartsBox{
  outline: 1PX solid rgba(0, 0, 0, 0.2); 
  margin-top: 20px;
 .nameRefresh{
  padding: 5px 10px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
  .Refresh{
    margin-left: 5px;
  }
 
 }

}

.symbolActive {
  color: #f7931a;
  font-weight: 600;
}
.bold-row {
  font-weight: 600 !important;
  color: aqua;
}
</style>