<template>
  <div class="project-info-box">
    <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>
    <!-- <el-descriptions class="margin-top-file" :column="3" size="medium" v-loading="loading">
      <el-descriptions-item labelClassName="tabOneFileLabel" contentClassName="tabOneFileContent" 
        v-for="(item,index) in fileInfo" 
        :key="index" 
        :label="item.key"
      >
        <a :href="item.url" target="_blank">
          {{ item.value }}
        </a>
      </el-descriptions-item>
    </el-descriptions> -->
    <div class="project-info-title" style="margin-top: 20px;">【上传材料】</div>
    <el-row v-for="(item,index) in fileInfo" :key="index" style="margin-top: 20px;">
      <el-col :span="3">
        <span>{{ item.key }}</span>
      </el-col>
      <el-col :span="21">
        <span class="file-link" style="border: 1px solid #dcdfe6;padding: 5px;display: flex; align-items: center; width: 50%;">
          <img src="@/assets/images/uploadBgc.jpg" class="li_img" alt="" style="width: 20px; margin-right: 10px;">
          <a :href="item.url" target="_blank">{{ item.value }}</a>
        </span>
      </el-col>
    </el-row>
    </el-row>
  </div>
</template>
<script>
export default {
  name:"tabOne",
  props:{
    detailedInfo:{
      type:Object,
      default:()=>{
        return {};
      }
    },
    fileJson:{
      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;
              if(key == "是否获得园区其他经营奖励") {
                obj["value"] = newInfo[key] == 0 ? '是' : newInfo[key] == 1 ? '否':'';
              } else if(key == "申报类型") {
                obj["value"] = newInfo[key] == 1 ? '两业融合示范企业' : newInfo[key] == 2 ? '制造业企业设立财务独立核算的制造服务业职能部门' : newInfo[key] == 3 ? "制造业企业剥离服务业务成立独立的法人制造业企业剥离服务业务成立独立的法人" : "";
              } else if(key == "所属类型"){
                obj["value"] = newInfo[key] == 0 ? '市场服务类' : newInfo[key] == 1 ? '公共服务类' : "";
              } else {
                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
    },
    fileJson: {
      handler(newFile){
        if(newFile) {
          let arr = []
          for (var key in newFile) {
            if (newFile.hasOwnProperty(key)) {
              let url = newFile[key] ? newFile[key].split("/") : null;
              let obj = {};
              obj["key"] = key;
              obj["url"] = newFile[key] ? newFile[key] : '';
              obj["value"] = url ? url[url.length - 1] : '';
              arr.push(obj)
            }
          }
          this.fileInfo = arr;
        }
      },
      deep:true,
      immediate:true
    }
  },
  data() {
    return {
      info:[],
      fileInfo:[],
      loading:false,
    }
  },
  mounted() {
    // console.log(this.info,"tabOne");
    // this.loading = true;
  },
  methods:{
  },
}
</script>
