<template>
  <div class="filter-project-content">
    <el-form :model="filterFormData">
      <el-form-item label="类型：">
        <el-select v-model="filterFormData.ProjectType" @change="projectInfoChangeFun('projectType')">
          <el-option
            v-for="item in projectTypeList"
            :key="item.uuid"
            :label="item.dictName"
            :value="item.dictValue"
          ></el-option>

        </el-select>
      </el-form-item>
      <el-form-item label="项目：">
        <el-select v-model="filterFormData.projectName" filterable @change="projectInfoChangeFun('projectName')">
          <el-option v-for="item in projectList" :key="item.id" :label="item.nodeName" :value="item.uuid"></el-option>
        </el-select>

      </el-form-item>
      <el-form-item label="节点：">
        <el-select v-model="filterFormData.phaseName" @change="projectInfoChangeFun('phaseName')">
          <el-option v-for="item in pheseList" :key="item.id" :label="item.nodeName" :value="item.uuid"></el-option>
        </el-select>

      </el-form-item>
      <!-- <el-form-item label="工位：">
        <el-select v-model="filterFormData.discipline"></el-select>

      </el-form-item>
      <el-form-item label="归属：">
        <el-select v-model="filterFormData.attribution"></el-select>

      </el-form-item> -->
      <el-form-item>
        <div class="check-box">
          <!-- <el-radio-group v-model="filterFormData.taskType">
            <el-radio-button label="全部" value="all" />
            <el-radio-button label="试验" value="test" />
            <el-radio-button label="仿真" value="simulation" />
          </el-radio-group> -->

          <el-dropdown>
            <span class="el-dropdown-link">
              <el-button>
                展开层级
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </el-button>

            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="item in dropdownList" :key="item.value" @click="expendChangeFun(item.value)"> {{
                  item.name }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { getChildrenNodeListApi, queryNodeListApi } from '@/api/project/node';
import { getDictionaryDataApi } from '@/api/system/systemData';
import { ref, reactive, onMounted } from 'vue';

const props = defineProps({
  projectCurrentInfo: {
    type: Object,
    default: () => { },
  },
});
const emits = defineEmits(['filterParamChangeFun', 'expandTree']);

const filterFormData = reactive({
  ProjectType: '',
  projectName: '',
  phaseName: '',
  discipline: 'discipline',
  attribution: 'personal',
  taskType: 'all',
  expendType: 'all',
});

const dropdownList = ref([
  {
    name: '全部',
    value: 'all',
  },
  {
    name: '工位',
    value: 'node',
  },
  {
    name: '任务',
    value: 'task',
  },
  {
    name: '算例',
    value: 'run',
  },
]);

const expendChangeFun = (data: string) => {
  filterFormData.expendType = data;

  emits('expandTree', data);
  // filterParamChangeFun();
};

// const filterParamChangeFun = () => {
//   emits('filterParamChangeFun', filterFormData);
// };

// 获取项目类型列表
const projectTypeList = ref<any>([]);
const getProjectTypeFun = async (val?: any) => {
  const res: any = await getDictionaryDataApi({
    dictClass: 'PROJECT_TYPE',
  });
  if (res && res.code === 200) {
    projectTypeList.value = res.data;

    if (projectTypeList.value.length) {
      if (val) {
        filterFormData.ProjectType = val;
      } else {
        filterFormData.ProjectType = projectTypeList.value[0]?.dictValue;

      }

    }

  } else {
    projectTypeList.value = [];

  }
};

// 获取项目列表
const projectList = ref<any>([]);
const getProjectListFun = async (val?: any) => {
  const res: any = await queryNodeListApi({
    current: 1,
    nodeType: 'project',
    size: 999,
    nodeSubType: filterFormData.ProjectType,
  });

  if (res && res.code === 200) {
    projectList.value = res.data.data;

    if (projectList.value.length) {
      if (val) {
        filterFormData.projectName = val;
      } else {
        filterFormData.projectName = projectList.value[0].id;
      }
    }
  } else {
    filterFormData.projectName = '';
  }
};

// 获取阶段列表
const pheseList = ref<any>([]);

const getPhaseListFun = async (val?: any) => {

  if (filterFormData.projectName) {
    const res: any = await getChildrenNodeListApi({
      current: 1,
      size: 999,
      nodeId: filterFormData.projectName,
      nodeType: 'phase',
    });
    if (res && res.code === 200) {
      pheseList.value = res.data;
      if (pheseList.value.length) {
        if (val) {
          filterFormData.phaseName = val;
        } else {
          filterFormData.phaseName = pheseList.value[0].uuid;
        }
      }

    } else {
      pheseList.value = [];
      filterFormData.phaseName = '';
    }
  } else {
    filterFormData.phaseName = '';
  }
};

const projectInfoChangeFun = async (flag: any) => {
  if (flag === 'projectType') {
    filterFormData.projectName = '';
    filterFormData.phaseName = '';
    await getProjectListFun();
  }
  if (flag === 'projectName') {
    await getPhaseListFun();
  }
  localStorage.setItem('CURRENT_FILTER_RUN_TASK_TREE_PARAM', JSON.stringify(filterFormData));
  emits('filterParamChangeFun', filterFormData);

};

onMounted(async () => {
  const filterData = JSON.parse(localStorage.getItem('CURRENT_FILTER_RUN_TASK_TREE_PARAM') as string);
  if (filterData) {
    await getProjectTypeFun(filterData?.ProjectType);
    await getProjectListFun(filterData?.projectName);
    await getPhaseListFun(filterData?.phaseName);
  } else {
    await getProjectTypeFun();
    await getProjectListFun();
    await getPhaseListFun();

  }
  projectInfoChangeFun('null');

});

</script>

<style lang="scss" scoped>
.filter-project-content {
  width: 100%;

  .check-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

.el-dropdown {
  color: var(--el-color-primary);
  margin-left: 10px;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
