<!--
 * @Descripttion: 
 * @version: 
 * @Author: JC9527
 * @Date: 2024-03-25 15:37:35
 * @LastEditors: JC9527
 * @LastEditTime: 2024-03-29 09:47:05
-->
<template>
  <div>
    <div class="project-info-title">【项目详细信息】</div>
    <el-descriptions class="margin-top" :column="3" size="medium" border v-loading="loading">
      <el-descriptions-item labelClassName="tabOneLabel" contentClassName="tabOneContent" 
        v-for="(item,index) in info" 
        :key="index" 
        :label="item.key"
        :span="item.span"
      >
        {{ item.value }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script>
export default {
  name:"tabOne",
  props:{
    detailedInfo:{
      type:Object,
      default:()=>{
        return {};
      }
    }
  },
  watch: {
    detailedInfo: {
      handler(newInfo){
      this.loading = true;
        if(newInfo) {
          this.loading = false;
          let arr = []
          for (var key in newInfo) {
            if (newInfo.hasOwnProperty(key)) {
              
              let obj = {};
              obj["key"] = key;
              obj["value"] = newInfo[key] ? newInfo[key] : '暂无'
              obj["span"] = 1;
              arr.push(obj)
            }
          }
          arr = arr.filter(element => element.key !== "" && element.key !== "序号");
          for (var i = 0; i < arr.length; i++) {
            // if(!arr[i].key) {
            //   delete arr[i];
            //   continue;
            // }
            // 计算不同长度所占的列宽
            if(arr[i].value) {
              if((i + 1) % 3 == 1 && arr[i].value.length > 50 && arr[i - 1]?.span == 2) {
                arr[i - 1].span = 3
                arr[i].span = 3
              } else if((i + 1) % 3 == 1 && arr[i].value.length > 18 && arr[i].value.length < 50  && arr[i - 1]?.span == 2) {
                arr[i - 1].span = 3
                arr[i].span = 2
              } else if((i + 1) % 3 == 1 && arr[i].value.length > 18 && arr[i].value.length < 50) {
                arr[i].span = 2
              } else if((i + 1) % 3 == 2  && arr[i].value.length > 50) {
                arr[i - 1].span = 3
                arr[i].span = 3
              } else if((i + 1) % 3 == 2  && arr[i].value.length > 18 && arr[i].value.length < 50 && arr[i - 1]?.span == 2) {
                arr[i - 1].span = 3
                arr[i].span = 2
              } else if((i + 1) % 3 == 2  && arr[i].value.length > 18 && arr[i].value.length < 50) {
                arr[i].span = 2
              } else if((i + 1) % 3 == 0  && arr[i].value.length > 18 && arr[i].value.length < 50 && arr[i - 1]?.span == 1) {
                arr[i - 1].span = 2
                arr[i].span = 2
              } else if((i + 1) % 3 == 0  && arr[i].value.length > 50 && arr[i - 1].span == 1) {
                arr[i - 1].span = 2
                arr[i].span = 3
              } else if((i + 1) % 3 == 0  && arr[i].value.length > 18 && arr[i].value.length < 50 && arr[i - 1]?.span == 2) {
                arr[i].span = 2
              } else if((i + 1) % 3 == 0  && arr[i].value.length > 50) {
                arr[i].span = 3
              }
            }
          }
          
          this.$nextTick(()=>{
            this.info = [...arr]
          })
        }
        
      },
      immediate:true,
      deep:true
    },
    
  },
  data() {
    return {
      info:[],
      loading:false,
    }
  },
  mounted() {
    // console.log(this.info,"tabOne");
    // this.loading = true;
  },
  methods:{
  },
}
</script>
