<template>
  <div id="xxinformation">
    <div class="table-title">
      <div
        class="titleitem"
        v-for="item in ProjectList"
        :key="item"
        :class="activeditem == item.name ? 'actived' : ''"
        @click="activedclick(item)"
      >
        {{ item.name }}
      </div>
    </div>

    <div class="table-content">
      <el-form ref="ruleForm" :model="ListData">
        <div class="elsebox" v-show="activeditem == '基础信息'">
          <div class="pl20">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="项目类别:" prop="projectTypeName" class="mb5">
                  <span>{{ ListData.projectionType }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目名称:" prop="projectName" class="mb5">
                  <span>{{ ListData.name }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="建设类别:" prop="buildCategory" class="mb5">
                  <span>改造</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属排水分区:" prop="drainagePartition" class="mb5">
                  <span>--</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="项目起止日期:" prop="time" class="mb5">
                  <span>--</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="规划条件:" prop="planCondition" class="mb5">
                  <span>--</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="项目库类型:" prop="projectLibraryType" class="mb5">
                  <span>--</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="任务类型:" prop="taskType" class="mb5">
                  <span>--</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="项目概况:" prop="projectOverview" class="mb5">
                <span>--</span>
              </el-form-item>
            </el-row>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup name="xxinformation">
import { ref, reactive, toRefs, onMounted } from 'vue';
import bus from '@/bus';
const { proxy } = getCurrentInstance();
const ListData = ref({});
const ProjectList = ref([
  { name: '基础信息', value: 1 },
  { name: '项目内容', value: 2 },
  { name: '项目投资', value: 3 },
  { name: '责任部门', value: 4 },
  { name: '建设进度', value: 5 },
  { name: '项目立项', value: 6 },
  { name: '施工图纸', value: 7 },
  { name: '施工许可', value: 8 },
  { name: '竣工验收', value: 9 },
]);
const activeditem = ref('基础信息');

function activedclick(item) {
  console.log(item);
  activeditem.value = item.name;
}

onMounted(() => {
  bus.on('xxinformationList', val => {
    console.log(val, 'valvalval');
    ListData.value = val.popupInfo;
  });
});
onBeforeUnmount(() => {
  bus.off('xxinformationList');
});
</script>

<style lang="scss" scoped>
#xxinformation {
  width: 100%;
  height: 100%;
  // background: yellowgreen;

  .table-title {
    display: flex;
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #009ee7;

    // background: red;
    .titleitem {
      cursor: pointer;
      padding: 0 25px;
      color: #fff;
      font-family: Source Han Sans;
      font-size: 14px;
      font-weight: 500;
      text-align: center;
      letter-spacing: 0em;
      font-weight: bold;

      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
    }
    .actived {
      background: url('@/assets/images/zhps/dia-tabs.png') no-repeat;
      background-size: 100% 100%;

      color: rgba(255, 237, 82, 1);
    }
  }
  .table-content {
    height: calc(100% - 44px);
    overflow: hidden;
    overflow-y: auto;
  }
}
::v-deep(.el-form-item__label) {
  color: #fff;
}

::v-deep(.el-form-item__content) {
  color: #fff;
}
</style>