<template>
  <div class="storage-page">
    <div class="operate-box">

      <div class="targetYm-date">
        <div class="title" >时间范围：</div>
        <el-radio-group v-model="formData.intervalMonths" @change="intervalMonthsChangeFun">
          <el-radio-button v-for="item in monthList" :key="item.value" :value="item.value" :label="item.name" />
        </el-radio-group>

      </div>

      <div class="targetYm-date" v-if="radio === 'increment'">
        <div class="title" >增量月份：</div>
        <el-date-picker
          class="date-style"
          v-model="formData.targetYm"
          type="month"
          placeholder="请请选择月份"
          format="YYYY-MM"
          value-format="YYYY-MM"
          @change="intervalMonthsChangeFun"
        />
      </div>

      <el-radio-group v-model="radio" @change="radioChangeFun">
        <el-radio value="default" size="large">默认</el-radio>
        <el-radio value="increment" size="large">增量</el-radio>
      </el-radio-group>
    </div>

    <!-- 项目存储空间统计 -->
    <div class="chart-item" >
      <div class="chart-content" >
        <EchartCard title="项目存储空间统计" ref="projectStorageSpaceStatisticsRef" :charts-id="'chart1'" :bar-type="'barChart'">
          <template #formSlot>
            <el-form :model="projectStorageSpaceStatisticsFormData" :inline="true">
              <el-form-item label="项目：">
                <ProjectSelect
                  class="select-width margin-right-12"
                  v-model="projectStorageSpaceStatisticsFormData.nodeId"
                  @change="initProjectStorageSpaceStatisticsFun"
                />
              </el-form-item>
            </el-form>

          </template>

        </EchartCard>

      </div>
    </div>

    <!-- 学科存储空间统计 -->
    <div class="chart-item" >

      <div class="chart-content" >
        <EchartCard title="学科存储空间统计" ref="statisticsOfSubjectStorageSpaceRef" :charts-id="'chart2'" :bar-type="'barChart'">
          <template #formSlot>
            <el-form :model="statisticsOfSubjectStorageSpaceFormData" :inline="true">
              <el-form-item label="学科：">
                <el-select class="select-width" v-model="statisticsOfSubjectStorageSpaceFormData.nodeId" @change="initStatisticsOfSubjectStorageSpaceFun">
                  <el-option v-for="item in disciplineOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </template>
        </EchartCard>

      </div>
    </div>

    <!-- 用户存储空间统计 -->
    <div class="chart-item" >

      <div class="chart-content" >
        <EchartCard title="用户存储空间统计" ref="userStorageSpaceStatisticsRef" :charts-id="'chart3'" :bar-type="'barChart'">
          <template #formSlot>
            <el-form :model="userStorageSpaceStatisticsFormData" :inline="true">
              <el-form-item label="用户组：">
                <el-select
                  clearable
                  class="select-width margin-right-12"
                  v-model="userStorageSpaceStatisticsFormData.userGroupId"
                  @change="initUserStorageSpaceStatisticsFun"
                >
                  <el-option
                    v-for="item in userGroupOptions"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="用户：">
                <UserSelect
                  class="select-width"
                  v-model="userStorageSpaceStatisticsFormData.userIds"
                  @change="initUserStorageSpaceStatisticsFun"
                />
              </el-form-item>
            </el-form>
          </template>

        </EchartCard>

      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue';
import ProjectSelect from '@/components/common/projectSelect/index.vue';
import UserSelect from '@/components/common/userSelect/index.vue';
import { queryNodeListApi } from '@/api/project/node';
import { userQueryGroupApi } from '@/api/system/user';
import { getDirectorySizeByUserIdApi, getNodeSizeByNodeTypeApi } from '@/api/data/data';
import EchartCard from '@/components/common/echartCard/index.vue';

const radio = ref('default');

const formData = reactive({
  targetYm: '',
  intervalMonths: 6,
});

const monthList = ref([
  {
    value: 6,
    name: '近6个月',
  },
  {
    value: 12,
    name: '近1年',
  },
  {
    value: 24,
    name: '近2年',
  },
  {
    value: 36,
    name: '近3年',
  },
]);

const radioChangeFun = async () => {
  formData.targetYm = '';

  await initProjectStorageSpaceStatisticsFun();
  await initStatisticsOfSubjectStorageSpaceFun();
  await initUserStorageSpaceStatisticsFun();
};

const intervalMonthsChangeFun = async () => {
  await initProjectStorageSpaceStatisticsFun();
  await initStatisticsOfSubjectStorageSpaceFun();
  await initUserStorageSpaceStatisticsFun();
};

// 项目存储空间统计
const projectStorageSpaceStatisticsRef = ref();
const projectStorageSpaceStatisticsFormData = reactive({
  nodeId: '',
});

const initProjectStorageSpaceStatisticsFun = async () => {

  const xData:any = [];
  const seriesData:any = [];

  const res:any = await getNodeSizeByNodeTypeApi({
    queryNodeType: 'project',
    uuid: projectStorageSpaceStatisticsFormData.nodeId,
    intervalMonths: formData.intervalMonths,
    targetYm: formData.targetYm,
  });

  if (res && res.code === 200) {

  }

  projectStorageSpaceStatisticsRef.value.commonChartRef.disposeEchartsByKey('chart1');

  projectStorageSpaceStatisticsRef.value.commonChartRef.option = {
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      show: false,
      top: '0%',
      left: 'center',

    },
    grid: {
      top: '10%',
      bottom: '10%',
      left: '5%',
      right: '5%',
    },
    xAxis: {
      type: 'category',
      data: xData,
    },
    yAxis: {
      type: 'value',
    },
    dataZoom:
      xData.length > 4
        ? [
          {
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            start: 0,
            end: 100,
            textStyle: {
              color: 'transparent',
            },
            maxValueSpan: 4,
            minValueSpan: 4,
            moveHandleSize: 10,
            height: 0,
            filterMode: 'empty',
            bottom: 15,
          },
        ]
        : null,
    series: seriesData,
  };
  projectStorageSpaceStatisticsRef.value.commonChartRef.initChart();

};

// 学科存储空间统计
const statisticsOfSubjectStorageSpaceRef = ref();
const statisticsOfSubjectStorageSpaceFormData = reactive({
  nodeId: '',
});

const initStatisticsOfSubjectStorageSpaceFun = async () => {
  const xData:any = [];
  const seriesData:any = [];
  const res:any = await getNodeSizeByNodeTypeApi({
    queryNodeType: 'discipline',
    uuid: projectStorageSpaceStatisticsFormData.nodeId,
    intervalMonths: formData.intervalMonths,
    targetYm: formData.targetYm,
  });

  if (res && res.code === 200) {

  }

  statisticsOfSubjectStorageSpaceRef.value.commonChartRef.disposeEchartsByKey('chart2');

  statisticsOfSubjectStorageSpaceRef.value.commonChartRef.option = {
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      show: false,
      top: '0%',
      left: 'center',

    },
    grid: {
      top: '10%',
      bottom: '10%',
      left: '5%',
      right: '5%',
    },
    xAxis: {
      type: 'category',
      data: xData,
    },
    yAxis: {
      type: 'value',
    },
    dataZoom:
      xData.length > 4
        ? [
          {
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            start: 0,
            end: 100,
            textStyle: {
              color: 'transparent',
            },
            maxValueSpan: 4,
            minValueSpan: 4,
            moveHandleSize: 10,
            height: 0,
            filterMode: 'empty',
            bottom: 15,
          },
        ]
        : null,
    series: seriesData,
  };
  statisticsOfSubjectStorageSpaceRef.value.commonChartRef.initChart();
};

// 用户存储空间统计
const userStorageSpaceStatisticsRef = ref();
const userStorageSpaceStatisticsFormData = reactive({
  userIds: '',
  userGroupId: '',
});

const initUserStorageSpaceStatisticsFun = async () => {
  const xData:any = [];
  const seriesData:any = [];
  const res:any = await getDirectorySizeByUserIdApi({
    userIds: userStorageSpaceStatisticsFormData.userIds,
    intervalMonths: formData.intervalMonths,
    targetYm: formData.targetYm,
  });

  if (res && res.code === 200) {

  }

  userStorageSpaceStatisticsRef.value.commonChartRef.disposeEchartsByKey('chart3');

  userStorageSpaceStatisticsRef.value.commonChartRef.option = {
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      show: false,
      top: '0%',
      left: 'center',

    },
    grid: {
      top: '10%',
      bottom: '10%',
      left: '5%',
      right: '5%',
    },
    xAxis: {
      type: 'category',
      data: xData,
    },
    yAxis: {
      type: 'value',
    },
    dataZoom:
    xData.length > 4
      ? [
        {
          type: 'slider',
          show: true,
          xAxisIndex: [0],
          start: 0,
          end: 100,
          textStyle: {
            color: 'transparent',
          },
          maxValueSpan: 4,
          minValueSpan: 4,
          moveHandleSize: 10,
          height: 0,
          filterMode: 'empty',
          bottom: 15,
        },
      ]
      : null,
    series: seriesData,
  };
  userStorageSpaceStatisticsRef.value.commonChartRef.initChart();
};

const disciplineOptions = ref<any>([]);
const getDisciplineOptionsFun = async () => {
  queryNodeListApi({ current: 1, size: 999, nodeType: 'discipline', pid: null }).then((res: any) => {
    if (res.code === 200) {
      disciplineOptions.value = res.data.data.map((item: any) => {
        return {
          label: item.nodeName,
          value: item.id,
        };
      });
    }
  });
};
const userGroupOptions = ref<any>([]);

const getGroupList = async () => {
  const res: any = await userQueryGroupApi({
    current: 1,
    size: 1000,
  });
  if (res && res.code === 200) {
    userGroupOptions.value = [];
    res.data.data.forEach((item: any) => {
      userGroupOptions.value.push({
        label: item.groupName,
        value: item.id,
      });
    });
    if (userGroupOptions.value?.length) {
      userStorageSpaceStatisticsFormData.userGroupId = userGroupOptions.value[0].value;
    }
  }
};

onMounted(async () => {
  await getDisciplineOptionsFun();
  await getGroupList();

  nextTick(() => {
    initProjectStorageSpaceStatisticsFun();
    initStatisticsOfSubjectStorageSpaceFun();
    initUserStorageSpaceStatisticsFun();
  });
});

</script>

<style lang="scss" scoped>
.storage-page {
  width: 100%;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;

  .select-width{
    width: 120px;
  }

  .operate-box{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  padding-right: 10px;

  .targetYm-date{
    display: flex;
    height: 50px;
    display: flex;
    align-items: center;
    margin-right: 12px;

    .title{
      padding-right: 5px;
    }

    :deep(.date-style){
      width: 150px !important;
    }
  }

  }

  .chart-item {
    width: calc(50% - 10px);
    height: 400px;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid #e4e4e4;

    .chart-filter{
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 10px;

      .project-name-content{
        width: 150px;
        margin-left: 10px;
      }

      .mr10{
        margin-right: 10px;

      }
    }

    .chart-content{
      width: 100%;
      height: 100%;
    }
  }
}
</style>
