<template>
  <div class="app-container home" v-loading="isLoading">
    <div class="top">
      <div class="topLeft">
        <div class="tittle flex">
          <img src="../assets/projectCont.png" alt="" />
          <div class="conttittle">项目统计</div>
          <div class="top_time">
            <el-date-picker
              @change="(date1) => changeTime(date1, 1)"
              v-model="date1"
              type="year"
              placeholder="选择年"
            >
            </el-date-picker>
          </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/projectMongy.png" alt="" />
          <div class="conttittle">项目金额</div>
          <div class="top_time" style="right: 6%">
            <el-date-picker
              @change="(date2) => changeTime(date2, 2)"
              v-model="date2"
              type="year"
              placeholder="选择年"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="flex cont">
          <div v-for="i in conttList">
            <div class="box">{{ DaconttList[i.value] }} <span>万元</span></div>
            <div class="label">{{ i.label }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="center flex">
      <div class="centerLeft">
        <div class="center_time">
          <el-date-picker
            @change="(date3) => changeTime(date3, 3)"
            v-model="date3"
            type="year"
            placeholder="选择年"
          >
          </el-date-picker>
        </div>
        <homeEcharts v-if="isChart" :data="data1"></homeEcharts>
      </div>
      <div class="center_div">
        <div class="center_time">
          <el-date-picker
            @change="(date4) => changeTime(date4, 4)"
            v-model="date4"
            type="year"
            placeholder="选择年"
          >
          </el-date-picker>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="项目建设状态占比" name="build"></el-tab-pane>
          <el-tab-pane label="项目状态统计" name="projectStatus"></el-tab-pane>
        </el-tabs>
        <homeEcharts v-if="isChart1" :data="data2"></homeEcharts>
      </div>
      <div class="centerright">
        <div class="ectittle conttittle">项目质量统计</div>
        <div class="center_time" style="right: 8%">
          <el-date-picker
            @change="(date5) => changeTime(date5, 5)"
            v-model="date5"
            type="year"
            placeholder="选择年"
          >
          </el-date-picker>
        </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 style="position: absolute; right: -0.1%">
                <el-date-picker
                  @change="(date6) => changeTime(date6, 6)"
                  v-model="date6"
                  type="year"
                  placeholder="选择年"
                >
                </el-date-picker>
              </div>
            </div>
            <div class="flex cont">
              <div v-for="i in projectCont">
                <div class="box">
                  {{ DaprojectCont[i.value] }}
                  <span>{{
                    i.value == "count" || i.value == "currentContractCount"
                      ? "个"
                      : "万元"
                  }}</span>
                </div>
                <div class="label">{{ i.label }}</div>
              </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>
        <div style="position: absolute; right: 8%; z-index: 1">
          <el-date-picker
            @change="(date7) => changeTime(date7, 7)"
            v-model="date7"
            type="year"
            placeholder="选择年"
          >
          </el-date-picker>
        </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 {
  selectProjectCount,
  selectProjectMoneyTotal,
  selectProjectEchartByYear,
  selectProjectQualityHomePage,
  selectProjectContractHomePage,
  selectProjectPatrolHomePage,
} from "@/api/home";
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 data1 = ref({
  xData: [],
  yData: [],
  tittle: "项目类型统计",
  type: "pie",
  center: ["40%", "50%"],
  padding: [0, 50, 0, 0],
  x:'35%',
  y:'40%',
  legend: ["",],
  itemStyle: {
    normal: {
      color: function (colors) {
        var colorList = [
          "#fc8251",
          "#5470c6",
          "#9A60B4",
          "#ef6567",
          "#f9c956",
          "#3BA272",
        ];
        return colorList[colors.dataIndex];
      },
    },
  },
});
const data2 = ref({
  xData: [],
  yData: [],
  type: "pie",
  center: ["19.9%", "38%"],
  x:'15%',
  y:'30%',
  legend: [""],
  padding: [0, 0, 0, 0],
  itemStyle: {
    normal: {
      color: function (colors) {
        var colorList = [
          "#9A60B4",
          "#f9c956",
          "#3BA272",
          "#fc8251",
          "#5470c6",
          "#ef6567",
        ];
        return colorList[colors.dataIndex];
      },
    },
  },
});
const data3 = ref({
  xData: [],
  yData: [],
  tittle: "",
  type: "bar",
  color: "#0F69FF",
  title: "统计数据",
  interval: 5,
  legend: ["数量", "待整改"],
});
const data4 = ref({
  xData: [],
  yData: {},
  legend: ["合同金额", "支付金额", "合同数量"],
  tittle: "",
  type: "bar",
  color: "#0F69FF",
});
const data5 = ref({
  xData: [],
  yData: [],
  tittle: "",
  type: "line",
  areaStyle: {},
  color: "#0F69FF",
  title: "巡查数据",
  interval: 5,
});
const conttList = ref([
  { label: "总金额", value: "projectTotalMoney" },
  { label: "海绵相关投资", value: "projectHmMoney" },
  { label: "当年计划支付金额", value: "projectCurrentYearPlanMoney" },
  { label: "当年实际支付金额", value: "projectCurrentYearRealityPlanMoney" },
]);
const projectCont = ref([
  { label: "项目合同数", value: "count" },
  { label: "合同金额", value: "contractMoney" },
  { label: "当年合同数", value: "currentContractCount" },
  { label: "当年合同金额", value: "currentContractMoney" },
  { label: "年度计划支付金额", value: "currentYearPlanMoney" },
  { label: "年度实际支付金额", value: "currentYearRealityPayMoney" },
]);
const projectList = ref([
  { label: "总数", value: "projectCount" },
  { label: "在建", value: "underProjectCount" },
  { label: "已完工", value: "completeProjectCount" },
  { label: "延期", value: "postponeProjectCount" },
]);
const DaprojectList = ref([]);
const DaconttList = ref([]);
const DaprojectCont = ref([]);
//x项目统计
const selectProjectCountM = async (p) => {
  let { data } = await selectProjectCount(p);
  DaprojectList.value = data;
  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 array = [];
  data.forEach((i) => {
    array.push({ name: i.name, value: i.count });
  });
  switch (p.searchModel) {
    case "typeTotal":
      data1.value.xData = array;
      isChart.value = true;
      break;
    case "build":
      data2.value.xData = array;
      isChart1.value = true;
      break;
    case "projectStatus":
      data2.value.xData = array;
      isChart1.value = true;

      break;
  }
  isLoading.value = false;
};
//切换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.name || "无标题");
    arr1.push(i.noRectifiedCount);
    arr2.push(i.count);
    data3.value.yData = {
      contractMoney: arr1,
      paymentMoney: arr2,
    };
    isChart2.value = true;
  });
  isLoading.value = false;
};
//项目合同数据
const selectProjectContractHomePageM = async (p) => {
  let { data } = await selectProjectContractHomePage(p);
  DaprojectCont.value = data;
  console.log("DaprojectCont", DaprojectCont.value)
  let arr1 = [];
  let arr2 = [];
  let arr3 = [];
  data4.value.xData = [];
  data4.value.yData = [];
  data.contractEchartList.forEach((i) => {
    arr1.push(i.contractMoney);
    arr2.push(i.paymentMoney);
    arr3.push(i.contractCount);
    data4.value.xData.push(i.month);
    data4.value.yData = {
      contractMoney: arr1,
      paymentMoney: arr2,
      contractCount: arr3,
    };
    isChart4.value = true;
  });
  isLoading.value = false;
};
//项目巡查数据
const selectProjectPatrolHomePageM = async (p) => {
  let { data } = await selectProjectPatrolHomePage(p);
  data5.value.xData = [];
  data5.value.yData = [];
  data.forEach((i) => {
    data5.value.xData.push(i.name);
    data5.value.yData.push(i.count);
    isChart5.value = true;
  });
  isLoading.value = false;
};
function changeTime(v, type) {
  let year = v?.getFullYear();
  years.value = year;
  isLoading.value = true;
  switch (type) {
    case 1:
      selectProjectCountM({ year });
      break;
    case 2:
      selectProjectMoneyTotalM({ year });
      break;
    case 3:
      isChart.value = false;
      selectProjectEchartByYearM({ year, searchModel: "typeTotal" });
      break;
    case 4:
      isChart1.value = false;
      selectProjectEchartByYearM({ year, searchModel:  activeName.value });
      break;
    case 5:
      isChart2.value = false;
      selectProjectQualityHomePageM({ year });
      break;
    case 6:
      isChart4.value = false;
      selectProjectContractHomePageM({ year });
      break;
    case 7:
      isChart5.value = false;
      selectProjectPatrolHomePageM({ year });
      break;
  }
}
onMounted(() => {
  selectProjectEchartByYearM({ year, searchModel: "typeTotal" });
  selectProjectEchartByYearM({ year, searchModel: "build" });
  selectProjectCountM({ year });
  selectProjectMoneyTotalM({ year });
  selectProjectQualityHomePageM({ year });
  selectProjectContractHomePageM({ year });
  selectProjectPatrolHomePageM({ year });
});
</script>
<style scoped lang="scss">
.home {
  height: 92vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .top,
  .center,
  .footer {
    flex: 1;
  }
  .top {
    display: flex;
    justify-content: space-between;
    .topLeft,
    .topRight {
      height: 13vh;
      box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);
      border-radius: 6px;
      margin: 5px 7px;
      flex: 1;
      .tittle {
        font-weight: bold;
        color: #333333;
        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: #464646;
    position: absolute;
    left: 3%;
    top: 2%;
  }
}
.center {
  justify-content: space-between;
  margin: 10px;
  // height:33;
  .center_div,
  .centerLeft,
  .centerright {
    height:270px;
    flex: 1;
    box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);
    position: relative;

    .center_time {
      position: absolute;
      right: 0.5%;
      z-index: 1;
    }
  }

  .center_div {
    margin: 10px 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: #333333;
    span {
      color: "#666666";
      font-size: 14px;
      font-weight: 500;
    }
  }
}

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

  .footerLeft,
  .footerright {
    flex: 1;
    box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);

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

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

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

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

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

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