<template>
  <Dialog
    v-if="hasDialog"
    v-model="visible"
    show-footer
    show-cancel-button
    show-confirm-button
    :diaTitle="$t('知识库.上传')"
    @show="onShowFun"
    :confirm-closable="false"
  >
    <template #default>
      <TableForm ref="tableFormRef" :tableName="tableName" @change="onFormChangeFun">
        <template #form-analysisDirectionId>
          <node-level-select
            v-model="form.analysisDirectionId"
            :parentId="form.projectId"
            :nodeType="disciplineNodeType"
          />
        </template>
      </TableForm>
    </template>
    <template #footer>
      <div>
        <el-button @click="onCancelFun">{{ $t('通用.取消') }}</el-button>
        <el-button type="primary" @click="onConfirmFun">{{ $t('通用.确定') }}</el-button>
      </div>
    </template>
  </Dialog>
  <TableForm v-else ref="tableFormRef" :tableName="tableName" @change="onFormChangeFun" :showDisabled="true">
    <template #form-analysisDirectionId>
      <node-level-select
        v-model="form.analysisDirectionId"
        :parentId="form.projectId"
        :nodeType="disciplineNodeType"
        disabled
      />
    </template>
  </TableForm>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, nextTick, watchEffect } from 'vue';
import Dialog from '@/components/common/dialog/index.vue';
import nodeLevelSelect from '@/components/project/nodeLevelSelect.vue';
import { CommonStore } from '@/stores/common';
import TableForm from '@/components/common/table/tableForm.vue';

const commonStore = CommonStore();

interface Props {
  hasDialog?:boolean;
  modelValue?: boolean;
  detail?: any;
  folder?: any;
  tableName: string;
}

const props = withDefaults(defineProps<Props>(), {
  hasDialog: true,
  modelValue: false,
  detail: null,
  folder: null,
  tableName: '',
});
const emits = defineEmits(['update:modelValue', 'confirm']);
const visible = computed({
  get: () => props.modelValue,
  set: (val) => emits('update:modelValue', val),
});

interface RuleForm {
  file: File | null
  fileList: any[] | null
  fileName: string | null
  fileSize?: string | null
  dirName: string | null
  projectId: string | null
  analysisDirectionId: string | null
  remarks: string | null
  userId: string | null
  userList: Array<any> | null
  templateName?: string | null
  templateId?: string | null
}
const form = ref<RuleForm>({
  file: null,
  fileList: [],
  fileName: null,
  fileSize: null,
  dirName: null,
  projectId: null,
  analysisDirectionId: null,
  remarks: null,
  userId: null,
  userList: null,
  templateName: null,
  templateId: null,
});

const onShowFun = () => {
  resetFun();
  if (props.detail && props.detail.id) {
    initData();
  }
};
const initData = () => {
  const file = [{
    name: props.detail?.originalName,
  }];
  tableFormRef.value?.setFormDataFun({ ...props.detail, ...{ originalName: file } });
  form.value.projectId = props.detail?.projectId;
  form.value.analysisDirectionId = props.detail?.analysisDirectionId;
};
watchEffect(() => {
  nextTick(() => {
    if (props.detail && props.detail.id) {
      initData();
    }
  });
});
const resetFun = () => {
  tableFormRef.value?.resetFun();
};
const disciplineNodeType = ref('');
const getDisciplineNodeTypeFun = () => {
  const poolCategoryTypeList: any = commonStore.getDictData('POOL_CATEGORY_TYPE');
  disciplineNodeType.value = poolCategoryTypeList.A.find((item: any) => item.label === '学科').value ;
};
const onFormChangeFun = (data:any) => {
  form.value = tableFormRef.value?.getFormDataFun();
  if (data.key === 'projectId') {
    form.value.analysisDirectionId = '';
  }
  if (data.key === 'templateId') {
    form.value.templateName = data?.val?.label;
  }
};
const tableFormRef = ref<any>();
const onCancelFun = () => {
  visible.value = false;
};
const onConfirmFun = async () => {
  const valid = await tableFormRef.value?.validateFun();
  if (valid) {
    const formData = tableFormRef.value?.getFormDataFun();
    if (formData.originalName && formData.originalName.length > 0) {
      formData.file = formData.originalName.map((item:any) => {
        return {
          fileName: item.raw?.name,
          size: item.raw?.size,
        };
      });
    }
    emits('confirm', formData);
  }
};
onMounted(() => {
  getDisciplineNodeTypeFun();

});
</script>
<style lang="scss" scoped>
.upload {
  width: 100%;
}

</style>
