<template>
    <div class="position-analysis-index-page" v-loading="loading" element-loading-text="Loading...">
        <el-tabs 
            class="tabs-wrap"
            v-model="activeType"
        >
            <el-tab-pane 
                v-for="item in list"
                :key="item.Exchange"
                :label="item.Exchange" 
                :name="item.Exchange"
            >
                <indexContent 
                  :list="item.Items" 
                  :num="item.Num" 
                  :time="item.DataTime" 
                  :exchange="item.Exchange"
                  :now="item.CurrDate"
                />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import {apiPositionAnalysisList} from '@/api/modules/positionAnalysis'
import indexContent from './components/indexContent.vue'
export default {
  components: { indexContent },
  data() {
    return {
      activeType: '',
      list: [],
      loading: false,

    }
  },

  methods: {
    getList(){
      this.loading=true
      apiPositionAnalysisList().then(res=>{
          this.loading=false
          if(res.Ret!==200) return
          this.list=res.Data||[]
          this.activeType=res.Data[0]&&res.Data[0].Exchange
      })
    }
  },

  mounted() {
    this.getList()
  }
}



</script>

<style lang="scss" scoped>
.position-analysis-index-page{
    min-height: 60vh;
    padding: 20px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 4px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
    .tabs-wrap{
        .el-tabs__nav-wrap::after{
            display: none;
        }
        .el-tabs__item{
            font-size: 16px;
        }
    }
}
</style>
<style lang="scss">
.position-analysis-index-page {
  .el-tabs__nav-wrap::after { background-color: transparent; }
}  
</style>