<template>
    <div class="page_item step_1_content">
      <!-- 顶部操作栏 -->
      <div class="page_search">
        <div class="search_content">
          <div class="content_left">
            <!-- 线上匿名 展示; 线下答卷 隐藏 -->
            <el-checkbox :disabled="!store.state.evaluationManageStepData.isAllowDeleteOrEdit" v-if="store.state.evaluationManageStepData.evaluationType === 0 " v-model="store.state.evaluationManageStepData.isHeadTeacherInvolved" >班主任参与评价</el-checkbox>
          </div>
          <div class="content_right">
            <el-button  :class="[store.state.evaluationManageStepData.isAllowDeleteOrEdit ? 'button_border' : 'is-disabled','button_img_prefix']"  
                    @click="store.state.evaluationManageStepData.isAllowDeleteOrEdit ?  OpenAddGradeForm() : ''">
              <AddIcon :iconSize="14" :style="{'--icon-color':store.state.evaluationManageStepData.isAllowDeleteOrEdit ? '#2E64FA' : '#C0C4CC'}"></AddIcon>
              新增年级
            </el-button>
            <el-button  :class="[store.state.evaluationManageStepData.isAllowDeleteOrEdit ? 'button_background' : 'is-disabled']" @click="store.state.evaluationManageStepData.isAllowDeleteOrEdit ? SaveEvaluationData() : ''">完成</el-button>
          </div>
        </div>
      </div>

      <div class="page_jg_20" style="flex-shrink: 0;"></div>

      <!--  年级列表配置 -->
      <div class="option_container">
        <div class="grade_list_option" v-for="(gradeOpt) in gradeOptions" :key="gradeOpt.id">
          
          <!-- 年级头部 -->
          <div class="page_item grade_list_header" >
            <div class="page_search">
              <div class="search_content">
                <div class="content_left">
                  <div class="grade_title">
                    {{ gradeOpt.gradeName }} (共{{ gradeOpt.subjectCount }}科)
                  </div>

                  <!-- 线上匿名 展示; 线下答卷 隐藏 -->
                  <template  v-if="store.state.evaluationManageStepData.evaluationType === 0 ">
                    <el-checkbox :disabled="!store.state.evaluationManageStepData.isAllowDeleteOrEdit" v-model="gradeOpt.selectionStatus" >选科</el-checkbox>
                    <div class="selection_params" v-if="gradeOpt.selectionStatus">
                      <span class="param_text">一共&nbsp;&nbsp;</span>
                      <el-input type="number" 
                        :disabled="!store.state.evaluationManageStepData.isAllowDeleteOrEdit"
                        :max="gradeOpt.subjectCount" :min="1" 
                        v-model="gradeOpt.selectionCount"
                        @blur="HandleInputBlur(gradeOpt.subjectCount,gradeOpt,'selectionCount')">
                      </el-input>
                      <span class="param_text">&nbsp;&nbsp;科，需要选择&nbsp;&nbsp;</span>
                      <el-input type="number" 
                        :disabled="!store.state.evaluationManageStepData.isAllowDeleteOrEdit"
                        :max="gradeOpt.subjectCount" :min="1"  
                        v-model="gradeOpt.needCount" 
                        @blur="HandleInputBlur(gradeOpt.selectionCount,gradeOpt,'needCount')">
                      </el-input>
                      <span class="param_text">&nbsp;&nbsp;科</span>
                    </div>
                  </template>

                </div>
                <div class="content_right table_row_option">
                  <span :class="[store.state.evaluationManageStepData.isAllowDeleteOrEdit ?  'button_delete' : 'editor_disable']" 
                    @click="store.state.evaluationManageStepData.isAllowDeleteOrEdit ? HandleDeleteOpen(gradeOpt,'grade') : ''"> 删除</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 年级内容 -->
          <div class="page_item grade_list_content">
            <el-form 
                :inline="false"
                :model="gradeOpt"  
                ref="formRef" 
            >

              <!-- 科目 -->
              <el-form-item 
                label="科目:"
                prop="subjectData"
                :rules="[]"
              >
                <div class="tag_list">
                  <div class="tag_itm" v-for="tag in gradeOpt.subjectData" :key="tag">
                    {{ tag.name }}
                    <component v-if="store.state.evaluationManageStepData.isAllowDeleteOrEdit" 
                        @click="HandleDeleteOpen(tag,'subject')" 
                        :is="DeleteIcon" :style="{'--icon-color':'#2E64FA'}">
                      </component>
                  </div>

                  <el-button v-if="store.state.evaluationManageStepData.isAllowDeleteOrEdit" 
                    class="button_border  button_img_prefix"
                    @click="OpenAddSubjectForm(gradeOpt,'subject')">
                    <img :src="addIcon" alt="">
                    新增
                  </el-button>
                </div>
              </el-form-item>
          
              <!-- 选科 -->
              <!-- 线上匿名 展示; 线下答卷 隐藏 -->
              <el-form-item 
                v-if="gradeOpt.selectionStatus && store.state.evaluationManageStepData.evaluationType === 0 "
                label="选科:"
                prop="selectSubjectData"
                :rules="[]"
              >
                <div class="tag_list">
                  <div class="tag_itm" v-for="tag in gradeOpt.selectSubjectData" :key="tag">
                    {{ tag.name }}
                    <component v-if="store.state.evaluationManageStepData.isAllowDeleteOrEdit" 
                        @click="HandleDeleteOpen(tag,'selectedSubject')" 
                        :is="DeleteIcon"  :style="{'--icon-color':'#2E64FA'}">
                    </component>
                  </div>
                  
                  <el-button v-if="store.state.evaluationManageStepData.isAllowDeleteOrEdit"  
                    class="button_border  button_img_prefix"
                    @click="OpenAddSubjectForm(gradeOpt,'selectedSubject')">
                    <img :src="addIcon" alt="" style="color:red">
                    新增
                  </el-button>
                </div>
              </el-form-item>
          
              <!-- 班级 -->
              <el-form-item 
                label="行政班:"
                prop="classData"
                :rules="[]"
              >
                <el-checkbox 
                  v-if="gradeOpt?.classData?.length > 0 && store.state.evaluationManageStepData.isAllowDeleteOrEdit "
                  :indeterminate="gradeOpt?.selectedClassData?.length > 0  && gradeOpt?.selectedClassData?.length < gradeOpt?.classData?.length" 
                  style="margin-right: 20px;"
                  :model-value="(gradeOpt?.selectedClassData?.length == gradeOpt?.classData?.length)"
                  @change="(val)=>handleSelectAllClassOrNot(val,gradeOpt)"
                >全选</el-checkbox>

                <el-checkbox-group  
                  :disabled="!store.state.evaluationManageStepData.isAllowDeleteOrEdit"
                  class="check_group_list"
                  v-model="gradeOpt.selectedClassData"
                >
                  <el-checkbox 
                    v-for="checkItem in gradeOpt.classData" 
                    :key="checkItem.id"
                    :label="checkItem.name"
                    :value="checkItem.id"
                  />
                </el-checkbox-group>
              </el-form-item>
          
            </el-form>
          </div>
        </div>
      </div>

      
      <!-- 新增年级弹窗 -->
      <FormDialog 
        :submitLoading="addGradeDialogLoading"
        title="选择年级"
        :defaultFormData="defaultGradeFormData" 
        :formItemList="addGradeFormItemList"
        :visible="addGradeDialogVisible"
        @close="CloseAddGradeForm"
        @confirm="EditSelectedGrade"
      >
      </FormDialog>


      <!-- 配置科目/选科 弹窗 -->
      <FormDialog 
        class="subject_add_form_dialog"
        width="420px"
        :submitLoading="addSubjectDialogLoading"
        :title="subjectTitle"
        :defaultFormData="{}" 
        :formItemList="addSubjectFormItemList"
        :visible="addSubjectDialogVisible"
        @close="CloseAddSubjectForm"
        @confirm="SaveGradeSubjectOpt"
      >
        <template #subject>
            <div class="subject_option_container">
              <div class="subject_all_list">
                <div class="description">
                  <span class="subject_desc">可选科目</span>
                  <!-- 添加科目时候显示 -->
                  <span v-if="currentOpenType == 'subject'" class="operation" @click="HandleAddCustomSubject">+ 新增科目</span>
                </div>

                <div class="optional_tree_option">
                  <div class="select_all">
                    <el-checkbox
                        v-model="isSelectAllSubject"
                        :indeterminate="(selectedTreeData?.length < allTreeData?.length && selectedTreeData?.length !== 0) ?  true :false"
                        @change="SelectAllDataOrNot"
                    >
                        全选
                    </el-checkbox>
                  </div>

                  <div class="tree">
                    <TreeList 
                      v-model:treeRef="optionalSubjetTreeDom"
                      :defaultTreeData="allTreeData" 
                      :showCheckBox="true"
                      :operation="currentOpenType == 'subject' ? 'all' : ''"
                      operationFlagKey="custom"
                      v-model:editItemKey="optionalTreeEditItemKey"
                      v-model:editTaskName="optionalTreeEditTaskName"
                      :showAddOperation="false"
                      @updateSelectedTreeNode="UpdataCheckedSubject"  
                      @updateTreeName="HandleSaveCustomSubject"
                      @deleteTreeNode="DeleteCustomSubject"
                    >
                    </TreeList>
                  </div>
                </div>

              </div>
              
              <div class="subject_selected_list">
                <div  class="description">
                  <span  class="subject_desc">已选科目</span>
                </div>
                <div class="tree">
                  <TreeList 
                    :defaultTreeData="selectedTreeData" 
                    :showCheckBox="false"
                    operation="close"
                    @deleteTreeNode="DeleteCheckedSubject"
                  >
                  </TreeList>
                </div>
              </div>
            </div>
        </template>
      </FormDialog>

      <!-- 删除确认弹窗 -->
      <Dialog 
        :submit-loading="deleteDialogLoading" 
        :visible="deleteDialogVisible" 
        @close="HandleDeleteClose"
        @confirm="HandleDeleteConfirm">
      </Dialog>

      
    </div>
</template>


<script setup lang="ts">
import { ref,onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';

import FormDialog from '@/baseComponents/FormDialog.vue';
import TreeList from '@/baseComponents/TreeList.vue';
import {addGradeFormItemList, addSubjectFormItemList} from './formDialog'
import Dialog from '@/baseComponents/Dialog.vue';

import {
    getEvaluationDataDetailApi, getEvaluationTaskDetailApi,
    addGradeSubjectApi,addGradeSelectedSubjectApi,
    deleteGradeSubjectApi,deleteGradeSelectedSubjectApi,
    addCustomSubjectApi,editCustomSubjectApi,editGradeApi,
    deleteGradeApi,deleteCustomSubjectApi,
    getGradeListApi,getSubjectDataApi,getSubjectSelectedDataApi,
    saveEvaluationDataDetailApi
} from '@/api/evaluationDataComponent.ts'
import { ElMessage } from 'element-plus';
import router from '@/router';

import addIcon from '@/assets/icon/add.svg'
import AddIcon from '@/assets/icon/AddIcon.vue';
import DeleteIcon from '@/assets/icon/DeleteIcon.vue'

interface subjectOrClassDataItm {
   id:string, 
   name:string
}

interface gradeOptItm {
  id:string,
  gradeId: string, 
  gradeName:string,
  subjectCount:string,
  selectionStatus:number |string,    // 0——未勾选  1——已勾选
  selectionCount:number,
  needCount: number,  //
  subjectData:subjectOrClassDataItm[],
  selectSubjectData: subjectOrClassDataItm[],
  classData:  subjectOrClassDataItm[],
  selectedClassData:  subjectOrClassDataItm[],
}

interface treeDataItm {
  id:number|string,
  label:string,
  custom?:number,   // 0 非自定义    1 自定义
}

const route = useRoute();
const store= useStore()
//1.查询评价任务详情 信息
// 班主任是否参与评价  store.state.evaluationManageStepData.isHeadTeacherInvolved 
// store.state.evaluationManageStepData.evaluationType // 评价方式  0-线上匿名，1-线下答卷，2-线上导入，3-线上实名


//2. 获取评价数据详情
const gradeOptions = ref<gradeOptItm[]>([]);  // 年级配置列表数据 
const GetEvaluationDataDetail = async () => {
  let evaluationId = route.query.id; 
  let res = await getEvaluationDataDetailApi(evaluationId);
  if(res?.code === 200){
    gradeOptions.value = res.data.map(item=>{
      return {
        ...item,
        // 寻找默认选中的班级  selectStatus 1 选中  0 未选中
        selectedClassData:item.classData?.filter(classItm=>{
          return Number(classItm?.selectStatus) === 1
        }).map(aim=>aim.id),

        selectionStatus: item.selectionStatus ? true : false
      }
    }) 
    defaultGradeFormData.value.grade = res?.data?.map(item=>{
      return item.id
    }) || []
  }
};



//3. 新增年级弹窗操作
const addGradeDialogVisible = ref(false);
const addGradeDialogLoading = ref(false);
const defaultGradeFormData = ref({ grade:[]})
// 获取可选年级信息
const GetGradeList = async ()=>{
  let res = await getGradeListApi(route.query.id)
  if(res?.code == 200){
    let gradeOpt = res?.data?.map(itm=>{
      return {
        label:itm.gradeName,
        value:itm.id
      }
    })
    addGradeFormItemList.value = addGradeFormItemList.value.map(item=>{
      if(item.key == 'grade'){
        item.selectList = gradeOpt
      }
      return item
    })
  }
}
// 打开新增年级弹窗
const OpenAddGradeForm = async () => {
  console.log('点击了新增年级');
  addGradeDialogVisible.value = true
  await GetGradeList()
};
// 关闭新增年级弹窗
const CloseAddGradeForm = () => {
  addGradeDialogLoading.value = false
  addGradeDialogVisible.value = false
};
// 保存修改后的年级
const EditSelectedGrade =  async()=>{
  addGradeDialogLoading.value = true
  let params = {
     evaluationId: route.query.id,
      gradeData: defaultGradeFormData.value.grade?.map(item=>{
        return {id:item}
      }) || []
  }
  let res = undefined
  try{
    res =  await editGradeApi(params)
  }catch{}

  if(res?.code == 200){
    ElMessage.success(res?.msg)
    CloseAddGradeForm()
    // 重新查询评价数据
    await GetEvaluationDataDetail()
  }else{
    addGradeDialogLoading.value = false
  }
}


// 4. 配置科目/选科 弹窗操作
const optionalSubjetTreeDom = ref()  //可选列表Tree Dom
const addSubjectDialogVisible = ref(false);
const addSubjectDialogLoading = ref(false);
const subjectTitle = ref('');
const currentOpenType = ref('')  //当前打开的弹窗类型  subject 、selectedSubject ，grade ,
const currentOperationRow = ref()  //当前操作的行
const selectedTreeData = ref<treeDataItm[]>([])  //已选列表
const allTreeData = ref<treeDataItm[]>([])   //可选列表
const selectedSubjectIds = ref<any[]>([]) // 当前勾选的科目ids
const optionalTreeEditItemKey = ref('')  //当前编辑的id
const optionalTreeEditTaskName = ref('')  // 当前编辑的名称
// 可选科目列表赋值 和 已选科目列表赋值
const RenderOptionalAndSubjectTree = async (type,row)=>{
  let res = undefined
  switch(type){
    case 'subject':{
      res = await getSubjectDataApi(row.id)
      break
    }
    case 'selectedSubject':{
      res = await getSubjectSelectedDataApi(row.id)
      break
    }
  }
  if(res?.code == 200){
    allTreeData.value = res.data.map(item=>{
      return {
        label:item.name,
        id:item.id,
        custom:Number(item.detailType)===12 ? 1 : 0   //  detailType===12  自定义科目
      }
    })

    selectedTreeData.value = res.data.filter(item=>{
      return item.selectStatus === 1
    })?.map(selectedItm=>{
      return {
        label:selectedItm.name,
        id:selectedItm.id
      }
    }) || []
    isSelectAllSubject.value =  allTreeData.value?.length === selectedTreeData.value?.length && selectedTreeData.value?.length !== 0
  }
}

// 打开配置科目/选科 弹窗
const OpenAddSubjectForm = async (row,type) => {
  console.log('点击了配置科目/选科',row);
  addSubjectDialogVisible.value = true
  currentOpenType.value = type
  currentOperationRow.value = row

  switch(type){
    case 'subject':{
      subjectTitle.value = row.gradeName + ' 配置科目'
      break
    }
    case 'selectedSubject':{
      subjectTitle.value = row.gradeName + ' 配置选科'
      break
    }
  }
  await RenderOptionalAndSubjectTree(type,row)

  // 可选科目的默认勾选赋值 
  let checkedKeys = selectedTreeData.value.map(item=>item?.id)
  selectedSubjectIds.value = checkedKeys
  optionalSubjetTreeDom.value.setCheckedKeys(checkedKeys)

};
// 关闭配置科目/选科 弹窗
const CloseAddSubjectForm = () => {
  addSubjectDialogVisible.value = false
  allTreeData.value = []
  selectedTreeData.value = []

  currentOpenType.value = ''
  currentOperationRow.value  = null

  selectedSubjectIds.value = []
  addSubjectDialogLoading.value = false
};


// 勾选全部科目/或者取消全部科目
const isSelectAllSubject = ref(false)
const SelectAllDataOrNot = (val)=>{
  if(val){
    selectedTreeData.value =  allTreeData.value
    // 勾选所有
  }else{
    // 取消所有
    selectedTreeData.value = []
  }
   selectedSubjectIds.value = selectedTreeData.value?.map(item=>{
      return item.id
    }) || []
    optionalSubjetTreeDom.value.setCheckedKeys(selectedSubjectIds.value)
}


// 更新勾选的 可选科目
const UpdataCheckedSubject = async (params)=>{
  console.log('当前勾选参数',params)
  selectedSubjectIds.value = params?.map(item=>{
    return item.id
  }) || []
  selectedTreeData.value = params
  isSelectAllSubject.value =  allTreeData.value?.length === selectedTreeData.value?.length && selectedTreeData.value?.length !== 0
}

// 删除勾选的可选科目 
const DeleteCheckedSubject = async (param)=>{
  const {node,id} = param
  console.log('准备删除的id',id)
  selectedTreeData.value = selectedTreeData.value.filter(item=>{
    return item?.id !== id
  })
  selectedSubjectIds.value = selectedTreeData.value?.map(item=>{
    return item.id
  }) || []
  optionalSubjetTreeDom.value.setCheckedKeys(selectedSubjectIds.value)
  isSelectAllSubject.value =  allTreeData.value?.length === selectedTreeData.value?.length && selectedTreeData.value?.length !== 0
}

// 新增自定义科目，显示可编辑输入框
const HandleAddCustomSubject = () => {
  if(optionalTreeEditItemKey.value) return

  let length = allTreeData.value.length
  let id = allTreeData.value[length - 1]?.id + `custom_${length}`
  allTreeData.value.push({
    label:`学科名称`,
    id,
    custom:1
  })
  // 把状态变成编辑状态
  optionalTreeEditItemKey.value = id
  optionalTreeEditTaskName.value = '学科名称'
}

// 保存新增的自定义年级 科目
const HandleSaveCustomSubject = async (customSubject: any) => {
  const {id,label} = customSubject
  let res = undefined
  let params = {
    evaluationGradeId: currentOperationRow.value.id,
    name: label
  }
  try{
    if(id.includes('custom_')){
      // 首次新增  自定义
      res = await addCustomSubjectApi(params)
    }else{
      // 修改 自定义
      res = await editCustomSubjectApi({...params,id})
    }
  }catch{}

  if(res?.code == 200){
    optionalTreeEditItemKey.value = ''
    ElMessage.success(res?.msg)
    // 重新查询 科目 / 选科 数据
    await RenderOptionalAndSubjectTree(currentOpenType.value,currentOperationRow.value)
  }else{
    optionalTreeEditItemKey.value = id
  }
}

// 删除自定义年级科目
const DeleteCustomSubject = async (params)=>{
  const {node,id} = params

  let res = await deleteCustomSubjectApi(id)
  if(res?.code == 200){
    ElMessage.success(res?.msg)
    // 重新查询 可选科目
    await RenderOptionalAndSubjectTree(currentOpenType.value,currentOperationRow.value)
  }
}



// 保存配置的年级科目
const SaveGradeSubjectOpt = async ()=>{
  addSubjectDialogLoading.value = true
  let res = undefined
  let addOrUpdateParams = {
      evaluationId:route.query.id,
      evaluationGradeId: currentOperationRow.value.id,
      selectionStatus: currentOperationRow.value.selectionStatus ? 1 : 0,
      selectionCount:currentOperationRow.value.selectionCount,
      needCount:currentOperationRow.value.needCount,
      subjectIds: selectedSubjectIds.value
    }

  try{
    switch(currentOpenType.value){
      case 'subject':{
        res = await addGradeSubjectApi(addOrUpdateParams)
        break
      }
      case 'selectedSubject':{
        res = await addGradeSelectedSubjectApi(addOrUpdateParams)
        break
      }
    }
  }catch{}
 
  if(res?.code == 200){
    ElMessage.success(res?.msg)
    CloseAddSubjectForm()
    await GetEvaluationDataDetail()
  }else{
    addSubjectDialogLoading.value = false
  }
}


// 5. 处理班级的全选和全不选
const handleSelectAllClassOrNot = (selectedValue: any[], gradeOption: any) => {
  console.log('选中的值:', selectedValue);
  console.log('已选的值',gradeOption.selectedClassData)
  
  let selectedClassData = []

  if(selectedValue){
    // 全选
    selectedClassData = gradeOption.classData.map(item => item.id);
  }else{
    // 取消全选
    selectedClassData = []
  }

  console.log('全选/取消后的选项值',selectedClassData)
  gradeOptions.value = gradeOptions.value.map(item => {
    if(item.id === gradeOption.id){
      return {
        ...item,
        selectedClassData,

      }
    }
    return item;
  })



};


// 6. 删除弹窗处理逻辑
const deleteDialogVisible = ref(false);
const deleteDialogLoading = ref(false);
const currentDeleteRow = ref(); // 当前编辑的行数据
// 删除弹窗 确认逻辑
const HandleDeleteConfirm = async () => {
  deleteDialogLoading.value = true

  let res = undefined
  switch(currentOpenType.value){
    case 'grade':  // 年级删除
      res = await deleteGradeApi(currentDeleteRow.value?.id)
      break
    case 'subject':  // 科目删除
      res = await deleteGradeSubjectApi(currentDeleteRow.value?.id)
      break
    case 'selectedSubject':  // 选科删除
      res = await deleteGradeSelectedSubjectApi(currentDeleteRow.value?.id)
      break
  }
  if(res?.code == 200){
    ElMessage.success(res?.msg)
    HandleDeleteClose()
    // 重查评价数据
    await GetEvaluationDataDetail()
  }else{
    deleteDialogLoading.value = false
  }
};
// 关闭 删除弹窗
const HandleDeleteClose = () => {
  console.log('关闭删除弹窗');
  // 在这里处理关闭删除弹窗的逻辑
  deleteDialogVisible.value = false;
  currentDeleteRow.value = null
  currentOpenType.value = ''
  deleteDialogLoading.value = false
};
// 打开 删除弹窗
const HandleDeleteOpen = (row: any,type) => {
  console.log('打开删除弹窗');
  currentOpenType.value = type
  // 在这里处理打开删除弹窗的逻辑
  deleteDialogVisible.value = true;
  currentDeleteRow.value = row;

};


// 7. 保存评价数据
const SaveEvaluationData = async ()=>{
  let params = {
    evaluationId: route.query.id,
    classMasterStatus: store.state.evaluationManageStepData.isHeadTeacherInvolved ? 1 : 0,
    gradeData: gradeOptions.value.map(item=>{
      if(item.selectionStatus){
        return {
          id: item.id,
          gradeName:item.gradeName,
          selectionStatus: item.selectionStatus ? 1 : 0,
          selectionCount: item.selectionCount,
          needCount:item.needCount,
          classIds: item.selectedClassData
        }
      }else{
        return {
          id: item.id,
          gradeName:item.gradeName,
          selectionStatus: item.selectionStatus ? 1 : 0,
          classIds: item.selectedClassData
        }
      }
    })
  }

  let res = await saveEvaluationDataDetailApi(params)
  if(res?.code == 200){
    // 完成后,重新查询 任务管理基础信息,并跳到下一步
    await store.dispatch('updateEvaluationManageStepData',route.query.id)
    store.commit('updateEvaluationManageStepData',
                {currentActiveStepName:'teachingRelationship'})
    router.push(`teachingRelationship?id=${route.query.id}`)
  }

}

// input 输入框最大值限制
const HandleInputBlur = (maxNum:number,row,key)=>{
  if(row[key] > maxNum){
    row[key] = maxNum
  }
}



onMounted(async() => {
  console.log('组件挂载完成');
  await GetEvaluationDataDetail()
});

</script>


<style lang="scss" scoped>
/* 内容区样式 */
.step_1_content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;



  .option_container{
    display: flex;
    flex-direction: column;
    gap:20px;

    overflow-y: auto;

    .grade_list_option{
      .grade_list_header{
        padding:16px;
        border:solid #E4E7ED 1px;
        border-bottom:none;
        border-radius:10px 10px 0 0;
        .search_content{
          .content_left{
            align-items: center;

            .selection_params{
              font-size: 14px;
              color: #333333;
            }

          }
        }
      }
      .grade_list_content{
        border:solid #E4E7ED 1px;
        border-radius:0 0 10px 10px;

        .tag_list{
          display: flex;
          flex-wrap: wrap;
          gap: 16px;
          align-items: center;

          .tag_itm {
            border:solid #2E64FA 1px;
            background-color: white;
            color:#2E64FA;
            font-size: 14px;
            padding:0px 12px;
            height:36px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap:4px;
            border-radius: 4px;
          }


          .button-new-tag{
            background-color: #F5F7FA;
            color:#2E64FA;
            border:none;
            height: 28px;
            padding:0 10px;
            font-size: 12px;
          }
        }        
      }
    }
  }


  .subject_option_container{
    display: flex;
    gap: 20px;
    width: 100%;
    color:#333333;


    .subject_all_list,
    .subject_selected_list{
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;

      >div.description{
        display: flex;
        justify-content: space-between;

        .subject_desc{
          font-weight: 600;
          font-size: 16px;
          color: #333333;
        }
        .operation{
          font-weight: 600;
          font-size: 14px;
          color: #2E64FA;
          cursor: pointer;
        } 
      }

      .select_all{
        border:solid #E4E7ED 1px;
        border-bottom: none;
        padding-left: 24px;
        
      }
      .tree{
        flex:1 1;
        border:solid #E4E7ED 1px;
      }
    }
  }

  .button_img_prefix {
    :deep(>span){
      // border:solid red 1px;
      display: flex;
      gap:4px;
      img{
        width: 14px !important;
        height: 14px !important;
      }
    }
  }



}

.subject_add_form_dialog{
  :deep(.el-dialog){
    .el-dialog__body{
      padding: 20px;
      .el-form .el-form-item{
        margin: 0px;
      }
    }
  }
}
</style>