<script>
import FirstHight from "./FirstHight.vue";
import BasicTotal from "@/components/BasicTotal.vue";
import { getInfo } from "@/api/index.js";
export default {
  name: "BasicInfo",
  props:{
    qy:String
  },
  components: {
    FirstHight,
    BasicTotal,
  },
  data(){
    return{
      list:[],
      BasicLsit:[],
          // 传参
          params:{
        pageSize:100,
        pageNum:1,
      },
      unitcNum:'',
      unitgNum:'',
      unitjNum:'',
      allNum:0
    }
  },
  watch:{
    qy(){
      this.BasicInfo()
    }
  },
  methods:{
    // 基础信息
    BasicInfo(){
      getInfo({...this.params,qy:this.qy==="重庆市"?"":this.qy}).then(res=>{
      
        if(res.data.code==200){
        this.BasicLsit=res.data.rows
        res.data.rows.map(item=>{
          this.unitcNum=item.cggjz
          this.unitgNum=item.ljzzgc
          this.unitjNum=item.ljgcszhht
          this.allNum=item.gyjz+item.zzjz+item.ggjz
        })
       }
      })
    }
  },
  created(){
    this.BasicInfo()
  }
  
};
</script>

<template>
  <div class="basic-info">
    <div class="__left">
      <FirstHight :BasicLsit="BasicLsit" :allNum="allNum" />
    </div>
    <div class="__right">
      <linear-text
        startColor="#00FFE0"
        endColor="#00D1FF"
        text="治理重点"
        fontSize="16px"
      />
      <div class="basic-total">
        <BasicTotal
          style="width: 187px"
          :number="Number(this.unitcNum)"
          label="超高层建筑"
          unit="栋"
        />
        <BasicTotal style="width: 187px"  :number="Number(this.unitgNum)" label="" unit="栋">
          <template #label>
            <span class="label">
              <span class="sub-label">2000年底前</span>
              老旧住宅建筑
            </span>
          </template>
        </BasicTotal>
        <BasicTotal
          style="width: 187px"
          :number="Number(this.unitjNum)"
          label="老旧商业混合体"
          unit="栋"
        >
          <template #label>
            <span class="label">
              <span class="sub-label">2000年底前</span>
              老旧商业混合体
            </span>
          </template>
        </BasicTotal>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.basic-info {
  padding: 4px;
  display: flex;
  .__left {
    display: flex;
    justify-content: space-around;
  }
  .__right {
    margin-top: 20px;
    margin-left: 5px;
    font-size: 14px;
    .basic-total {
      margin-top: 17px;
      display: flex;
      flex-direction: column;
      gap: 17px;
      .label {
        font-size: 12px;
        display: flex;
        line-height: 12px;
        flex-direction: column;
        justify-content: center;
        .sub-label {
          font-size: 10px;
        }
      }
    }
  }
}
</style>
