<template>
  <!-- 统计分析 -->
  <div class="statisticalAnaPage">
    <div class="checkBox">
      <n-space>
        <span>考核方式：</span>
        <n-radio-group v-model:value="orgValue" name="radiogroup" @update:value="handleCheck">
          <n-space>
            <n-radio v-for="org in organ" :key="org.value" :value="org.value"> {{ org.label }}</n-radio>
          </n-space>
        </n-radio-group>
        <span>考核年份：</span>
        <n-select
          size="small"
          v-model:value="selectyear"
          placeholder="请选择"
          :options="yearOptions"
          @update:value="changeyear"
          style="width: 200px"
        >
        </n-select>
      </n-space>
    </div>
    <div class="top common">
      <div class="content">
        <div class="left">
          <div class="title">黄孝河、机场河水环境二期综合治理项目{{ getyear }}年绩效考核成绩对比</div>
          <Bar1 ref="chart1Data" />
        </div>
        <div class="right">
          <div class="title">黄孝河、机场河水环境综合治理PPP项目{{ getyear }}年项目运营扣分原因分析</div>
          <div class="thrContent">
            <div class="proportion">
              <div class="causetitleBg">项目运营产出指标扣分原因占比</div>
              <Causepie1 ref="Causepie1Data" />
            </div>
            <div class="line"></div>
            <div class="distribution">
              <div class="causetitleBg">项目运营效果指标扣分原因占比</div>
              <Causepie2 ref="Causepie2Data" />
            </div>
            <div class="line"></div>
            <div class="situation">
              <div class="causetitleBg">项目运营管理指标扣分原因占比</div>
              <Causepie3 ref="Causepie3Data" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="center common">
      <div class="content">
        <div class="centerleft">
          <div class="title">黄孝河、机场河水环境二期综合治理{{ getyear }}年产出考评成绩对比</div>
          <Bar3 ref="chart3Data" />
        </div>
        <div class="line"></div>
        <div class="centercenter">
          <div class="title">黄孝河、机场河水环境二期综合治理{{ getyear }}年效果考评成绩对比</div>
          <Line1 ref="chart4Data" />
        </div>
        <div class="line"></div>
        <div class="centerright">
          <div class="title">黄孝河、机场河水环境二期综合治理{{ getyear }}年管理考评成绩对比</div>
          <Bar4 ref="chart8Data" />
        </div>
      </div>
    </div>
    <div class="bottom common">
      <div class="title">黄孝河、机场河水环境二期综合治理{{ getyear }}年各工程子项问题整改情况</div>
      <div class="thrContent">
        <div class="proportion">
          <div class="titleBg" style="width: 180px">各处理设施待整改问题占比</div>
          <Pie1 ref="chart5Data" />
        </div>
        <div class="line" style="height: 90%"></div>
        <div class="distribution">
          <div class="titleBg">待整改问题分布情况</div>
          <Rader ref="chart6Data" />
        </div>
        <div class="line" style="height: 90%"></div>
        <div class="situation">
          <div class="titleBg">整改问题核销落实情况</div>
          <Pie2 ref="chart7Data" />
        </div>
        <div class="line" style="height: 90%"></div>
        <div class="situation">
          <div class="title" style="top: -30px; position: absolute">黄孝河、机场河{{ getyear }}年溢流次数+水质不达标次数</div>
          <Bar5 ref="chart9Data" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, onMounted } from 'vue';
import Bar1 from './components/Bar1.vue';
import Bar2 from './components/Bar2.vue';
import Bar3 from './components/Bar3.vue';
import Bar4 from './components/Bar4.vue';
import Bar5 from './components/Bar5.vue';
import Line1 from './components/Line1.vue';
import Pie1 from './components/Pie1.vue';
import Pie2 from './components/Pie2.vue';
import Rader from './components/Rader.vue';
import Causepie1 from './components/Causepie1.vue';
import Causepie2 from './components/Causepie2.vue';
import Causepie3 from './components/Causepie3.vue';
import { formatDate } from '@/utils/util';
import {
  assessmentResult,
  ReasonsAnalysis,
  analysisData3,
  analysisData4,
  analysisData5,
  analysisData6,
  analysisData7,
  analysisData8,
  analysisData9,
  normalNameList,
} from '@/services';
export default {
  name: 'statisticalAnaPage',
  components: {
    Bar1,
    Bar2,
    Bar3,
    Bar4,
    Bar5,
    Line1,
    Pie1,
    Pie2,
    Rader,
    Causepie1,
    Causepie2,
    Causepie3,
  },
  setup() {
    const allData = reactive({
      selectyear: String(new Date().getFullYear()),
      yearOptions: [],
      getyear: '2022',
      orgValue: 1,
      organ: [
        { label: '项目公司考核', value: 0 },
        { label: '水务局考核', value: 1 },
      ],
    });
    const changeyear = () => {
      allData.getyear = formatDate(allData.selectyear, 'YYYY');
      getData1();
      getData2();
      getData3();
      getData4();
      getData5();
      getData6();
      getData7();
      getData8();
      getData9();
    };
    const handleCheck = (value) => {
      getData1();
      getData2();
      getData3();
      getData4();
      getData5();
      getData6();
      getData7();
      getData8();
      getData9();
    };
    // 图1数据
    const chart1Data = ref(null);
    const getData1 = async () => {
      let pramas = {
        performType: allData.orgValue,
        year: allData.getyear,
      };
      let res = await assessmentResult(pramas);
      if (res.code == 200) {
        setTimeout(() => {
          chart1Data.value.chartData = res.data;
          chart1Data.value.initData();
        });
      }
    };
    // 图2数据
    const Causepie1Data = ref(null);
    const Causepie2Data = ref(null);
    const Causepie3Data = ref(null);
    const getData2 = async () => {
      let pramas = {
        performType: allData.orgValue,
        year: allData.getyear,
      };
      let res = await ReasonsAnalysis(pramas);
      if (res.code === 200) {
        let datas = res.data;
        let arrs1 = [],
          arrs2 = [],
          arrs3 = [];
        datas.ccData.map((item) => {
          arrs1.push([item.name, item.total]);
        });
        datas.glData.map((item) => {
          arrs2.push([item.name, item.total]);
        });
        datas.glData.map((item) => {
          arrs3.push([item.name, item.total]);
        });
        setTimeout(() => {
          // 产出
          Causepie1Data.value.chartData = arrs1;
          Causepie1Data.value.initData();
          // 效果
          Causepie2Data.value.chartData = arrs2;
          Causepie2Data.value.initData();
          // 管理
          Causepie3Data.value.chartData = arrs3;
          Causepie3Data.value.initData();
        });
      }
    };
    // 图3数据
    const chart3Data = ref(null);
    const getData3 = async () => {
      let pramas = {
        performType: allData.orgValue,
        year: allData.getyear,
      };
      let res = await analysisData3(pramas);
      if (res.code == 200) {
        setTimeout(() => {
          chart3Data.value.chartData = res.data;
          chart3Data.value.initData();
        });
      }
    };
    // 管理考评成绩对比
    const chart8Data = ref(null);
    const getData8 = async () => {
      let pramas = {
        performType: allData.orgValue,
        year: allData.getyear,
      };
      let res = await analysisData8(pramas);
      if (res.code == 200) {
        setTimeout(() => {
          chart8Data.value.chartData = res.data;
          chart8Data.value.initData();
        });
      }
    };
    // 图4数据
    const chart4Data = ref(null);
    const getData4 = async () => {
      let pramas = {
        performType: allData.orgValue,
        year: allData.getyear,
      };
      let res = await analysisData4(pramas);
      if (res.code == 200) {
        setTimeout(() => {
          chart4Data.value.chartData = res.data;
          chart4Data.value.initData();
        });
      }
    };
    // 图5数据
    const chart5Data = ref(null);
    const getData5 = async () => {
      let pramas = {
        performType: allData.orgValue,
        year: allData.getyear,
      };
      let res = await analysisData5(pramas);
      if (res.code === 200) {
        let datas = res.data;
        let arrs1 = [];
        datas.map((item) => {
          arrs1.push([item.name, item.percentage]);
        });
        setTimeout(() => {
          // 产出
          chart5Data.value.chartData = arrs1;
          chart5Data.value.initData();
        });
      }
    };
    // 图6数据
    const chart6Data = ref(null);
    const getData6 = async () => {
      let pramas = {
        performType: allData.orgValue,
        year: allData.getyear,
      };
      let res = await analysisData6(pramas);
      if (res.code == 200) {
        setTimeout(() => {
          chart6Data.value.chartData = res.data;
          chart6Data.value.initData();
        });
      }
    };
    // 图7数据
    const chart7Data = ref(null);
    const getData7 = async () => {
      let pramas = {
        performType: allData.orgValue,
        year: allData.getyear,
      };
      let res = await analysisData7(pramas);
      if (res.code === 200) {
        let datas = res.data;
        let arrs1 = [];
        datas.map((item) => {
          arrs1.push([item.name, item.percentage]);
        });
        setTimeout(() => {
          // 产出
          chart7Data.value.chartData = arrs1;
          chart7Data.value.initData();
        });
      }
    };
    // 图9数据
    const chart9Data = ref(null);
    const getData9 = async () => {
      let pramas = {
        performType: allData.orgValue,
        year: allData.getyear,
      };
      let res = await analysisData9(pramas);
      if (res.code === 200) {
        setTimeout(() => {
          chart9Data.value.chartData = res.data;
          chart9Data.value.initData();
        });
      }
    };
    // 获取年份
    async function getYear() {
      allData.yearOptions = [];
      let res = await normalNameList();
      if (res && res.code === 200) {
        res.data.map((item) => {
          allData.yearOptions.push({
            value: item.year,
            label: item.performName,
          });
        });
      }
    }
    onMounted(() => {
      getYear();
      changeyear();
    });
    return {
      ...toRefs(allData),
      handleCheck,
      changeyear,
      Causepie1Data,
      Causepie2Data,
      Causepie3Data,
      chart1Data,
      chart3Data,
      chart4Data,
      chart5Data,
      chart6Data,
      chart7Data,
      chart8Data,
      chart9Data,
    };
  },
};
</script>

<style lang="less">
.statisticalAnaPage {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  .checkBox {
    display: flex;
    align-items: center;
    margin: 5px 10px;
    z-index: 1;
  }
  .common {
    margin-bottom: 10px;
    flex: 1;
    background: #034159;
    &:last-child {
      margin-bottom: 0;
    }
    .title {
      display: flex;
      align-items: center;
      padding-left: 40px;
      width: 490px;
      height: 44px;
      line-height: 22px;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      &:before {
        display: block;
        content: '';
        width: 2px;
        height: 17px;
        background: #0199d9;
        margin-right: 10px;
      }
    }
    .content {
      display: flex;
      height: calc(100% - 44px);
      position: relative;
      .left {
        width: 30%;
      }
      .centerleft {
        width: 40%;
        height: 270px;
      }
      .centercenter {
        width: 30%;
        height: 270px;
      }
      .centerright {
        width: 30%;
        height: 270px;
      }
      .right {
        flex: 1;
        position: relative;
      }
      .search {
        position: absolute;
        top: -30px;
        right: 0;
        // width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;
      }
    }
    .thrContent {
      display: flex;
      height: calc(100% - 44px);
      .proportion {
        flex: 1;
        position: relative;
      }
      .distribution {
        flex: 1;
        position: relative;
        .titleBg {
          top: -30px;
        }
      }
      .situation {
        position: relative;
        flex: 1;
        .titleBg {
          top: -30px;
        }
      }
    }
    .line {
      height: 100%;
      width: 1px;
      background: rgba(57, 99, 108, 1);
      margin-top: 20px;
    }
    .titleBg {
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -65px;
      width: 150px;
      height: 30px;
      background: url('/src/assets/Imgs/title_bg.png');
      background-size: 100% 100%;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #1bd9d7;
      line-height: 30px;
      text-align: center;
    }
    .causetitleBg {
      position: absolute;
      top: 10px;
      left: 50%;
      margin-left: -65px;
      width: 220px;
      height: 30px;
      background: url('/src/assets/Imgs/title_bg.png');
      background-size: 100% 100%;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #1bd9d7;
      line-height: 30px;
      text-align: center;
    }
  }
}
</style>