<template>
  <div class="XiangXiXinXi">
    <div class="xiangxinfo">
      <div v-for="i in xmxxList" :key="i.props" class="label_xnmx">
        <div class="title_class">
          <div class="top">{{ i.label }}</div>
          <div class="content">
            <span v-if="i.props == 'constructUnit' || i.props == 'designUnit'">
              {{ projectCompanyList.find(item => item.id === projectData[i.props])?.unitName || '' }}
            </span>
            <span v-else-if="i.props == 'projectTypeId'">
              {{ projectTypes.find(it => it.id === projectData.projectTypeId)?.projectTypeName || '' }}
            </span>
            <span v-else-if="i.props == 'buildCategory'">
               {{ findText('build_category', projectData.buildCategory) }}
               </span>
            <span v-else :title="projectData[i.props]">
              {{ projectData[i.props] }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="projectMb xiangxinfo">
      <span class="title">项目设计指标</span>
    </div>
    <div class="xiangxinfo xmzb">
      <div v-for="i in xmmbList" :key="i.id" class="label_xnmx">
        <div class="title_class">
          <div class="top">{{ i.propertyName }}</div>
          <div class="content">
            <span :title="i.propertyValue">
              {{ i.propertyValue}}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="projectMb">
      <span class="title">项目总体工程量</span>
    </div>
    <div class="xiangxinfo xmzb">
      <div v-for="i in xmxtgcl" :key="i.id" class="label_xnmx">
        <div class="title_class">
          <div class="top">{{ i.propertyName }}</div>
          <div class="content">
            <span :title="i.propertyValue">
              {{ i.propertyValue}}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="XiangXiXinXi">
import { inject } from 'vue';
import { getProjectCompanyList, projectTypeList } from '@/api/sponeScreen/gcpjApi';

import { useDicts } from '@/hooks';
import bus from '@/bus';
const { proxy } = getCurrentInstance();
const { project_content_type,build_category} = useDicts(proxy);
const projectCompanyList = ref([]);
const projectTypes = ref([]);
const xmxxList = ref([
  { label: '项目名称', props: 'projectName' },
  { label: '立项时间', props: 'startTime' },
  { label: '建设类别', props: 'buildCategory' },
  { label: '工程类型', props: 'projectTypeId' },
  { label: '施工单位', props: 'constructUnit' },
  // { label: '代建单位', props: 'designUnit' },
  { label: '设计单位', props: 'designUnit' },
  // { label: '建设面积(㎡)', props: 'projectArea' },
]);
const xmxtgcl = ref([
]);
const xmmbList = ref([
]);
const dicts = {
  build_category,
  project_content_type,
};
const findText = (prop, type) => {
  const item = dicts[prop].value.find(it => it.value === type);
  return item?.label || '';
};
const projectData = ref({});
const getProjectCompanyLists = async () => {
  const res = await getProjectCompanyList();
  if (res?.code !== 200) return;
  projectCompanyList.value = res?.data || [];
};
const getProjectTypeList = async () => {
  const res = await projectTypeList({ status: '0' });
  if (res?.code !== 200) return;
  projectTypes.value = res?.data || [];
};


onMounted(() => {
  bus.on('getProjectDate', (v) => { 
    console.log(project_content_type,'project_content_typeproject_content_type');
    projectData.value = v
    xmmbList.value  = v.projectItemDescriptionList.filter(it => it.projectContentType ==="design_parameter")
    xmxtgcl.value = v.projectItemDescriptionList.filter(it => it.projectContentType === "total_engineering_quantity")
    getProjectCompanyLists();
   getProjectTypeList();
  })
})
</script>

<style lang="scss" scoped>
.XiangXiXinXi {
  display: flex;
  flex-direction: column;
  overflow: auto;
  overflow-x: hidden;
  height: 100%;
  color: #fff;

  .xiangxinfo {
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    // justify-content: center;
    .label_xnmx {
      width: 30.7%;
      height: 60px;
      margin: 10px;
      border: 1px solid #34EAFF;

      .title_class {
        display: flex;
        flex-direction: column;
        align-items: center;

        .top,
        .title_class {
          height: 30px;
          width: 100%;
          background: #09B0D4;
          line-height: 30px;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .content {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          width: 100%;
          margin: 3px;
          text-align: center;
        }
      }
    }
  }

  .projectMb {
    margin: 20px 0;
    width: 820px;
    height: 36px;
    line-height: 36px;
    text-indent: 24px;
    background: linear-gradient(90deg, #09B0D4 0%, rgba(85, 209, 248, 0) 100%);
  }


}

.title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.xmzb {
  .label_xnmx {
    flex: 1 !important;
  }
}
</style>