<template>
  <div class="chart-container">
    <EchartCard
      :title="title"
      ref="chartRef"
      :charts-id="chartsId"
      :bar-type="barType"
      @refresh="refreshChart"
    >
      <template #formSlot>
        <el-form :model="formData" label-width="auto">
          <el-form-item v-if="filterItems.includes('userGroup')" label="用户组">
            <el-select v-model="formData.userGroupId" @change="handleUserGroupChange">
              <el-option
                v-for="item in userGroupOptions"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="filterItems.includes('user')" label="用户">
            <userSelectByGroup
              :groupId="formData.userGroupId"
              v-model="formData.userId"
              @change="filterChange"
            />
          </el-form-item>
          <el-form-item v-if="filterItems.includes('projectName')" label="项目名称">
            <ProjectSelect
              v-model="formData.tag1"
              :multiple="projectMultiple"
              @change="filterChange"
            />
          </el-form-item>
          <el-form-item v-if="filterItems.includes('projectCode')" label="项目编号">
            <ProjectSelect
              v-model="formData.tag1"
              :showCodeList="true"
              :multiple="projectMultiple"
              @change="filterChange"
            />
          </el-form-item>
          <el-form-item v-if="filterItems.includes('discipline')" label="学科">
            <el-select v-model="formData.discipline" clearable @change="filterChange">
              <el-option
                v-for="item in DISCIPLINE_TYPE.A"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <slot name="extraFilters" :formData="formData" />
        </el-form>
      </template>
    </EchartCard>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue';
import EchartCard from '@/components/common/echartCard/index.vue';
import userSelectByGroup from '@/components/common/userSelect/userSelectByGroup.vue';
import ProjectSelect from '@/components/common/projectSelect/index.vue';
import { userQueryGroupApi } from '@/api/system/user';
import { useDict } from '@/utils/useDict';

const { DISCIPLINE_TYPE } = useDict('DISCIPLINE_TYPE');
const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  chartsId: {
    type: String,
    required: true,
  },
  barType: {
    type: String,
    default: 'barChart',
  },
  projectMultiple: {
    type: Boolean,
    default: false,
  },
  filterItems: {
    type: Array,
    default: () => [],
  },
  option: {
    type: Object,
    default: () => {},
  },
});

const emit = defineEmits(['update']);
const chartRef = ref();
const userGroupOptions = ref<any>([]);
const formData = ref({
  userGroupId: '',
  userId: '',
  tag1: '',
  discipline: '',
});

const getGroupList = async () => {
  const res: any = await userQueryGroupApi({
    current: 1,
    size: 1000,
  });
  if (res && res.code === 200) {
    userGroupOptions.value = res.data.data.map((item: any) => ({
      label: item.groupName,
      value: item.id,
    }));
    if (userGroupOptions.value?.length && props.filterItems.includes('userGroup')) {
      formData.value.userGroupId = userGroupOptions.value[0].value;
      emit('update', formData.value);
    }
  }
};

// 用户组改变
const handleUserGroupChange = () => {
  formData.value.userId = '';
  emit('update', formData.value);
};
// 筛选条件改变
const filterChange = () => {
  emit('update', formData.value);
};

// 初始化图表
const refreshChart = async () => {
  if (!chartRef.value?.commonChartRef) return;
  chartRef.value.commonChartRef.disposeEchartsByKey(props.chartsId);
  chartRef.value.commonChartRef.option = props.option;
  chartRef.value.commonChartRef.initChart();
};
// 监听配置项
watch(
  () => props.option,
  async () => {
    await refreshChart();
  }
  // { deep: true } // 页面会卡死
);
onMounted(async () => {
  if (props.filterItems.includes('userGroup')) {
    await getGroupList();
  } else {
    emit('update', formData.value);
  }
});
</script>

<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>
