<template>
  <div class="XiangXiXinXi">
    <div class="xiangxinfo">
        <div v-for="i in xmxxList" :key="i.props" class="label_xnmx">
          <div class="label_xnmx_foot" >
            {{i.label}}
            <span class="props_top" v-if="i.props=='constructUnit' ||i.props=='designUnit'" >
              {{ projectCompanyList.find(item => item.id === projectData[i.props])?.unitName || '' }}
            </span>
            <span class="props_top" v-else-if="i.props=='projectTypeId'" >
              {{ projectTypes.find(it => it.id === projectData.projectTypeId)?.projectTypeName || '' }}
            </span>
            <span class="props_top" v-else :title="projectData[i.props]">
               {{projectData[i.props]}}
          </span>
          </div>
        </div>
    </div>
    <div class="projectMb">
         <img :src="Component23" alt="">
        <span class="title">项目目标</span>
      </div>
    <div class="xmmb">
        <div v-for="i in xmmbList" :key="i.props" class="label_xnmx">
          <div class="label_xnmx_foot">
            {{i.label}}
            <span class="props_top">
              {{projectData[i.props]}}
          </span>
          </div>
        </div>
    </div>
    <div class="projectMb">
         <img :src="Component23" alt="">
        <span class="title">项目概况</span>
      </div>
    <div class="xmgk">
     <div class="label_xnmx_foot">
      {{projectData.projectOverview}}
     </div>
    </div>
    <div class="projectMb">
         <img :src="Component23" alt="">
        <span class="title">项目里程碑</span>
      </div>
    <div class="xmlxb">
     <xmlcbEcharts :echart-data="apis" v-if="echartsList" ></xmlcbEcharts>
    </div>
  </div>
</template>

<script setup name="XiangXiXinXi">
import { inject } from 'vue'
import {getSelectHomeProjectInfoByProjectNo, getProjectCompanyList, projectTypeList} from  '@/api/gcpjApi'
import Component23 from '@/assets/images/gcpjimg/Component23.png'
import xmlcbEcharts from './xmlcbEcharts'
// const getProjectInfo = inject('getProjectInfo')
// const projectInfo = getProjectInfo()
const getProjectInfo = sessionStorage.getItem('getProjectInfo')
const projectCompanyList = ref([])
const projectTypes = ref([])
const echartsList=ref(false)
const xmxxList=ref([
  {label:'项目名称',props:'projectName'},
  {label:'立项时间',props:'startTime'},
  {label:'竣工时间',props:'endTime'},
  {label:'施工单位',props:'constructUnit'},
  {label:'代建单位',props:'designUnit'},
  {label:'设计单位',props:'designUnit'},
  {label:'工程类型',props:'projectTypeId'},
  {label:'建设面积(㎡)',props:'projectArea'},
  {label:'项目投资(万元)',props:'totalInvest'},
])
const xmmbList=ref([
  {label:'径流总量控制目标(%)',props:'annualRunoffTotalControlRate'},
  {label:'硬质路面改造率(%)',props:'hardGroundRate'},
  {label:'设计降雨量(mm)',props:'designRainfall'},
])
const apis = ref([])
const projectData=ref({})
async function projectInfoNewDetailD(P) {
  if(!P) return
  let {data}=await getSelectHomeProjectInfoByProjectNo(P)
  projectData.value=data
  apis.value = data.homeMilestoneList.map((item) => ({
    uri: item.milestoneName,
    status: item.status
  }))
  
  echartsList.value=true
}
const getProjectCompanyLists =async () => {
  const res = await getProjectCompanyList()
  if(res?.code !== 200) return
  projectCompanyList.value = res?.data || []
  console.log(projectCompanyList,'projectCompanyList');
}
const getProjectTypeList = async () => {
  const res = await projectTypeList({ status: '0' })
  if(res?.code !== 200) return
  projectTypes.value = res?.data || []
}
getProjectCompanyLists()
getProjectTypeList()
projectInfoNewDetailD(getProjectInfo)
</script>

<style lang="scss" scoped>
.XiangXiXinXi{
  display: flex;
  flex-direction: column;
  .xiangxinfo,.xmmb,.xmgk
  {
    width: 100%;
    height: 143px;
    border: 1px  solid #114F89;
    display: flex;
    flex-wrap: wrap;
    .label_xnmx{
      flex: 0 0 33.3333%;
      border: 1px  solid #114F89;
      .label_xnmx_foot{
          width: 146px;
           height: 100%;
           background: #032350;
           text-align: center;
           line-height:40px ;
           position: relative;
      }
      .props_top{
         text-align: center;
         display: inline-block;
         position: absolute;
         width: 341px;
         height: 100%;
         left: 104%;
         overflow: hidden;
         overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  .projectMb{
    margin: 20px 0;
  }
  .xmmb{
    height: 50px;
    .label_xnmx_foot{
      height: 30px;
    }
  }
  .xmgk{
    height: 60px;
    .label_xnmx_foot{
      color: #3CBDFF;
    }
  }
}
.title{
  font-size: 16px;
  font-weight: 700;
}
.xmlxb {
  // min-height: 240px;
}

</style>