<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%;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 15px;
  color: #8be5ff;

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

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

        .top,
        .title_class {
          height: 30px;
          width: 100%;
          background: rgba(23, 180, 231, 0.5);
          // opacity: 0.8;

          line-height: 30px;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
        }

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

  .projectMb {
    margin: 20px 10px;
    width: 845px;
    height: 36px;
    line-height: 36px;
    text-indent: 24px;
    // background: #17b4e7;
    // opacity: 0.8;
    background: rgba(23, 180, 231, 0.5);
  }
}

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

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