<template>
  <div
    v-loading="loading"
    element-loading-text="数据加载中..."
    element-loading-background="rgba(122, 122, 122, 0.8)"
    class="app-container flex"
    id="jiXIaoKaoHe"
  >
    <div class="top flex flex_center">
      <div
        v-for="(i, index) in topList"
        :key="i.bg"
        class="flex astic"
        :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" :style="{ background: `url(${i.bg})` }">
          <div>
            <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="ccjx">产出绩效</div>
    <div class="three flex">
      <!-- <img src="../../../assets/images/Sponge_screen/jxkh/标题-1.png" alt=""> -->
      <div class="left flex flexClass" style="overflow-y: auto">
        <!-- 内涝防治 -->
        <div class="nnfzbz" v-for="(i, index) in threeLeftDate" :key="i.realScore">
          <!-- <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 ? '-7px 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" :key="i.realScore">
          <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 ? '-40px -4px 0px  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" :key="i.realScore">
          <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"  :key="k.realScore" 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 ? '-33px 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" :key="i.realScore">
          <div style="margin: 20px 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: 480px; height: 188px; 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" :key="i.realScore">
          <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"
            v-for="(k, v) in footCenterRef.xData"
            :key="k.realScore"
          >
            <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: 460px; height: 150px; 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 28px"> {{ qzmyd.realScore }}/{{ qzmyd.itemScore }}</span></span
            >
            <el-tag :type="qzmyd.realValue == '有所提升' ? 'success' : 'warning'" round style="float: left">{{
              qzmyd.realValue
            }}</el-tag>
          </div>
        </div>
        <footRight v-if="isChart1" :data="footRightTopRef"></footRight>
      </div>
    </div>
  </div>
</template>
<script setup name='jiXIaoKaoHe'>
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: [] },
]);
const liFaStaticsListAll = ref(0);
const realScoreAll = ref(0);
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[3];
    performanceEvaluateItemM(data[2].year);
  }
}

//年度统计报表数据
async function performanceEvaluateItemM(p) {
  loading.value = true;
  let {
    data: {
      typeStaticsList,
      chanChuStaticsList,
      ziJinStaticsList,
      otherStaticsList,
      liFaStaticsList,
      qunZongStaticsList,
      projectStatics,
    },
  } = await performanceEvaluateItem(p);
  centerList.value = typeStaticsList;
  centerList.value.map((i, index) => {
    i.bg = 'bt.png';
  });
  tableData.value = ziJinStaticsList;
  tableData1.value = otherStaticsList;
  qzmyd.value = qunZongStaticsList;
  footRightTopRef.value.yData = [qunZongStaticsList.lastYearSatisfyPercent, qunZongStaticsList.satisfyPercent];
  // footRightTopRef.value.yData = ["50.0", '90.0'];
  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.itemScore));
  }, 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>