<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/sponeScreen/gcpjApi';
import Component23 from '@/assets/images/gcpjimg/Component23.png';
import xmlcbEcharts from './xmlcbEcharts';
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;
  color: #fff;
}
.label_xnmx  {
  color: #fff;
}
</style>