<template>
  <div class="comp-content comp-tree-case-table">
    <TreeTable ref="TreeTableRef" :tableName="tableName" :data="treeData" :editMode="editMode" v-bind="$attrs">
      <!-- 名称 -->
      <template #nodeName="{ row ,column}">
        <TreeEditItem
          :data="row[column.field]"
          :editMode="editMode"
        >
          <div class="node-name">
            <el-icon v-if="row.nodeType === NODE_TYPE.TASK" :size="16" class="blue">
              <Document />
            </el-icon>
            <el-icon v-else-if="row.nodeType === NODE_TYPE.PERFORMANCE" :size="16" class="blue">
              <Operation />
            </el-icon>
            <el-icon v-else :size="16" class="blue">
              <Folder />
            </el-icon>
            <span class="name">{{ row.nodeName }}</span>
          </div>
        </TreeEditItem>
      </template>
      <template #nodeName-edit="{ row, column }">
        <el-input v-model="row[column.field]" size="small" placeholder="请输入" />
      </template>
      <!-- 英文名 -->
      <template #englishName="{ row, column }">
        <TreeEditItem
          :data="row[column.field]"
          :editMode="editMode"
        />
      </template>
      <template #englishName-edit="{ row }">
        <el-input v-model="row.englishName" size="small" placeholder="请输入" />
      </template>
      <!-- 编码 -->
      <template #nodeCode="{ row, column }">
        <TreeEditItem
          :data="row[column.field]"
          :editMode="editMode"
        />
      </template>
      <template #nodeCode-edit="{ row }">
        <el-input v-model="row.nodeCode" size="small" placeholder="请输入" />
      </template>
      <template #pMemberIds="{ row }">
        {{ disposeMemberList(row,'pMemberList') }}
      </template>
      <template #pMemberIds-edit="{ row,column }">
        <userSelect @change="(data) => changeUserFun(row,data,'pMemberList','pMemberIds')" :multiple="true" v-model="row[column.field]"></userSelect>
      </template>
      <template #eMemberIds="{ row }">
        {{ disposeMemberList(row,'eMemberList') }}
      </template>
      <template #eMemberIds-edit="{ row,column }">
        <userSelect @change="(data) => changeUserFun(row,data,'eMemberList','eMemberIds')" :multiple="true" v-model="row[column.field]"></userSelect>
      </template>
      <!-- 计划开始时间 -->
      <template #beginTime="{ row }">
        <TreeEditItem
          v-if="[NODE_TYPE.TASK, NODE_TYPE.PERFORMANCE].includes(row.nodeType)"
          :data="row.beginTime"
          :editMode="editMode"
        />
      </template>
      <template #beginTime-edit="{ row }">
        <el-date-picker
          v-model="row.beginTime"
          type="datetime"
          placeholder="请选择"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          clearable
        />
      </template>
      <!-- 计划结束时间 -->
      <template #endTime="{ row }">
        <TreeEditItem
          v-if="[NODE_TYPE.TASK, NODE_TYPE.PERFORMANCE].includes(row.nodeType)"
          :data="row.endTime"
          :editMode="editMode"
        />
      </template>
      <template #endTime-edit="{ row }">
        <el-date-picker
          v-model="row.endTime"
          type="datetime"
          placeholder="请选择"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          clearable
        />
      </template>
      <!-- 达标方式 -->
      <template #method="{ row,column }">
        <TreeEditItem v-if="[NODE_TYPE.PERFORMANCE].includes(row.nodeType) || isMixedNodeType(row.nodeType)" :data="row[column.field]" :editMode="editMode">
          <dictLabel v-model="row[column.field]" dictName="COMPLIANCE_METHOD" />
        </TreeEditItem>
      </template>
      <template #method-edit="{ row,column }">
        <dictLabel v-model="row[column.field]" dictName="COMPLIANCE_METHOD" :editable="true" />
      </template>
      <!-- 目标值 -->
      <template #highValue="{ row,column }">
        <TreeEditItem v-if="[NODE_TYPE.PERFORMANCE].includes(row.nodeType) || isMixedNodeType(row.nodeType)" :data="row[column.field]" :editMode="editMode">
        </TreeEditItem>
      </template>
      <template #highValue-edit="{ row,column }">
        <el-input-number v-if="row.performanceType==='1'" v-model="row[column.field]" size="small" placeholder="请输入" />
        <el-input v-else v-model="row[column.field]" size="small" placeholder="请输入" />
      </template>
      <!-- 类型 -->
      <template #nodeType="{ row, column }">
        <dictLabel v-model="row[column.field]" :options="allNodeTypeOptions" />
      </template>
      <!-- 任务模板 -->
      <template #flowTemplate="{ row, column }">
        <TreeEditItem
          v-if="[NODE_TYPE.TASK].includes(row.nodeType) || isMixedNodeType(row.nodeType)"
          :data="row[column.field]"
          :editMode="editMode"
        >
          <flowTemplateSelect v-model="row[column.field]" :editable="false" size="small"/>
        </TreeEditItem>
      </template>
      <template #flowTemplate-edit="{ row, column }">
        <flowTemplateSelect v-model="row[column.field]" size="small" />
      </template>
      <!-- 标准规范 -->
      <template #standard="{ row, column }">
        <TreeEditItem
          v-if="[NODE_TYPE.TASK].includes(row.nodeType) || isMixedNodeType(row.nodeType)"
          :data="row[column.field]"
          :editMode="editMode"
        >
          <knowledgeSelect v-model="row[column.field]" v-model:model-name="row.standard" :editable="false" size="small"/>
        </TreeEditItem>
      </template>
      <template #standard-edit="{ row, column }">
        <knowledgeSelect v-model="row[column.field]" size="small"/>
      </template>
      <!-- 分析目标 -->
      <template #analyseTarget="{ row, column }">
        <TreeEditItem
          v-if="[NODE_TYPE.TASK].includes(row.nodeType) || isMixedNodeType(row.nodeType)"
          :data="row[column.field]"
          :editMode="editMode"
        />
      </template>
      <template #analyseTarget-edit="{ row , column}">
        <el-input v-model="row[column.field]" size="small" placeholder="请输入" />
      </template>
      <!-- 置信度 -->
      <template #confidence="{ row, column }">
        <TreeEditItem
          v-if="[NODE_TYPE.TASK].includes(row.nodeType) || isMixedNodeType(row.nodeType)"
          :data="row[column.field]"
          :editMode="editMode"
        />
      </template>
      <template #confidence-edit="{ row , column}">
        <el-input-number v-model="row[column.field]" size="small" placeholder="请输入" />
      </template>
      <!-- 难度系数 -->
      <template #difficult="{ row, column }">
        <TreeEditItem
          v-if="[NODE_TYPE.TASK].includes(row.nodeType) || isMixedNodeType(row.nodeType)"
          :data="row[column.field]"
          :editMode="editMode"
        />
      </template>
      <template #difficult-edit="{ row , column}">
        <el-input-number v-model="row[column.field]" size="small" placeholder="请输入" />
      </template>
      <!-- 标准工时 -->
      <template #days="{ row, column }">
        <TreeEditItem
          v-if="[NODE_TYPE.TASK].includes(row.nodeType) || isMixedNodeType(row.nodeType)"
          :data="row[column.field]"
          :editMode="editMode"
        />
      </template>
      <template #days-edit="{ row , column}">
        <el-input-number v-model="row[column.field]" size="small" placeholder="请输入" />
      </template>
      <!-- 指标类型 -->
      <template #performanceType="{ row, column }">
        <TreeEditItem
          v-if="[NODE_TYPE.PERFORMANCE].includes(row.nodeType) || isMixedNodeType(row.nodeType)"
          :data="row.performanceType"
          :editMode="editMode"
        >
          <dictLabel v-model="row[column.field]" dictName="PERFORMANCE_TYPE" />
        </TreeEditItem>
      </template>
      <template #performanceType-edit="{ row, column }">
        <dictLabel v-model="row[column.field]" dictName="PERFORMANCE_TYPE" :editable="true" />
      </template>
      <!-- 指标单位 -->
      <template #unit="{ row, column }">
        <TreeEditItem v-if="[NODE_TYPE.PERFORMANCE].includes(row.nodeType) || isMixedNodeType(row.nodeType)" :data="row.unit" :editMode="editMode">
          <dictLabel v-model="row[column.field]" dictName="PERFORMANCE_UNIT" />
        </TreeEditItem>
      </template>
      <template #unit-edit="{ row, column }">
        <dictLabel v-model="row[column.field]" dictName="PERFORMANCE_UNIT" :editable="true" />
      </template>
      <!-- 分析软件 -->
      <template #analyseSoftware="{ row, column }">
        <TreeEditItem v-if="[NODE_TYPE.TASK].includes(row.nodeType) || isMixedNodeType(row.nodeType)" :data="row.analyseSoftware" :editMode="editMode">
          <dictLabel v-model="row[column.field]" dictName="ANALYSIS_SOFTWARE" />
        </TreeEditItem>
      </template>
      <template #analyseSoftware-edit="{ row, column }">
        <dictLabel v-model="row[column.field]" dictName="ANALYSIS_SOFTWARE" :editable="true" :multiple="true" />
      </template>
      <!-- 3d图示 -->
      <template #imageFileId="{ row, column }">
        <TreeEditItem v-if="[NODE_TYPE.TASK].includes(row.nodeType) || isMixedNodeType(row.nodeType)" :data="row[column.field]" :editMode="editMode">
          <uploadImg v-model="row[column.field]" />
        </TreeEditItem>
      </template>
      <template #imageFileId-edit="{ row, column }">
        <uploadImg v-model="row[column.field]" />
      </template>
      <!-- 仿真能力 -->
      <template #bCapacity="{ row, column }">
        <TreeEditItem v-if="[NODE_TYPE.TASK].includes(row.nodeType) || isMixedNodeType(row.nodeType)" :data="row[column.field]" :editMode="editMode">
          <dictLabel v-model="row[column.field]" dictName="SIMULATION_CAPACITY" />
        </TreeEditItem>
      </template>
      <template #bCapacity-edit="{ row, column }">
        <dictLabel v-model="row[column.field]" dictName="SIMULATION_CAPACITY" :editable="true" />
      </template>
      <!-- 部 -->
      <template #department="{ row, column }">
        <TreeEditItem v-if="[NODE_TYPE.TASK].includes(row.nodeType) || isMixedNodeType(row.nodeType)" :data="row.department" :editMode="editMode">
          <dictLabel v-model="row[column.field]" dictName="DEPARTMENT_LIST" />
        </TreeEditItem>
      </template>
      <template #department-edit="{ row, column }">
        <dictLabel v-model="row[column.field]" dictName="DEPARTMENT_LIST" :editable="true" />
      </template>
      <!-- 科 -->
      <template #section="{ row, column }">
        <TreeEditItem v-if="[NODE_TYPE.TASK].includes(row.nodeType) || isMixedNodeType(row.nodeType)" :data="row.section" :editMode="editMode">
          <dictLabel v-model="row[column.field]" dictName="SECTION_LIST" />
        </TreeEditItem>
      </template>
      <template #section-edit="{ row, column }">
        <dictLabel v-model="row[column.field]" dictName="SECTION_LIST" :editable="true" />
      </template>
      <!-- 组 -->
      <template #group="{ row, column }">
        <TreeEditItem v-if="[NODE_TYPE.TASK].includes(row.nodeType) || isMixedNodeType(row.nodeType)" :data="row[column.field]" :editMode="editMode">
          <dictLabel v-model="row[column.field]" dictName="GROUP_LIST" />
        </TreeEditItem>
      </template>
      <template #group-edit="{ row, column }">
        <dictLabel v-model="row[column.field]" dictName="GROUP_LIST" :editable="true" />
      </template>
      <!-- 描述 -->
      <template #description="{ row }">
        <TreeEditItem
          v-if="[NODE_TYPE.TASK, NODE_TYPE.PERFORMANCE].includes(row.nodeType) || isMixedNodeType(row.nodeType)"
          :data="row.description"
          :editMode="editMode"
        />
      </template>
      <template #description-edit="{ row }">
        <el-input v-model="row.description" size="small" placeholder="请输入" />
      </template>
      <!-- 插槽 -->
      <template v-for="(name) in Object.keys($slots)" :key="name" #[name]="scope">
        <slot :name="name" v-bind="scope" />
      </template>
    </TreeTable>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed, onMounted } from 'vue';
import TreeTable from '@/components/common/table/treeTable.vue';
import { Folder, Document, Operation } from '@element-plus/icons-vue';
import TreeEditItem from '@/components/common/table/treeEditItem.vue';
import { NODE_TYPE, nodeTypeList } from '@/utils/enum/node';
import { isMixedNodeType } from '@/utils/node';
import { cloneDeep } from 'lodash-es';
import dictLabel from './dictLabel.vue';
import { poolCategoryTypeOptions } from '@/utils/project';
import flowTemplateSelect from './flowTemplateSelect.vue';
import knowledgeSelect from './knowledgeSelect.vue';
import uploadImg from '@/components/common/table/uploadImg.vue';
import { useTaskStore } from '@/stores/taskPool';
import userSelect from '../userSelect/index.vue';
import { disposeMemberList } from '@/views/task/projectDetail/components/project';
import { getMemberListIds } from '@/utils/task';

const TreeTableRef = ref<any>();

interface Props {
  tableName: string;
  data: any;
  editMode?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  tableName: '',
  data: [],
  editMode: false,
});

const treeData = ref<any>([]);
const taskStore = useTaskStore();

const treeDataFormatFun = (data: any, build: any, pId: any) => {
  data.forEach((item: any) => {
    item.parentId = pId;
    const children = cloneDeep(item.children);
    item.children = [];
    build.push(item);
    if (children && children.length > 0) {
      treeDataFormatFun(children, build, item.fakeId);
    }
  });
  return build;
};

const changeUserFun = (row:any, data:any, listKey:string, idKey:string) => {
  console.log('changeUserFun', row, data);
  row[listKey] = data;
  row[idKey] = getMemberListIds(data);
};

watch(() => props.data, (val: any) => {
  treeData.value = treeDataFormatFun(val, [], '0');
}, { immediate: true });

const getCheckboxRecordsFun = (isFull: boolean) => {
  if (TreeTableRef.value) {
    return TreeTableRef.value.getCheckboxRecordsFun(isFull);
  }
};

const removeFun = (data: any) => {
  if (TreeTableRef.value) {
    return TreeTableRef.value.removeFun(data);
  }
};

const allNodeTypeOptions = computed(() => {
  const options: any = poolCategoryTypeOptions.value;
  return nodeTypeList.concat(options);

});
onMounted(() => {
  taskStore.fetchTemplates();
});
defineExpose({
  getCheckboxRecordsFun,
  removeFun,
  TreeTableRef,
});
</script>

<style lang="scss" scoped>
.comp-tree-case-table {
  width: 100%;
  height: 100%;

  .node-name {
    display: flex;
    align-items: center;

    .blue {
      color: var(--el-color-primary);
    }

    .name {
      padding-left: 4px;
    }
  }
}
</style>
