<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="6" v-for="({ title, value, unit }) in info">
            <el-card shadow="hover">
              <div class="title">{{ title }}</div>
              <div class="mt-[10px]">
                <span class="value">{{ value }}</span>
                <span class="unit ml-[10px]">{{ unit }}</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <div class="mt-[20px] flex flex-right">
          <el-button-group>
            <el-button :type="activeTime == item ? `primary` : ''" v-for="item in [6, 9, 12]" @click="changeTime(item)">近{{ item }}月</el-button>
          </el-button-group>
        </div>
        <el-row :gutter="20" class="line-space mt-[20px]">
          <el-col :span="8">
            <div class="card-body">
              <div class="chart-title">请假通过次数统计</div>
              <MyCharts :option="leaveItemOptions" />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="card-body">
              <div class="chart-title">请假天数统计</div>
              <MyCharts :option="leaveDaysOptions" />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="card-body">
              <div class="chart-title">请假人数统计</div>
              <MyCharts :option="leaveNumOptions" />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="card-body">
              <div class="chart-title">项目请假次数统计</div>
              <MyCharts :option="projectLeaveItemsOptions" />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="card-body">
              <div class="chart-title">审批情况概览</div>
              <div class="adopt-label label">
                <div>
                  <div>{{ total == 0 ? '0' : ((adoptValue / total) * 100).toFixed(0) }}<span class="unit">%</span></div>
                  <div class="label-value">{{ adoptValue }}次</div>
                </div>
              </div>
              <div class="reject-label label">
                <div>
                  <div>{{ total == 0 ? '0' : ((rejectValue / total) * 100).toFixed(0) }}<span class="unit">%</span></div>
                  <div class="label-value">{{ rejectValue }}次</div>
                </div>
              </div>
              <div class="name adopt-name">通过</div>
              <div class="name reject-name">驳回</div>
              <MyCharts :option="approvalOverviewOptions" />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="card-body">
              <div class="chart-title">专家请假人员统计 TOP5</div>
              <MyCharts :option="expertLeaveTopFiveOptions" />
            </div>
          </el-col>
        </el-row>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { getBaseData, getChartData } from '@/api/leave/statistics';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import * as echarts from 'echarts';
import MyCharts from '@/components/MyCharts.vue';
const infoData = ref({
  num: 0,
  day: 0,
  agreeDays: 0,
  proNums: 0
});
const info = computed(() => {
  const { num = 0, day = 0, agreeDays = 0, proNums = 0 } = infoData.value;
  return [
    {
      title: '请假总次数',
      value: num,
      unit: '次'
    },
    {
      title: '请假总天数',
      value: day,
      unit: '天'
    },
    {
      title: '批假天数',
      value: agreeDays,
      unit: '天'
    },
    {
      title: '项目请假次数',
      value: proNums,
      unit: '次'
    }
  ];
});
const leaveItemOptions = ref(null);
const leaveDaysOptions = ref(null);
const leaveNumOptions = ref(null);
const projectLeaveItemsOptions = ref(null);
const approvalOverviewOptions = ref(null);
const expertLeaveTopFiveOptions = ref(null);
const activeTime = ref(6);
const changeTime = (time:any) => {
  activeTime.value = time;
  chartData();
};

const customGrid = {
  top: 30,
  left: 16,
  right: 16,
  bottom: 16,
  containLabel: true
};
const barStyle = {
  barWidth: 20,
  itemStyle: {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#1978e5' },
      { offset: 1, color: 'rgba(25,120,299, 0)' }
    ])
  }
};
const xStyle = {
  axisLabel: {
    color: '#a4aab5',
    fontSize: 12,
    fontWeight: 400
  },
  axisTick: {
    show: false
  },
  axisLine: {
    lineStyle: {
      color: '#1d314d'
    }
  }
};
const yStyle = {
  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
  },
  minInterval: 1
};
const customLegend = {
  show: true,
  textStyle: {
    color: '#fff'
  },
  itemWidth: 16,
  itemHeight: 16,
  right: 16,
  selectedMode: false
};
const setLeaveItems = ({ xline, yline }) => {
  leaveItemOptions.value = {
    grid: customGrid,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      ...customLegend,
      data: ['请假通过次数']
    },
    xAxis: {
      data: xline || [],
      type: 'category',
      ...xStyle
    },
    yAxis: {
      name: '单位：次',
      ...yStyle
    },
    series: [
      {
        name: '请假通过次数',
        data: yline?.map((e:any) => !e || e == 'null' ? 0 : e) || [],
        type: 'bar',
        ...barStyle
      }
    ]
  };
};
const setLeaveDays = ({ xline, yline }) => {
  leaveDaysOptions.value = {
    grid: customGrid,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      ...customLegend,
      data: ['请假天数']
    },
    xAxis: {
      data: xline || [],
      type: 'category',
      ...xStyle
    },
    yAxis: {
      name: '单位：天',
      ...yStyle
    },
    series: [
      {
        name: '请假天数',
        data: yline?.map((e:any) => !e || e == 'null' ? 0 : e) || [],
        type: 'bar',
        ...barStyle
      }
    ]
  };
};
const setLeaveNum = ({ xline, yline }) => {
  leaveNumOptions.value = {
    grid: customGrid,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      ...customLegend,
      data: ['请假人数']
    },
    xAxis: {
      data: xline || [],
      type: 'category',
      ...xStyle
    },
    yAxis: {
      name: '单位：人',
      ...yStyle
    },
    series: [
      {
        name: '请假人数',
        data: yline?.map((e:any) => !e || e == 'null' ? 0 : e) || [],
        type: 'bar',
        ...barStyle
      }
    ]
  };
};
const setProjectLeaveItems = ({ xline, yline }) => {
  projectLeaveItemsOptions.value = {
    grid: customGrid,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      ...customLegend,
      data: ['请假次数']
    },
    xAxis: {
      data: xline || [],
      type: 'category',
      ...xStyle
    },
    yAxis: {
      name: '单位：次',
      ...yStyle
    },
    series: [
      {
        name: '请假次数',
        data: yline?.map((e:any) => !e || e == 'null' ? 0 : e) || [],
        type: 'bar',
        ...barStyle
      }
    ]
  };
};

const pieCustomOption = {
  seriesOption: {
    type: 'pie',
    radius: ['40%', '50%'],
    avoidLabelOverlap: false,
    hoverAnimation: false,
    label: {
      normal: {
        show: false,
        position: 'center'
      },
      emphasis: {
        show: false
      }
    },
    labelLine: {
      normal: {
        show: false
      }
    }
  },
  dataOption: [
    {
      selected: false
    },
    {
      name: '',
      itemStyle: {
        color: '#113761'
      },
      label: {
        normal: {
          show: false
        }
      }
    }
  ]
};
const adoptValue = ref(0);
const rejectValue = ref(0);
const pendingValue = ref(0);
const total = computed(() => {
  return adoptValue.value + rejectValue.value + pendingValue.value;
});
const setApprovalOverview = (res:any) => {
  adoptValue.value = res?.agreeNum || 0;
  rejectValue.value = res?.rejectNum || 0;
  pendingValue.value = res?.waitNum || 0;
  approvalOverviewOptions.value = {
    grid: customGrid,
    series: [
      {
        name: '通过',
        ...pieCustomOption.seriesOption,
        center: ['30%', '50%'],
        data: [
          {
            value: adoptValue.value,
            name: '通过',
            ...pieCustomOption.dataOption[0],
            itemStyle: {
              color: '#67c23a'
            }
          },
          {
            value: total.value - adoptValue.value,
            ...pieCustomOption.dataOption[1]
          }
        ]
      },
      {
        name: 'Access From',
        ...pieCustomOption.seriesOption,
        center: ['70%', '50%'],
        data: [
          {
            value: rejectValue.value,
            name: '驳回',
            ...pieCustomOption.dataOption[0],
            itemStyle: {
              color: '#f56c6c'
            }
          },
          {
            value: total.value - rejectValue.value,
            ...pieCustomOption.dataOption[1]
          }
        ]
      }
    ]
  };
};
const setExpertLeaveTopFive = ({ xline, yline }) => {
  expertLeaveTopFiveOptions.value = {
    grid: {
      top: 30,
      left: 16,
      right: 16,
      bottom: 16,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      show: true,
      textStyle: {
        color: '#fff'
      },
      itemWidth: 16,
      itemHeight: 16,
      right: 16,
      selectedMode: false,
      data: ['请假天数']
    },
    xAxis: {
      name: '单位：天',
      axisLabel: {
        color: '#a4aab5',
        fontSize: 12,
        fontWeight: 400
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#1d314d'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#1d314d'
        }
      },
      type: 'value'
    },
    yAxis: {
      data: yline || [],
      inverse: true,
      axisLabel: {
        color: '#a4aab5',
        fontSize: 12,
        fontWeight: 700
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#1d314d'
        }
      },
      type: 'category'
    },
    series: [
      {
        realtimeSort: true,
        name: '请假天数',
        data: xline || [],
        type: 'bar',
        barMaxWith: '20%',
        barWidth: 15,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            { offset: 0, color: '#1978e5' },
            { offset: 1, color: 'rgba(25,120,299, 0)' }
          ])
        }
      }
    ],
    animationDuration: 0,
    animationDurationUpdate: 3000,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
  };
};

const chartData = async () => {
  let res = await getChartData(activeTime.value);
  if (res.code != 200) {
    ElNotification({
      title: '提示',
      message: res.msg,
      type: 'error'
    });
  }
  setLeaveItems(res.data?.numsSts || {});
  setLeaveDays(res.data?.daysSts || {});
  setLeaveNum(res.data?.persSts || {});
  setProjectLeaveItems(res.data?.prosSts || {});
  setApprovalOverview(res.data?.approvalSts || {});
  setExpertLeaveTopFive(res.data?.whoSts || {});
};

const getData = async () => {
  let res = await getBaseData();
  if (res.code != 200) {
    ElNotification({
      title: '提示',
      message: res.msg,
      type: 'error'
    });
  }
  infoData.value = res.data || {};
  await chartData();
};
onMounted(() => {
  getData();
});
</script>
<style lang="scss" scoped>
.title {
  font-size: 16px;
  font-weight: bold;
}
.value {
  font-size: 32px;
  font-weight: bold;
}
.unit {
  font-size: 16px;
}
.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: 300px;
  &:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
  }
  .chart-title {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
    font-weight: bold;
    line-height: 20px;
  }
  .chart-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0 0 4px 4px;
    z-index: 0;
    position: relative;
  }
}
.flex-right {
  justify-content: flex-end;
}
.label {
  position: absolute;
  top: calc(50% + 20px);
  font-size: 28px;
  font-weight: 500;
  color: #fff;
  transform: translateY(-50%);
  width: 20%;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  &.adopt-label {
    left: 20%;
  }
  &.reject-label {
    right: 20%;
  }
  .label-value {
    font-size: 14px;
    color: #858982;
  }
}
.name {
  position: absolute;
  bottom: 8%;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  width: 20%;
  text-align: center;
  &.adopt-name {
    left: 20%;
  }
  &.reject-name {
    right: 20%;
  }
}
</style>
