<template>
  <div class="app-container home" v-loading="isLoading">
    <div class="top">
      <div class="topLeft">
        <div class="tittle flex">
          <img src="@/assets/images/preassess/projectCont.png" alt="" />
          <div class="conttittle">奖励项目统计</div>
        </div>
        <div class="flex cont">
          <div v-for="i in projectList">
            <div class="box">{{ DaprojectList[i.value] }}<span>个</span></div>
            <div class="label" :style="{ color: i.label == '延期' ? '#FF4F4FFF' : '' }">
              {{ i.label }}
            </div>
          </div>
        </div>
      </div>
      <div class="topRight">
        <div class="tittle flex">
          <img src="@/assets/images/preassess/projectMongy.png" alt="" />
          <div class="conttittle">累计项目奖励金额</div>
        </div>
        <div class="flex cont">
          <div v-for="i in conttList">
            <div class="box">{{ DaprojectList[i.value] }} <span>万元</span></div>
            <div class="label">{{ i.label }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="center flex">
      <div class="centerLeft">
        <div class="ectittle conttittle">项目类型统计</div>
        <homeEcharts v-if="isChart4" :data="data1"></homeEcharts>
      </div>
      <div class="center_div">
        <div class="ectittle conttittle">建设单位统计</div>
        <project v-if="isChart" :data="data2"></project>
      </div>
      <div class="centerright">
        <div class="ectittle conttittle">月度发放金额统计</div>
        <queryChat v-if="isChart2 && data3.xData.length > 0" :data="data3"></queryChat>

        <div style="text-align: center; margin-top: 30%; color: #ddd" v-else>暂无数据</div>
      </div>
    </div>
    <div class="footer flex">
      <div class="footerLeft">
        <div class="top">
          <div class="topLeft">
            <div class="tittle flex">
              <div class="conttittle">项目类型发放金额统计</div>
            </div>
          </div>
        </div>
        <minxChar v-if="isChart4 && data4.xData.length > 0" :data="data4"></minxChar>
        <div style="text-align: center; margin-top: 30%; color: #ddd" v-else>暂无数据</div>
      </div>
      <div class="footerright" style="position: relative">
        <div class="ectittle conttittle">年度发放金额统计</div>
        <VBar v-if="isChart5" :data="data5"></VBar>
      </div>
    </div>
  </div>
</template>
<script setup name="Index">
import homeEcharts from './homeEcharts/index.vue';
import VBar from './homeEcharts/VBar.vue';
import queryChat from './homeEcharts/queryChat.vue';
import minxChar from './homeEcharts/minxChar.vue';
import project from './homeEcharts/project.vue';
import {
  projectTypeList,
  selectProjectCount,
  selectProjectMoneyTotal,
  selectProjectEchartByYear,
  selectProjectQualityHomePage,
  selectProjectContractHomePage,
  selectProjectPatrolHomePage,
} from '@/api/project/mainReward';
import { data1, data2, data3, data4, data5, conttList, projectCont, projectList } from './homeEcharts/index';
const activeName = ref('build');
let years = ref('');
const isLoading = ref(true);
const data = new Date();
const year = data.getFullYear();
const date1 = ref(data);
const date2 = ref(data);
const date3 = ref(data);
const date4 = ref(data);
const date5 = ref(data);
const date6 = ref(data);
const date7 = ref(data);
const isChart = ref(false);
const isChart1 = ref(false);
const isChart2 = ref(false);
const isChart4 = ref(false);
const isChart5 = ref(false);
const DaprojectList = ref([]);
const DaconttList = ref([]);
const DaprojectCont = ref([]);
//x项目统计
const selectProjectCountM = async p => {
  let { data } = await selectProjectCount(p);
  DaprojectList.value = data;

  data5.value.xData = [];
  data5.value.yData = [];
  data.variousYearStatistics?.forEach(i => {
    data5.value.xData.push(i.key + '年');
    data5.value.yData.push(i.value);
    isChart5.value = true;
  });
  isLoading.value = false;
  isLoading.value = false;
};
//项目金额
const selectProjectMoneyTotalM = async p => {
  let { data } = await selectProjectMoneyTotal(p);
  DaconttList.value = data;
  isLoading.value = false;
};
// 项目类型、项目建设状态、项目状态的统计
const selectProjectEchartByYearM = async p => {
  let { data } = await selectProjectEchartByYear(p);
  let array1 = [];
  let array2 = [];
  data.forEach(i => {
    array1.push(getprojectTList(i.key));
    array2.push(i.value);
  });
  data2.value.xData = array1;
  data2.value.yData = array2;

  isLoading.value = false;
  isChart.value = true;
};
//切换tabs 搜索 项目类型、项目建设状态、项目状态的统计
function handleClick({ props: { name } }) {
  isLoading.value = true;
  isChart1.value = false;
  selectProjectEchartByYearM({
    year: years.value || year,
    searchModel: name,
  });
  if (name == 'projectStatus') {
    data2.value.padding = [0, 108, 0, 0];
  } else {
    data2.value.padding = [0, 0, 0, 0];
  }
}
//项目质量统计
const selectProjectQualityHomePageM = async p => {
  let { data } = await selectProjectQualityHomePage(p);
  data3.value.xData = [];
  data3.value.yData = [];
  // let arr1 = [];
  let arr2 = [];
  data.forEach(i => {
    data3.value.xData.push(i.key + '月' || '无标题');
    arr2.push(i.totalMoney);
    data3.value.yData = {
      paymentMoney: arr2,
    };
    isChart2.value = true;
  });
  isLoading.value = false;
};
//项目类型发放金额统计
const selectProjectContractHomePageM = async p => {
  let { data } = await selectProjectContractHomePage(p);
  DaprojectCont.value = data;
  let arr1 = [];
  let array2 = [];
  let arr3 = [];
  data4.value.xData = [];
  data4.value.yData = [];
  data.forEach(i => {
    arr1.push(i.totalMoney);
    array2.push({ name: getprojectTList(i.key), value: i.value });
    arr3.push(i.value);
    data4.value.xData.push(getprojectTList(i.key));
    data4.value.yData = {
      contractMoney: arr1,
      contractCount: arr3,
    };
    data1.value.xData = array2;
    isChart4.value = true;
  });
  isLoading.value = false;
};

//获取项目类型
function getprojectTList(i) {
  let arr = '';
  projectTList.value.forEach(k => {
    if (i == k.id) {
      arr = k.projectTypeName;
    } else {
      arr = '其它';
    }
  });
  return arr;
}
const projectTList = ref([]);
async function projectTypeListM(i) {
  let { data } = await projectTypeList();
  projectTList.value = data;
  selectProjectContractHomePageM(year);
}
onMounted(() => {
  selectProjectEchartByYearM(year);
  selectProjectCountM();
  selectProjectMoneyTotalM({ year });
  selectProjectQualityHomePageM(year);
  projectTypeListM();
});
</script>
<style scoped lang="scss">
@import '@/assets/styles/variables.module.scss';
.home {
  height: calc(100vh - 100px);
  width: 100%;
  overflow: hidden;

  .top {
    display: flex;
    justify-content: space-between;
    .topLeft,
    .topRight {
      height: 120px;
      box-shadow: 0px 2px 3px 0px $mainColor2;
      background-color: $mainColor1;
      border-radius: 6px;
      margin: 10px 15px;
      flex: 1;
      .tittle {
        font-weight: bold;
        color: #fff;
        padding: 5px;
        position: relative;
        .top_time {
          position: absolute;
          right: 0.5%;
        }
        div {
          margin-left: 10px;
        }
      }
      .label {
        font-size: 14px;
      }
    }
  }
  .ectittle {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    left: 3%;
    top: 2%;
  }
}
.center {
  justify-content: space-between;
  margin: 10px 10px 10px 15px;
  .center_div,
  .centerLeft,
  .centerright {
    height: 270px;
    flex: 1;
    box-shadow: 0px 2px 3px 0px $mainColor2;
    background-color: $mainColor1;
    position: relative;

    .center_time {
      position: absolute;
      right: 0.5%;
      z-index: 1;
    }
  }
  .center_div {
    margin: 0 20px;
    padding: 0 10px;
  }
}

.flex {
  display: flex;
  align-items: center;
}

.cont {
  justify-content: center;
  text-align: center;

  div {
    flex: 1;
  }

  .box {
    border-right: none;
    font-size: 22px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #fff;
    span {
      color: '#fff';
      font-size: 14px;
      font-weight: 500;
    }
  }
}

.footer {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .footerLeft,
  .footerright {
    flex: 1;
    box-shadow: 0px 2px 3px 0px $mainColor2;
    background-color: $mainColor1;

    .top {
      height: 20px;
      .topLeft {
        box-shadow: 0px 0 0 0;
      }
    }
  }

  .footerLeft {
    width: 65.7%;
    margin-left: 10px;
  }

  .footerright {
    width: 33%;
    margin: 0 20px;
  }
}

:deep .el-tabs__nav-wrap::after {
  background-color: #fff;
}

:deep .el-tabs__item.is-active {
  font-size: 16px;
  font-weight: bold;
}

:deep .el-tabs__active-bar {
  bottom: 0;
  left: 35px;
  height: 3px;
  width: 30px !important;
}
.conttittle {
  font-weight: 800;
  font-size: 18px;
}
</style>