<template>
  <div
    v-loading="loading"
    element-loading-text="数据加载中..."
    element-loading-background="rgba(122, 122, 122, 0.8)"
    class="app-container flex"
    id="container"
  >
    <div class="top flex flex_center">
      <div
        v-for="(i, index) in topList"
        class="flex astic"
        :key="i.bg"
        :class="{ flexClass: index == 0, astic_border: clickList == i }"
        @click="TopClick(i)"
        :style="{ background: `url(${i.bg})` }"
      >
        <div v-if="index > 0" style="margin-right: 50px"></div>
        <div class="time flex">
          <div class="year" :class="{ year_one: index == 0 }">
            {{ i.name }}
          </div>
          <div v-if="index > 0" class="khtime">考核时间： {{ i.datetime }}</div>
        </div>
        <div v-if="index > 0" class="defen flex">
          <div class="total">{{ i.score }}分</div>
          <div class="fenshu khtime">总得分</div>
        </div>
      </div>
    </div>
    <div class="center flex">
      <div v-for="(i, index) in centerList"  :key="i.itemTypeContent" class="flex astic" :class="{ flexClass: index == 0 }">
        <div class="cont top flex">
          <div>
            <span class="span"></span>
            <span class="name">
              {{ i.itemTypeContent }}
            </span>
          </div>
          <div class="fz">
            分值
            <span class="total">{{ i.totalScore }}</span>
          </div>
        </div>
        <div class="cont dfFlx">
          <div class="fz">得分 <span style="color:#4285F4">{{ i.realScore }}</span></div>
          <el-progress class="progress" text-inside striped  color="#4285F4" :format="format" :percentage="(i.realScore/i.totalScore *100).toFixed(2)||0" :stroke-width="15"  />
        </div>
        <div class="cont dfFlx">
          <div class="fz">考核进展 </div>
          <el-progress  class="progress" text-inside color="#45E28D" :percentage="i.progress" :stroke-width="15" striped />
        </div>
      </div>
    </div>
    <div class="three flex">
      <div class="left flex flexClass" style="overflow-y: auto ">
        <!-- 内涝防治 -->
        <div class="nnfzbz" v-for="(i, index) in threeLeftDate"  >
          <div style="margin: 10px 0">
            <span class="span" v-show="i.allname">  </span>
            <span class="tittle">{{ i.allname }} </span>
          </div>
          <div class="tittle">
            <span class="racal" v-if="i.tittle"></span>
            {{ i.tittle }}
          <span v-if="i.tittle" style="color: #30dc7f;"> {{ nlfzdf?.realScore }}<span>/ {{nlfzdf?.totalScore }}</span></span> 
        </div>
          <div class="dbqk">
            <el-tag round :type="i.realScore - i.itemScore >= 0 ? 'success' : 'error'">{{
              i.realScore - i.itemScore >= 0 ? '达标' : '未达标'
            }}</el-tag>
            <div class="dffz">得分/分值</div>
            <div class="dffzqk">{{ i.realScore||0 }}/{{ i.itemScore }}</div>
          </div>
          <div :class="{ dashbord: i.isBorder ? true : '' }"></div>
          <rightTop
            :style="{ margin: i.tittle ? '-13px 0' : 0 }"
            v-if="isChart1"
            :yData="i.yData"
            :yData2="i.yData2"
            :xData="i.xData"
            :realValue="i.realValue"
            :itemUnit="i.itemUnit"
            :bottom="i.bottom"
            :data="rightTopRef"
            :itemTarget="i.itemTarget"
            :all="i.all"
          >
          </rightTop>
          
        </div>
        <!-- 雨水收集与利用 -->
        <div  class="nnfzbz" v-for="(i, index) in threeLeftDate1">
          <div style="margin: 10px 0">
            <span class="span" v-show="i.allname"></span>
            <span class="tittle">{{ i.allname }}</span>
          </div>
          <div class="tittle">
            <span class="racal" v-if="i.tittle"></span>
            {{ i.tittle }}
          </div>
          <div class="dbqk">
            <el-tag round :type=" i.realScore- i.itemScore >= 0 ? 'success' : 'error'">{{
              i.realScore- i.itemScore >= 0? '达标' : '未达标'
            }}</el-tag>
            <div class="dffz">得分/分值</div>
            <div class="dffzqk">{{ i.realScore||0 }}/{{ i.itemScore }}</div>
          </div>
          <div :class="{ dashbord: i.isBorder ? true : '' }"></div>
          <rightTop
            :style="{ margin: i.tittle ? '-4px -4px 0  4px' : 0 }"
            v-if="isChart1"
            :yData="i.yData"
            :yData2="i.yData2"
            :xData="i.xData"
            :realValue="i.realValue"
            :itemUnit="i.itemUnit"
            :bottom="i.bottom"
            :data="rightTopRef"
            :itemTarget="i.itemTarget"
            :all="i.all"
          >
          </rightTop>
          
        </div>
        <!-- 其他相关指标 -->
        <div  class="nnfzbz otherzb" v-for="(i, index) in threeLeftDate2"  >
          <div style="margin: 10px 0">
            <span class="span" v-show="i.allname"></span>
            <span class="tittle">{{ i.allname }}</span>
          </div>
          <div class="tittle" style="display: block">
            <span class="racal" v-if="i.tittle"></span>
            {{ i.tittle }}
           <span style="margin:0 8px"> 分值/得分</span><span v-if="i.tittle" style="color: #30dc7f;"> {{ otherXgzb?.realScore }}<span>/{{otherXgzb?.totalScore }}</span></span> 
          </div>
          <div class="dbqk" v-for="(k, index) in i.itemScore" style="width: 32%; display: inline-block; text-align: center">
            <el-tag round :type="i.realScore[index]-i.itemScore[index] >= 0 ? 'success' : 'error'">{{
           i.realScore[index]-i.itemScore[index] >= 0? '达标' : '未达标'
            }}</el-tag>
            <div class="dffz">得分/分值</div>
            <div class="dffzqk">{{ i.realScore[index] }}/{{ i.itemScore[index] }}</div>
          </div>
          <div :class="{ dashbord: i.isBorder ? true : '' }"></div>
          <centerRight
            :style="{ margin: i.tittle ? '1px 0' : 0 }"
            v-if="isChart1"
            :yData="i.yData"
            :yData2="i.yData2"
            :xData="i.xData"
            :bottom="i.bottom"
            :data="rightTopRef"
            :realValue="i.realValue"
            :itemUnit="i.itemUnit"
            :itemTarget="i.itemTarget"
            :all="i.all"
          >
          </centerRight>
        </div>
        <!-- 建设工程管理 -->
        <div v-for="(i, index) in fourList"  class="jsgcgl nnfzbz" style="display: flex;">
          <div style="margin: 18px 0" >
          </div>
          <div class="tittle flex tittle_foot" v-if='index==0' style="align-self: self-start;">
            <div class="racal" v-if="i.tittle"></div>
            {{ i.tittle }}
          </div>
          <div class="bzqk"  v-if='index==0'>
              <el-tag v-if="i.value != 'other'" round :type=" i.standardFlag === ''  ? 'warning' :i.standardFlag === '1' ?'success': 'error'">{{
                i.standardFlag === '' ? '未填报' :  i.standardFlag === '1' ? '达标': '未达标'
              }}</el-tag>
            </div>
          <div class="tittle flex tittle_fs" v-if="i.value == 'jsgcgl' &&index==0">
            <span class="df"
              >得分/分值 <div style="color: #30dc7f;text-align: center;margin: 10px 0;"> {{ i.realScore }} / {{ i.itemScore }} </div></span
            >
          </div>
          <div  style="left:-6px" :class="{ dashbord: index==0 ? true : '' }"></div>
          <footLeft  v-if="isChart1 && index == 0" :xData="i.xData" :yData="i.yData" :data="LeftFoot"></footLeft>
        </div>
      </div>
    </div>
    <div class="foot flex">
        <!-- 资金绩效 -->
      <div class="right" >
        <div style="margin: 10px 0">
          <span class="span"></span>
          <span class="tittle">资金绩效</span>
        </div>
        <div>
          <el-table :data="tableData" border style="width: 410px; height: 100%; overflow-y: scroll">
            <el-table-column
              show-overflow-tooltip
              v-for="(col, i) in columnList"
              :key="i"
              :prop="col.prop"
              :label="col.label"
              align="center"
            >
              <template #default="{ row }" v-if="col.prop == 'standardFlag'">
                <el-tag v-if="row.standardFlag===''" type="warning">未填报</el-tag>
                <el-tag v-else :type="row.standardFlag === '1' ? 'success' : 'error'">{{
                  row.standardFlag === 1 ? '达标' : '未达标'
                }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="left flex flexClass">
        <div v-for="(i, index) in fourList" style="position: relative">
          <div style="margin: 10px 0">
          </div>
          <div class="tittle flex tittle_foot" v-if="index==1 ||index==2">
           <div >
            <span class="span" v-show="i.name">  </span>
            <span class="tittle">{{ i.name }} </span>
          </div>
          <div class="tittle" style="font-size: 14px;">
            <span class="racal" v-if="i.tittle"></span>
            {{ i.tittle }}
          </div>
           <span class="bzqk"   >
            <el-tag v-if="i.value != 'other'" round :type="footCenterRef?.xData[0]?.standardFlag  == '1' &&footCenterRef?.xData[1]?.standardFlag  == '1' ? 'success' : 'error'">{{
                footCenterRef?.xData[0]?.standardFlag  == '1' &&footCenterRef?.xData[1]?.standardFlag  == '1' ? '达标' : '未达标'
              }}</el-tag> 
            </span>
          </div>
          <div class="tittle flex tittle_fs"  style="display: inline-block;" :key="k" v-for="k,v in footCenterRef.xData" >
            <div class="df"  v-if="index == 1 && v==1"    style="margin:0 1%"
              >得分/分值 <span> {{ realScoreAll }} / {{liFaStaticsListAll  }} </span></div
            >
          </div>
          <!-- 立法及长效机制 -->
          <footCenter :data="footCenterRef" v-if=" index == 1 &&isChart1 "></footCenter>
          <div :class="{ dashbord:index ==2 ? true : '' }"></div>
          <!-- 其他相其他相管理绩效 -->
          <div v-if="index==2" class="footTable">
            <el-table :data="tableData1" border style="width: 380px; height: 89%; overflow-y: scroll">
              <el-table-column
                show-overflow-tooltip
                v-for="(col, i) in columnList1"
                :key="i"
                :prop="col.prop"
                :label="col.label"
                align="center"
              >
                <template #default="{ row }" v-if="col.prop == 'standardFlag'">
                  <el-tag v-if="row.standardFlag===''" type="warning">未填报</el-tag>
                  <el-tag v-else :type="row.standardFlag === '1' ? 'success' : 'error'">{{
                    row.standardFlag == 1 ? '达标' : '未达标'
                  }}</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <!-- 群众满意度曲线 -->
      <div class="right">
        <div style="margin: 10px 0">
          <span class="span"></span>
          <span class="tittle">群众满意度曲线</span>
        </div>
        <div class="flex" style="align-items: center; justify-content: space-between">
          <span class="dw">单位%</span>
          <div>
            <span class="tittle df"
              >得分/分值<span style="color: #30dc7f; margin: 0 11px"> {{ qzmyd.realScore }}/{{ qzmyd.itemScore }}</span></span
            >
            <el-tag :type="qzmyd.realValue=='有所提升' ?'success' :'warning'" round style="float:right">{{ qzmyd.realValue }}</el-tag>
          </div>
        </div>
        <footRight v-if="isChart1" :data="footRightTopRef"></footRight>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, computed } from 'vue';
import footLeft from './home/rightComp/footLeft';
import rightTop from './home/rightComp/top';
import footCenter from './home/rightComp/footCenter';
import footRight from './home/rightComp/footRight';
import centerRight from './home/rightComp/centerRight';
import { LeftFoot, footRightTopRef, rightTopRef, footCenterRef, columnList, columnList1, fourList } from './home/leftComp/index';
import { three_year_statics, performanceEvaluateItem } from '@/api/home';
const isChart1 = ref(false);
const clickList = ref({});
const tableData = ref([]);
const loading = ref(true);
const tableData1 = ref();
const qzmyd = ref({});
const topList = ref([{ name: '年度绩效考核得分', score: 0, bg: 'image4.png' }]);
const centerList = ref([]);
const threeLeftDate = ref([]);
const threeLeftDate1 = ref([]);
const nlfzdf=ref({})
const yssjlyl=ref({})
const otherXgzb=ref({})
const threeLeftDate2 = ref([{ itemScore: [], realScore: [], xData: [], yData: [], yData2: [], all: '' ,itemUnit:[],itemTarget:[],realValue:[] }]);
function TopClick(v) {
  if (v.year) {
    clickList.value = v;
    isChart1.value = false;
    performanceEvaluateItemM(v.year);
  }
}
function format(percentage) {
  return  `${percentage} %`
}
//获取三年数据
async function three_year_staticsM(p) {
  let { data } = await three_year_statics(p);
  if (data.length > 0) {
    data.map((i, index) => {
      topList.value.push({
        year: i.year,
        name: i.year + '年度绩效考核得分',
        bg: (index + 1) + 'bg.png',
        score: i.score || 0,
        datetime: i.datetime,
      });
    });
    clickList.value = topList.value[2];
    performanceEvaluateItemM(data[1].year);
  }
}
const liFaStaticsListAll=ref(0)
const realScoreAll=ref(0)
//年度统计报表数据
async function performanceEvaluateItemM(p) {
  loading.value = true;
  let {
    data: {
      typeStaticsList,
      chanChuStaticsList,
      ziJinStaticsList,
      otherStaticsList,
      liFaStaticsList,
      qunZongStaticsList,
      projectStatics,
    },
  } = await performanceEvaluateItem(p);
  centerList.value = typeStaticsList;
  tableData.value = ziJinStaticsList;
  console.log("tableDatatableDatatableData", tableData)
  tableData1.value = otherStaticsList;
  qzmyd.value = qunZongStaticsList;
  footRightTopRef.value.yData = [qunZongStaticsList.lastYearSatisfyPercent, qunZongStaticsList.satisfyPercent];
  footCenterRef.value.xData = liFaStaticsList;
  liFaStaticsListAll.value=liFaStaticsList.reduce((p,v)=>{ 
    return p+=v.itemScore
  },0)
  realScoreAll.value=liFaStaticsList.reduce((p,v)=>{ 
    return  p+=Number(v.realScore)
  },0)
  threeLeftDate2.value = [{ itemScore: [], realScore: [], xData: [], yData: [], yData2: [], all: '',itemUnit:[],itemTarget:[],realValue:[] }];
  //建设工程管理
  fourList.value.map((i, index) => {
    if (i.value == 'jsgcgl') {
      i.itemScore = projectStatics?.itemScore || 0;
      i.realScore = projectStatics.realScore || 0;
      i.standardFlag = projectStatics.standardFlag;
      i.xData=[]
      i.yData=[]
      projectStatics.projectTypeStatisticsList.forEach(k => {
        i.xData.push(k.typeName);
        i.yData.push(k.typeCount);
      });
    }
  });
  let arrr1 = [];
  chanChuStaticsList.forEach(i => {
    switch (i.itemTypeContent) {
      case '其他相关指标':
        arrr1 = i.chanChuItemList;
        otherXgzb.value=i
        break;
      case '雨水收集与利用相关指标':
        threeLeftDate1.value = i.chanChuItemList;
        yssjlyl.value=i
        break;
      case '内涝防治相关指标':
        threeLeftDate.value = i.chanChuItemList;
        nlfzdf.value=i
        break;
    }
  });
  // 内涝防治相关指标
  threeLeftDate.value.map((i, k) => {
    i.xData = [i.itemContent];
    i.yData = [i.realValue||0] ;
    i.yData2 = [i.itemTarget||0];
    i.realValue = [i.realValue];
    i.itemTarget = [i.itemTarget];
    i.itemUnit = [i.itemUnit];
    i.all = nlfzdf.value.totalScore;
    if (k == 0) {
      i.allname = '产出绩效';
      i.tittle = '内涝防治';
    }
  });
  // 雨水收集与利用
  threeLeftDate1.value.map((i, k) => {
    i.xData = [i.itemContent];
    i.yData = [i.realValue||0] ;
    i.yData2 = [i.itemTarget||0];
    i.realValue = [i.realValue];
    i.itemTarget = [i.itemTarget];
    i.itemUnit = [i.itemUnit];
    i.all = yssjlyl.value.totalScore;
    if (k == 0) {
      i.tittle = '雨水收集与利用';
      i.isBorder = 1;
    }
  });
  //其他相关指标
  threeLeftDate2.value.map((i, k) => {
    arrr1.forEach((m, n) => {
      i.xData.push(m.itemContent);
      i.yData.push(m.realValue||0);
      i.yData2.push(m.itemTarget);
      i.itemUnit.push(m.itemUnit||'');
      i.itemTarget.push(m.itemTarget||0);
      i.realValue .push(m.realValue||0);
      i.all =  otherXgzb.value.totalScore || 0;
      i.itemScore.push(m.itemScore);
      i.realScore.push(m.realScore);
    });
    if (k == 0) {
      i.tittle = '其他相关指标';
      i.isBorder = 1;
    }
  });
  console.log("threeLeftDate2", threeLeftDate2)
  isChart1.value = true;
  loading.value = false;
}
onMounted(() => {
  three_year_staticsM();
});
</script>
<style scoped lang="scss">
@import './home/index.scss';
</style>