<route lang="yaml">
  name: importFile
</route>

<script lang="ts" setup name="importFile">
import { ref } from "vue";
import { useRoute,useRouter } from "vue-router"
import useUserStore from "@/store/modules/user";
import { ElMessage, ElMessageBox } from "element-plus";
import Tabs from '@/components/Tabs/index.vue'
import Table from '@/components/Table/index.vue'
import Dialog from '@/components/Dialog/index.vue'
import useCatchStore from "@/store/modules/catch";
import { download, downFile,getDownloadUrl } from '@/utils/common'
import {
  addImportData,
  deleteImportData,
  getImportData,
  exportDictionary,
  getStandardSetTree,
  getDictionaryTree
} from '@/api/modules/dataStandardService'
import { getImageContent } from "@/api/modules/queryService";
import { commonPageConfig } from '@/utils/enum';

const { proxy } = getCurrentInstance() as any;

const userStore = useUserStore()
const route =  useRoute()
const router = useRouter()
const isfileImport = route.query.isfileImport
const userData = JSON.parse(userStore.userData)
const cacheStore = useCatchStore()
const standardSetList = ref([])
const standardSetGuid = ref('')
const dictionaryList = ref([])
const dictionaryGuid = ref('')
const tabsActiveName = ref('')
const uploadSetting: any = ref({})
const importType = ref('')
const defaulttabs = [
    { label: '标准集导入', name: 'standard' },
    { label: '字段标准导入', name: 'field' },
    { label: '命名标准导入', name: 'naming' },
    { label: '数据字典导入', name: 'dictionary' },
    // { label: '质量模型导入', name: 'qualityModelGroup' },
    // { label: '质量规则导入', name: 'qualityRule' },
  ]
const importTabs = [
    { label: '导入文件数据', name: 'importFile' },
    // { label: '质量模型导入', name: 'qualityModelGroup' },
    // { label: '质量规则导入', name: 'qualityRule' },
  ]
const tabsInfo = ref({
  activeName: '',
  tabs: isfileImport?importTabs:defaulttabs
})

const currTableData: any = ref<Object>({});
const page = ref(commonPageConfig);
const selectRowData = ref([])
const tableInfo = ref({
  id: 'data-source-table',
  multiple: true,
  fields: [
    { label: "序号", type: "index", width: 56, align: "center" },
    { label: "文件名称", field: "fileName", width: 240, },
    { label: "状态", field: "importState", type: 'tag', width: 110, align: 'center' },
    { label: "导入结果", field: "importMessage", width: 280 },
    { label: "导入时间", field: "createTime", width: 180 },
  ],
  data: [],
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 220,
    fixed: 'right',
    btns: (scope) => {
      const row = scope.row
      let btnsArr = [
        { label: '下载文件', value: 'export_file' },
        { label: '删除', value: 'delete' }
      ]
      if (row.importState != 0 && row.importState != 1) {
        btnsArr.splice(1, 0, { label: '下载异常数据', value: 'export_abnormal_data' })
      }
      return btnsArr
    },
  },
  loading: false
})

const uploadFiles = ref([])
const uploadSteps: any = ref([])
const uploadInfo = ref({
  type: 'upload',
  title: '',
  col: '',
  uploadInfo: {
    id: 'upload-file-form',
    type: 'panel',
    steps: [],
    extraParams: {},
  },
})

const dialogInfo: any = ref({
  visible: false,
  size: 700,
  direction: "column",
  header: {
    title: "新建",
  },
  type: 'upload',
  contents: [
    uploadInfo.value
  ],
  footer: {
    visible: true,
    btns: [
      { type: "default", label: "取消", value: "cancel" },
      { type: "primary", loading: false, label: "开始导入", value: "submit" },
    ],
  },
})

// 获取所有标准集
const getSetList = () => {
  let params: any = {}
  params.pageIndex = 0;
  params.pageSize = 0;
  getStandardSetTree().then((res: any) => {
    if (res.code == proxy.$passCode) {
      const data = res.data || []
      data.map(item => {
        item.label = item.standardName
        item.value = item.guid
      })
      standardSetList.value = data
    } else {
      ElMessage({
        type: 'info',
        message: res.msg,
      })
    }
  })
}

// 获取所有数据字典
const getDictList = () => {
  const params = {
    paramCode: 'data_structure_code'
  }
  getDictionaryTree(params).then((res: any) => {
    if (res.code == proxy.$passCode) {
      const data = res.data ?? []
      const treeList = data.filter(item => item.children && item.children.length)
      dictionaryList.value = treeList
    } else {
      ElMessage({
        type: 'error',
        message: res.msg,
      })
    }
  })
}

const tabsChange = (name) => {
  tabsActiveName.value = name
  let info: any = {
    type: name
  }
  if (tabsActiveName.value == 'field' || tabsActiveName.value == 'naming') {
    info.standardSetGuid = standardSetGuid.value
  } else if (tabsActiveName.value == 'dictionary') {
    info.dictionaryGuid = dictionaryGuid.value
  } else if (tabsActiveName.value == 'importFile') {

  }
  cacheStore.setCatch('uploadSetting', info)
  setUploadInfo()
}

const getFirstPageData = () => {
  page.value.curr = 1
  toSearch({})
}

const toSearch = (val: any, clear: boolean = false) => {
  let params: any = Object.keys(val).length ? { ...val } : {}
  params.pageIndex = page.value.curr;
  params.pageSize = page.value.limit;
  params.staffGuid = userData.staffGuid;
  params.importType = importType.value;

  params.bizGuid = route.query.bizGuid || ''
  getTableData(params);
};

const getTableData = (params) => {
  tableInfo.value.loading = true
  getImportData(params).then((res: any) => {
    if (res.code == proxy.$passCode) {
      const data = res.data || {}
      tableInfo.value.data = data.records || []
      tableInfo.value.page.limit = data.pageSize
      tableInfo.value.page.curr = data.pageIndex
      tableInfo.value.page.rows = data.totalRows
    } else {
      ElMessage({
        type: 'error',
        message: res.msg,
      })
    }
    tableInfo.value.loading = false
  }).catch(xhr => {
    tableInfo.value.loading = false
  })
};

const tableSelectionChange = (val) => {
  selectRowData.value = val.map(item => item.guid);
};

const tablePageChange = (info) => {
  page.value.curr = Number(info.curr);
  page.value.limit = Number(info.limit);
  toSearch({});
};

const tableBtnClick = async (scope, btn) => {
  const type = btn.value;
  const row = scope.row;
  currTableData.value = row;
  if (type == "export_file") {
    getImageContent(row.filePath).then((res: any) => {
    if (res && !res.msg) {
      let name = row.filePath;
      var fileSuffix = name ? name.substring(name.lastIndexOf('.') + 1) : '';
      download(res, row.fileName, fileSuffix);
    } else {
      res?.msg && ElMessage.error(res?.msg);
    }
   });
    //downFile(row.filePath, row.fileName)
  } else if (type == 'export_abnormal_data') {
    //downFile(row.errorFilePath, '')
    getImageContent(row.errorFilePath).then((res: any) => {
    if (res && !res.msg) {
      let name = row.errorFilePath;
      var fileSuffix = name ? name.substring(name.lastIndexOf('.') + 1) : '';
      let fileName = name ? name.substring(name.lastIndexOf('/') + 1) :''
      download(res, fileName, fileSuffix);
    } else {
      res?.msg && ElMessage.error(res?.msg);
    }
   });
  } else if (type == "delete") {
    open("此操作将永久删除, 是否继续?", "warning");
  }
};

const batching = (type) => {
  if (type == 'import') {
    dialogInfo.value.header.title = '导入数据'
    dialogInfo.value.type = 'upload'
    dialogInfo.value.size = 640
    uploadFiles.value = []
    if (tabsActiveName.value == 'field' || tabsActiveName.value == 'naming') {
      uploadSteps.value[0].selectInfo.options = standardSetList.value
    } else if (tabsActiveName.value == 'dictionary') {
      uploadSteps.value[0].cascaderInfo.options = dictionaryList.value
    }
    uploadInfo.value.uploadInfo.steps = uploadSteps.value
    const content: any = [uploadInfo.value]
    dialogInfo.value.contents = content
    dialogInfo.value.visible = true
  } else if (type == 'delete') {
    if (selectRowData.value.length == 0) {
      ElMessage({
        type: 'error',
        message: '请选择需要删除的数据',
      })
      return
    }
    open("此操作将永久删除, 是否继续?", "warning", true);
  } else if(type === 'importFile') {
    if (isfileImport == '2') {
      dialogInfo.value.header.title = '导入数据'
      dialogInfo.value.type = 'upload'
      dialogInfo.value.size = 500
      uploadFiles.value = []
      uploadInfo.value.uploadInfo.steps = uploadSteps.value
      const content: any = [uploadInfo.value]
      dialogInfo.value.contents = content
      dialogInfo.value.visible = true
    } else {
      router.push({
        name:"importData",
        query:route.query
      })
    }
  }
};

const open = (msg, type, isBatch = false) => {
  ElMessageBox.confirm(msg, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: type,
  }).then(() => {
    let guids = [currTableData.value.guid]
    if (isBatch) {
      guids = selectRowData.value
    }
    deleteImportData(guids).then((res: any) => {
      if (res.code == proxy.$passCode) {
        getFirstPageData();
        ElMessage({
          type: "success",
          message: "删除成功",
        });
      } else {
        ElMessage({
          type: "error",
          message: res.msg,
        });
      }
    });
  });
};

const onUpload = (file, fileList) => {
  uploadFiles.value = fileList
}

const uploadBtnClick = (btn) => {
  exportData()
}

const cascaderChange = (val) => {
  dictionaryGuid.value = val ? val.at(-1) : ''
}

const selectChange = (val) => {
  standardSetGuid.value = val
}

const exportData = (ids: any = null) => {
  if (tabsActiveName.value == 'standard') {
    const fieldTemplate = "/files/set.xlsx";
    downFile(fieldTemplate, '标准集模板.xlsx')
  } else if (tabsActiveName.value == 'field') {
    const fieldTemplate = "/files/field.xlsx";
    downFile(fieldTemplate, '字段标准模板.xlsx')
  } else if (tabsActiveName.value == 'naming') {
    const namingTemplate = "/files/naming.xlsx";
    downFile(namingTemplate, '命名标准模板.xlsx')
  } else if (tabsActiveName.value == 'dictionary') {
    const params = {
      guid: dictionaryGuid.value
    }
    exportDictionary(params).then((res: any) => {
      download(res, '数据字典模板.xlsx', 'excel')
    });
  }
}

const importData = (info) => {
  let params = new FormData()
  if (uploadFiles.value.length == 0) {
    ElMessage({
      type: 'error',
      message: '请选择上传文件'
    })
    // dialogInfo.value.footer.btns.map((item: any) => delete item.disabled)
    return
  }
  uploadFiles.value.forEach((item: any, index: number) => {
    params.append("file", item.raw);
  });
  let paramUrl = '';
  if (isfileImport == '2') {
    paramUrl = `${import.meta.env.VITE_API_ASSET_BASEURL}/dam-catalog-table/excel-by-subject-guid?staffGuid=${userData.staffGuid}&subjectGuid=${route.query.bizGuid}`
  } else {
    paramUrl = `${import.meta.env.VITE_APP_ADD_FILE}/import-data/import-common?importType=${importType.value}&staffGuid=${userData.staffGuid}&tenantGuid=${userData.tenantGuid}&dataType=2`
    if (info && Object.keys(info).length) {
      paramUrl += `&extendFields=${JSON.stringify(info)}`
    }
  }
  dialogInfo.value.footer.btns[1].loading = true;
  addImportData(paramUrl, params).then((res: any) => {
    dialogInfo.value.footer.btns[1].loading = false;
    if (res.code == proxy.$passCode) {
      getFirstPageData();
      ElMessage({
        type: "success",
        message: '导入成功',
      });
      dialogInfo.value.visible = false;
    } else {
      ElMessage({
        type: "error",
        message: res.msg,
      });
      // dialogInfo.value.footer.btns.map((item: any) => delete item.disabled)
    }
  }).catch(() => {
    // dialogInfo.value.footer.btns.map((item: any) => delete item.disabled)
  })
}

const dialogBtnClick = (btn, info) => {
  if (btn.value == 'submit') {
    // dialogInfo.value.footer.btns.map((item: any) => item.disabled = true)
    if (dialogInfo.value.type == 'upload') {
      if (tabsActiveName.value == 'dictionary') {
        importData({ dictionaryGuid: dictionaryGuid.value })
      } else {
        importData(info)
      }
    }
  } else if (btn.value == 'cancel') {
    // dialogInfo.value.footer.btns.map((item: any) => delete item.disabled)
    nextTick(() => {
      dialogInfo.value.visible = false;
    })
  };
}

const setUploadInfo = () => {
  if (tabsActiveName.value == 'standard') {
    importType.value = '0029'
  } else if (tabsActiveName.value == 'field') {
    importType.value = '0032'
  } else if (tabsActiveName.value == 'naming') {
    importType.value = '0031'
  } else if (tabsActiveName.value == 'dictionary') {
    importType.value = '0025'
  } else {
    if (isfileImport == '2') {
      importType.value = '0034';
    } else {
      importType.value = '0033';
    }
  }
  tabsInfo.value.activeName = tabsActiveName.value
  getFirstPageData()
  if (tabsActiveName.value == 'field' || tabsActiveName.value == 'naming') {
    uploadSteps.value = [
      {
        title: '1、导入前请先录入以下内容',
        type: 'tree-select',
        selectInfo: {
          label: '标准集',
          placeholder: '请选择',
          field: 'standardSetGuid',
          default: '',
          checkStrictly: true,
          lazy: false,
          clearable: true,
          options: [],
          props: {
            label: 'standardName',
            value: 'guid',
            children: 'children',
            isLeaf: 'isLeaf'
          },
          expandKeys: [],
          filterable: true,
          required: true
        }
      },
      {
        title: '2、请下载最新的模板，并按照模板格式准备需要导入的数据',
        type: 'btn_down'
      },
      {
        title: '3、选择准备好的文件导入',
        type: 'btn_upload',
        uploadInfo: {
          action: '',
          auto: false,
          cover: true,
          fileList: [],
          accept: '.xlsx, .xls',
          tips: '当前支持xls、xlsx文件，默认使用第一个sheet'
        }
      }
    ]
    standardSetGuid.value = uploadSetting.value?.standardSetGuid || ''
    uploadInfo.value.uploadInfo.extraParams = {
      standardSetGuid: standardSetGuid.value
    }
  } else if (tabsActiveName.value == 'dictionary') {
    uploadSteps.value = [
      {
        title: '1、导入前请先录入以下内容',
        type: 'cascader',
        cascaderInfo: {
          label: '数据字典',
          placeholder: '',
          field: 'dictionaryGuid',
          options: [],
          showAllLevels: false,
          props: {
            checkStrictly: false,
            label: "name",
            value: "guid",
          },
          filterable: true,
          clearable: true,
          required: true
        }
      },
      {
        title: '2、请下载最新的模板，并按照模板格式准备需要导入的数据',
        type: 'btn_down'
      },
      {
        title: '3、选择准备好的文件导入',
        type: 'btn_upload',
        uploadInfo: {
          action: '',
          auto: false,
          cover: true,
          fileList: [],
          accept: '.xlsx, .xls',
          tips: '当前支持xls、xlsx文件，默认使用第一个sheet'
        }
      }
    ]
    dictionaryGuid.value = uploadSetting.value?.dictionaryGuid || ''
    uploadInfo.value.uploadInfo.extraParams = {
      dictionaryGuid: dictionaryGuid.value
    }
  } else if (tabsActiveName.value == 'importFile') {
    uploadSteps.value = [
      {
        title: '选择准备好的文件导入',
        type: 'btn_upload',
        uploadInfo: {
          action: '',
          auto: false,
          cover: true,
          fileList: [],
          accept: '.xlsx, .xls',
          tips: '当前支持xls、xlsx文件，默认使用第一个sheet'
        }
      }
    ]
    uploadInfo.value.uploadInfo.extraParams = {}
  } else {
    uploadSteps.value = [
      {
        title: '1、请下载最新的模板，并按照模板格式准备需要导入的数据',
        type: 'btn_down'
      },
      {
        title: '2、选择准备好的文件导入',
        type: 'btn_upload',
        uploadInfo: {
          action: '',
          auto: false,
          cover: true,
          fileList: [],
          accept: '.xlsx, .xls',
          tips: '当前支持xls、xlsx文件，默认使用第一个sheet'
        }
      }
    ]
    uploadInfo.value.uploadInfo.extraParams = {}
  }
}

onActivated(() => {
  uploadSetting.value = cacheStore.getCatch('uploadSetting') ?? {}
   if(isfileImport) {
    tabsActiveName.value = 'importFile'
   } else {
    tabsActiveName.value = uploadSetting.value?.type || 'standard'
  }
  
  getSetList()
  getDictList()
  setUploadInfo()
})

</script>

<template>
  <div class="container_wrap">
    <Tabs v-if="!isfileImport" :tabs-info="tabsInfo" @tabChange="tabsChange" />
    <div class="table_tool_wrap">
      <div class="tools_btns">
        <el-button type="primary" @click="batching('import')" v-if="tabsActiveName !== 'importFile'" v-preReClick>批量导入</el-button>
        <el-button type="primary" @click="batching('importFile')" v-if="tabsActiveName == 'importFile'" v-preReClick>文件导入</el-button>
        <el-button @click="batching('delete')" v-preReClick>批量删除</el-button>
        <el-button @click="getFirstPageData" v-preReClick>刷新结果</el-button>
      </div>
      <span class="tips_text">请及时刷新查看最终结果</span>
    </div>
    <div class="table_panel_wrap" :style="{ height: !isfileImport ? 'calc(100% - 71px)' : 'calc(100% - 44px)' }">
      <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tableSelectionChange="tableSelectionChange"
        @tablePageChange="tablePageChange" />
    </div>
    <Dialog :dialogInfo="dialogInfo" @btnClick="dialogBtnClick" @onUpload="onUpload" @uploadBtnClick="uploadBtnClick"
      @cascaderChange="cascaderChange" @selectChange="selectChange" />
  </div>
</template>

<style lang="scss" scoped>
.container_wrap {
  padding: 0;

  :deep(.el-tabs) {

    .el-tabs__header {
      margin-bottom: 0;
    }

    .el-tabs__item {
      height: 32px;

      &:nth-child(2) {
        padding-left: 16px;
      }

      &:last-child {
        padding-right: 16px;
      }

      &::after {
        content: '';
        width: 100%;
        height: 2px;
        background-color: transparent;
        position: absolute;
        left: 0;
        bottom: 0;
      }

      &.is-active {
        &::after {
          background-color: var(--el-color-primary);
        }
      }
    }

    .el-tabs__active-bar {
      display: none;
    }
  }

  .table_tool_wrap {
    padding: 0 16px;
    display: flex;
    align-items: center;

    .tips_text {
      margin-left: 16px;
      font-size: 14px;
      color: #b2b2b2;
    }
  }

  .table_panel_wrap {
    padding: 0 16px;
    height: calc(100% - 71px);
  }
}
</style>