<template>
    <section class="RTContainerTopBox">
        <!-- <div class="TopBoxleft">
           <img src="~@/assets/images/RTImgs/adtxt.png" class="adtxtImg"><img src="~@/assets/images/RTImgs/adpic.png" class="adpicImg">
        </div> -->
        <div class="TopBoxright">
            <li v-for="(item,index) in tableArr" :index='index' :key='index'>
                <em>
                    <img :src='item.img' v-if='item.img.indexOf("http")>-1'>
                    <img :src='"/obpm"+item.img' v-else-if='item.img.indexOf("http")==-1'>
                    <img src="~@/assets/images/RTImgs/项目总数(1).png" v-else>
                </em>
                <span class="count"><strong :class="'strong'+index">{{item.item_figure}}</strong><b><i :class="'i'+index"></i>{{item.item_name}}</b></span>
            </li>
            <!-- <li>
                <em><img src="~@/assets/images/RTImgs/集团总部项目(1).png"></em>
                <span class="count"><strong class="greentxt">{{tableObj.groupProjectNumber}}</strong><b><i class="greentxtbg"></i>集团总部项目</b></span>
            </li>
            <li>
                <em><img src="~@/assets/images/RTImgs/子公司项目(1).png"></em>
                <span class="count"><strong class="zstxt">{{tableObj.subsidiaryProjectNumber}}</strong><b><i class="zstxtbg"></i>子公司项目</b></span>
            </li>
            <li>
                <em><img src="~@/assets/images/RTImgs/新建项目 (1).png"></em>
                <span class="count"><strong class="hstxt">{{tableObj.newProject}}</strong><b><i class="hstxtbg"></i>新建项目</b></span>
            </li>
            <li>
                <em><img src="~@/assets/images/RTImgs/续建项目(1).png"></em>
                <span class="count"><strong class="lstxt">{{tableObj.continuedProject}}</strong><b><i class="lstxtbg"></i>续建项目</b></span>
            </li>
            <li>
                <em><img src="~@/assets/images/RTImgs/2022年度总投资(万元)(1).png"></em>
                <span class="count"><strong class="bluetxt">{{tableObj.totalInvestment}}</strong><b><i class="bluetxtbg"></i>2022年度总投资(万元)</b></span>
            </li> -->
        </div>
    </section>
</template>
<script>
export default {
   data(){
       return{
         params:{},
         tableArr:[] 
       }
   },
   mounted(){
     this.list()
   },
   methods:{
      list(){
          this.$api.workbenchDataEntryApi(this.params,{
                onSucess: response => {
                    console.log(response)
                    this.tableArr=response.data.datas
                    console.log(this.tableArr)
                    this.tableArr.forEach(item=>{
                        if(item.item_icon){
                            this.$set(item,'img',JSON.parse(item.item_icon)[0].path)
                        }
                    })
                }
            })
      }
   } 
}
</script>
<style lang="scss">
.RTContainerTopBox{
   display: flex;
  .TopBoxleft{
     width: 29%;
     height: 80px;
     background: #000;
     
     border-radius: 8px;
     border-top-left-radius: 14px;
     border-top-right-radius: 14px;
     display: flex;
     margin-right: 1%;    
     align-items: center;
     justify-content: space-between;
        .adtxtImg{
            width: auto;
            height: 40px;
          margin-left:10%
        }
        .adpicImg{
            width: auto;
            height: 70px;
          margin-right: 10%;
          align-self: flex-end;
        }
     
  }
  .TopBoxright{
      display: flex;
      flex:1;
    // width: 70%;
      overflow: auto;
      li{
          padding: 16px;
          height:80px;
          display: flex;
          background: #fff;
          border-radius: 8px;
          margin-right: 16px;
          flex:1;
          align-items: center;
          em{width: 36px; height: 36px;margin-right: 12px;}
          .count{
              display: flex;flex-direction: column;
              strong{
                  color: #0967FF;font-size: 16px;margin-left:7px;
                  &.strong0{color: #0F71FF;}
                  &.strong1{color: #15CD64;}
                  &.strong2{color: #7D5FFF;}
                  &.strong3{color: #FFBF00;}
                  &.strong4{color: #15CD64;}
                  &.strong5{color: #0F71FF;}
              }
              b{
                  color: #000000;
                  display: flex;
                  align-items: center;
                  font-size: 14px;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  font-weight: normal;
                  white-space: nowrap;
                  i{
                    width: 4px;
                    height: 4px;
                    background: #0F71FF;
                    display: flex;
                    margin-right: 4px;
                    &.i0{background:#0F71FF;}
                    &.i1{background:#15CD64;}
                    &.i2{background:#7D5FFF;}
                    &.i3{background:#FFBF00;}
                    &.i4{background:#15CD64;}
                    &.i5{background:#0F71FF;}
                    }
              }
          }
        &:nth-last-child(1){margin-right: 0;}  
        
      }
      
  }
}    
</style>