<template>
  <div class="p-[20px]">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div class="mb-[10px]">
        <el-row :gutter="20">
          <el-col :span="4" v-for="({ title, value }, index) in info">
            <el-card shadow="hover">
              <div class="title">{{ title }}</div>
              <div class="value mt-[10px]">
                {{ value }}
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="line-space mt-[20px]">
          <el-col :span="12">
            <div class="card-body">
              <div class="chart-title">各项目类型总结数量统计</div>
              <MyCharts :option="projectTypeOptions" v-if="!noTypeData" />
              <div v-else class="no-data">没有各项目类型总结数量统计数据</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="card-body">
              <div class="chart-title">各评审阶段总结数量统计</div>
              <MyCharts :option="projectStageOptions" v-if="!noStageData" />
              <div v-else class="no-data">没有各评审阶段总结数量统计数据</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </transition>
  </div>
</template>

<script setup name="LeaveStatistics" lang="ts">
import { getBaseData, getTypeData, getStageData } from '@/api/project/statistics';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import MyCharts from '@/components/MyCharts.vue';
const { project_type } = toRefs<any>(proxy?.useDict('project_type'));
const { item_stage } = toRefs<any>(proxy?.useDict('item_stage'));
const infoData = ref({
  'projectAuditSum': 0,
  'projectSummaryQuantity': 0,
  'quantitySummarized': 0,
  'quantityEvaluated': 0,
  'numberItems': 0,
  summaryNumberApproved: 0
});
const info = computed(() => {
  const { projectAuditSum, projectSummaryQuantity, quantitySummarized, quantityEvaluated, numberItems, summaryNumberApproved } = infoData.value;
  return [
    {
      title: '项目评审数量',
      value: projectAuditSum || 0
    },
    {
      title: '完成项目总结数量',
      value: projectSummaryQuantity || 0
    },
    {
      title: '待总结数量',
      value: quantitySummarized || 0
    },
    {
      title: '待审批总结数量',
      value: summaryNumberApproved || 0
    },
    {
      title: '待评价总结数',
      value: quantityEvaluated || 0
    },
    {
      title: '项目数量',
      value: numberItems || 0
    }
  ];
});
const projectTypeOptions = ref(null);
const projectStageOptions = ref(null);

const customGrid = {
  top: 30,
  left: 16,
  right: 16,
  bottom: 16,
  containLabel: true
};
const xStyle = {
  axisLabel: {
    color: '#a4aab5',
    fontSize: 12,
    fontWeight: 400
  },
  axisTick: {
    show: false
  },
  axisLine: {
    lineStyle: {
      color: '#1d314d'
    }
  }
};
const yStyle = {
  name: '单位：次',
  type: 'value',
  axisLabel: {
    color: '#a4aab5',
    fontSize: 12,
    fontWeight: 700
  },
  axisLine: {
    show: false
  },
  splitLine: {
    lineStyle: {
      color: '#1d314d'
    }
  },
  nameTextStyle: {
    color: '#fff',
    fontSize: 12,
    align: 'center',
    fontWeight: 400
  }
};
const customLegend = {
  show: true,
  textStyle: {
    color: '#fff'
  },
  right: 16,
  selectedMode: false
};
let typeKeys = {
  'governmentInformation': 1,
  'researchProjects': 2,
  'technologyInformation': 3
};
const setTypeTimes = (data) => {
  let xline = [];
  let dataFormatByType = project_type.value.map((e) => {
    return {
      key: e.value,
      name: e.label,
      data: [],
      smooth: true,
      type: 'line'
    };
  });
  let names = project_type.value.map((e) => e.label);
  data.forEach((e) => {
    xline.push(e.month);
    let keysArr = Object.keys(typeKeys);
    keysArr.forEach((e_k) => {
      let i = dataFormatByType.findIndex((el) => el.key == typeKeys[e_k]);
      dataFormatByType[i].data.push(e[e_k]);
    });
  });
  projectTypeOptions.value = {
    color: ['#1978e5', '#1ad9ff', '#facd91', '#ec808d'],
    grid: customGrid,
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      ...customLegend,
      data: names
    },
    xAxis: {
      data: xline,
      type: 'category',
      ...xStyle
    },
    yAxis: {
      ...yStyle
    },
    series: dataFormatByType
  };
};
let stageKeys = {
  'approval': 1,
  'bids': 2,
  'initialInspection': 3,
  'finalInspection': 4,
};
const setStageOptions = (data) => {
  let xline = [];
  let dataFormatByStage = item_stage.value.map((e) => {
    return {
      key: e.value,
      name: e.label,
      data: [],
      smooth: true,
      type: 'line'
    };
  });
  let names = item_stage.value.map((e) => e.label);
  data.forEach((e) => {
    xline.push(e.mon);
    let keysArr = Object.keys(stageKeys);
    keysArr.forEach((e_k) => {
      let i = dataFormatByStage.findIndex((el) => el.key == stageKeys[e_k]);
      dataFormatByStage[i].data.push(e[e_k]);
    });
  });
  projectStageOptions.value = {
    color: ['#1978e5', '#1ad9ff', '#facd91', '#ec808d'],
    grid: customGrid,
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      ...customLegend,
      data: names
    },
    xAxis: {
      data: xline,
      type: 'category',
      ...xStyle
    },
    yAxis: {
      ...yStyle
    },
    series: dataFormatByStage
  };
};
const noTypeData = ref(false);
const noStageData = ref(false);
const chartData = async () => {
  let res = await getTypeData();
  if (res.code != 200) {
    ElNotification({
      title: '提示',
      message: res.msg,
      type: 'error'
    });
  }
  noTypeData.value = res.data?.length == 0;
  setTypeTimes(res.data || []);
  let stageRes = await getStageData();
  if (stageRes.code != 200) {
    ElNotification({
      title: '提示',
      message: stageRes.msg,
      type: 'error'
    });
  }
  noStageData.value = stageRes.data?.length == 0;
  setStageOptions(stageRes.data || []);
};
const getChartData = async () => {
  let res = await getBaseData();
  if (res.code != 200) {
    ElNotification({
      title: '提示',
      message: res.msg,
      type: 'error'
    });
    return;
  }
  infoData.value = res.data || {};
  chartData();
};
onMounted(() => {
  getChartData();
});
</script>
<style lang="scss" scoped>
.title {
  font-size: 16px;
  font-weight: bold;
}
.value {
  font-size: 32px;
  font-weight: bold;
}
.line-space {
  row-gap: 20px;
}
.card-body {
  background-color: #0c2139;
  padding-top: 40px;
  border: 1px solid var(--el-border-color-light);
  border-radius: 6px;
  transition: var(--el-transition-duration);
  position: relative;
  box-sizing: border-box;
  height: 500px;
  &:hover {
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
  }
  .chart-title {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
    font-weight: bold;
    line-height: 20px;
  }
  .no-data {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #aaa;
  }
}
</style>
