<!--
 * @Descripttion: 中间的图案
 * @Author: sujunling
 * @Date: 2025-05-19 09:10:25
-->
<template>
  <div class="center">

      <ul class="centerUl">
        <li>
          <span><i>{{informationValue}}</i><b>分</b></span>
          <p>信息</p>
        </li>
        <li>
          <span><i>{{resourceValue}}</i><b>分</b></span>
          <p>资源</p>
        </li>
        <li>
          <span><i>{{objectiveValue}}</i><b>分</b></span>
          <p>目标</p>
        </li>
        <li>
          <span><i>{{benefitValue}}</i><b>分</b></span>
          <p>利益</p>
        </li>
      </ul>
      <div class="centerDiv">
        <p class="lh">{{totolInfo}}</p>
        <div class="resultInfo">总体协调情况</div>
        <div class="upLoadFile">
          <el-upload
            class="upload-demo"
            :action="''"
            :auto-upload="false"
            :show-file-list="false"
            multiple
            :on-change="uploadFile"
            :file-list="fileList">
            <el-button size="small" class="bottonUpLoad" @click="clearFile" type="primary">{{isAnalyse?"分析中，请等待...":"分析评价"}}</el-button>
          </el-upload>
        </div>
      </div>
  </div>
</template>

<script>
import {getResultList}  from 'staticPub/config'

export default {
  name: 'Center',
  components: {},
  props: {
    informationValue:{
      type:String,
      default:'59'
    },
    objectiveValue:{
      type:String,
      default:'34'
    },
    resourceValue:{
      type:String,
      default:'78'
    },
    benefitValue:{
      type:String,
      default:'56'
    },
    totolInfo:{
      type:String,
      default:'良好'
    }
  },
  data() {
    return {
      isAnalyse:false,
      sendUrl:getResultList.analyseDataUrl,
      sendUrl2:getResultList.problemFileUrl,
      fileList:[],
      changeTimer:null,
    }
  },
  mounted() {},

  methods: {
    uploadFile(file,fileList){
      if (this.changeTimer) {
        clearTimeout(this.changeTimer);
        this.changeTimer=null;
      }
      this.fileList=fileList
      // 设置新的定时器
      this.changeTimer = setTimeout(() => {
        const data=new FormData();
        fileList.forEach(item=>{
          data.append('files',item.raw);
        })
        this.isAnalyse=true;
        // 这里执行最后一次触发后的逻辑
        Promise.all([this.sendFile(data),this.sendFile2(data)]).then(res=>{
          this.isAnalyse=false;
          this.$emit('changeData',res)
        }).catch(err=>{
          this.isAnalyse=false;
          this.$message.error(err)
        })
      }, 100); // 适当延迟时间
    },
    clearFile(){
      this.fileList = []
    },
    sendFile(fileData){
      return new Promise((resolve, reject) => {
        fetch(this.sendUrl, {
          method: 'POST',
          body: fileData
        })
        .then(response => response.json())
        .then(data => {
          if(data.code==1){
            resolve(data.result)
            // 
            }else{
              resolve(null)
              console.log('分析失败')
            }
          }
        )
        .catch(error => {
          resolve(null)
          console.log('分析失败')
        });
      })
    },
    sendFile2(fileData){
      return new Promise((resolve, reject) => {
        fetch(this.sendUrl2, {
          method: 'POST',
          body: fileData
        })
        .then(response => response.json())
        .then(data => {
          if(data.code==1){
            resolve(data.result)
            // this.$emit('changeData',data.result)
            }else{
              resolve(null)
              console.log('分析失败')
            }
          }
        )
        .catch(error => {
          resolve(null)
          console.log('分析失败')
        });
      })
    }
  }
}
</script>

<style scoped>
.centerDiv > p:last-child {
  font-weight: bold;
  margin-top: 10px;
  font-size: 30px;
  color: #ffffff;
  line-height: 40px;
  text-align: center;
  font-family: Alimama ShuHeiTi;
  text-shadow: 0px 0px 9px #042d45;
}
.centerDiv > p.lh {
  font-weight: bold;
  font-size: 48px;
  color: #ffffff;
  font-family: Alimama ShuHeiTi;
  text-align: center;
  line-height: 55px;
  color: #ffffff;
  line-height: 55px;
  background: linear-gradient(0deg, #ffeaa1 0.87890625%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.centerUl li:first-child {
  position: absolute;
  top: 0;
  left: 0;
}
.centerUl li:nth-child(2) {
  position: absolute;
  top: 0;
  right: 0;
}
.centerUl li:nth-child(3) {
  position: absolute;
  bottom: 0;
  left: 0;
}
.centerUl li:nth-child(4) {
  position: absolute;
  bottom: 0;
  right: 0;
}
.centerUl p {
  font-weight: 400;
  font-size: 20px;
  color: #ffffff;
  line-height: 33px;
  font-family: YouSheBiaoTiHei;
  background: linear-gradient(180deg, #ffffff 0%, #84c1ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 30px;
}
.centerUl li b {
  font-weight: 500;
  font-size: 36px;
  color: #ffffff;
  line-height: 40px;
  background: linear-gradient(180deg, #a2d7ff 0%, #ffffff 47.75390625%, #63fdff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.centerUl li i {
  font-weight: 500;
  margin-left: 10px;
  font-size: 48px;
  color: #ffffff;
  line-height: 40px;
  background: linear-gradient(180deg, #a2d7ff 0%, #ffffff 47.75390625%, #63fdff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.centerUl li {
  width: 147px;
  text-align: center;
  height: 96px;
  background: url('~@/assets/images/jczc/xtpj_bg3.png') no-repeat center center;
  background-size: 147px 87px;
}
.center {
  /* position: fixed;
  top: 130px;
  left: 28%;
  width: 45%;
  height: 48%; */
  position: absolute;
  bottom: 258px;
  left: 25.5985%;
  width: 48.8%;
  height: 60.28%;
  background: url('~@/assets/images/jczc/xtpj_bg2.png') no-repeat center center;
  background-size: 72.384% 100%;
  opacity: 0;
  animation: fadeIn 3s ease-in-out forwards; 
}
@keyframes fadeIn {
    from { opacity: 0; } 
    to { opacity: 1; }   
}
.centerDiv{
  position: relative;
  position: relative;
  top: 21.78%;
}
.resultInfo{
  position: relative;
  font-weight: bold;
  font-size: 30px;
  color: #FFFFFF;
  line-height: 40px;
  width: 100%;
  text-align: center;
  padding-top: 5px;
}
.upLoadFile{
  position: relative;
  margin-top: 10px;
  left: calc((100% - 167px) / 2);
  width: 167px;
  height: 34px;
  border-radius: 4px;
  opacity: 1;
  /* 自动布局 */
  display: flex;
  justify-content: center;
  background: linear-gradient(270deg, rgba(8, 118, 208, 0) 0%, rgba(32, 197, 243, 0.4) 24%, rgba(17, 193, 228, 0.8) 53%, rgba(32, 197, 243, 0.4) 81%, rgba(8, 118, 208, 0) 100%);
  align-items: center;

}
.bottonUpLoad{
    background: rgba(0, 0, 0, 0);
    border: none;
    font-size:16px;
    color: white;
  }
</style>