<template>
  <div class="box pa-3 d-flex">
    <div class="box-content mr-3">
      <v-card elevation="5" style="height: 100%;" class="d-flex flex-column">
        <v-banner single-line>
          <div class="py-2 title">非结构化数据资源导入</div>
          <template #actions>
            <upload-btn
              text
              color="primary"
              :disabled="loading"
              @change="handleChangeFile"
            >
              <v-icon left>mdi-import</v-icon>
              导入文件
            </upload-btn>
          </template>
        </v-banner>
        <Empty v-if="isEmpty"></Empty>
        <iframe
          v-else
          class="pa-3"
          v-loading="loading"
          style="height:100%; width:100%;margin:0;border:0;"
          :src="viewSrc"
        ></iframe>
      </v-card>
    </div>
    <div class="box-content">
      <v-card elevation="5" style="height: 100%;" class="d-flex flex-column">
        <div class="box-left-content-panel d-flex flex-column">
          <div>
            <v-tabs v-model="tab">
              <v-tab>元数据设置</v-tab>
              <v-tab>基础信息配置</v-tab>
            </v-tabs>
          </div>
          <v-tabs-items v-model="tab">
            <v-tab-item>
              <edit-selected
                v-loading="loading"
                style="position: relative;height: 100%;"
                ref="selected"
                v-model="headMap"
                @save="handleSave"
              >
                <template #head>
                  <div class="d-flex">
                    <form-list style="flex: 1" ref="formAdd" :items="formAdd"></form-list>
                    <v-btn class="buttons" rounded color="primary" @click="handleAdd">
                      <v-icon left>mdi-plus</v-icon>
                      新增元数据
                    </v-btn>
                  </div>
                </template>
              </edit-selected>
            </v-tab-item>
            <v-tab-item>
              <v-overlay :value="overlay">
                <div class="d-flex flex-column align-center justify-center" style="width: 300px;">
                  <div class="mb-3">正在提交</div>
                  <v-progress-linear
                    color="primary"
                    indeterminate
                    rounded
                    height="6"
                  ></v-progress-linear>
                </div>
              </v-overlay>
              <div class="pa-3 d-flex align-center justify-center flex-column">
                <edit-base ref="base" style="max-width: 500px;" hideEnName :names="names" :item-data="itemData"></edit-base>
                  <v-btn
                    class="buttons"
                    rounded
                    color="primary"
                    :disabled="loading"
                    @click="handleSubmit"
                  >
                    <v-icon left>mdi-send-variant</v-icon>
                    保存
                  </v-btn>
              </div>
            </v-tab-item>
          </v-tabs-items>
        </div>
      </v-card>
    </div>
  </div>
</template>

<script>

import EditSelected from '../editSelected'
import UploadBtn from '@/components/UploadBtn'
import Empty from '@/components/Common/empty'
// import MDialog from '@/components/Dialog'
import EditBase from '../editBase'
import FormList from '@/components/Form/list'
import { api } from '@/api/dataGovernance'
import { minIOSrc } from '@/utils/preview'
import { metadataType } from '@/utils/dataGovernance'
export default {
  name: 'unstructured-document',
  components: {
    EditSelected,
    // MDialog,
    FormList,
    UploadBtn,
    EditBase,
    Empty
  },
  props: {
    itemData: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      formAdd: {
        options: [
          {
            type: 'text',
            key: 'name_zh',
            value: null,
            col: 4,
            label: '请输入元数据名称 *',
            outlined: true,
            dense: true,
            rules: [v => !!v || '请输入元数据名称']
          },
          {
            type: 'text',
            key: 'name_en',
            value: null,
            col: 4,
            label: '请输入元数据英文名称 *',
            outlined: true,
            dense: true,
            rules: [v => !!v || '请输入元数据英文名称']
          },
          {
            type: 'autocomplete',
            key: 'data_type',
            value: null,
            col: 4,
            label: '请选择元数据类型 *',
            outlined: true,
            dense: true,
            rules: [v => !!v || '请选择元数据类型'],
            items: metadataType
          }
        ]
      },
      tab: 0,
      overlay: false,
      headMap: [],
      show: false,
      addVal: null,
      viewSrc: null,
      loading: false,
      fileName: undefined,
      names: {},
      params: {},
      isEmpty: true
    }
  },
  created () {
    if (!Object.keys(this.itemData).length) {
      return
    }
    const { url } = this.itemData
    this.fileName = url
    this.viewSrc = minIOSrc(url)
    this.isEmpty = false
    // Object.assign(this.params, obj)
    // this.headMap = []
  },
  methods: {
    handleAdd () {
      const obj = this.formAdd.options.reduce((res, item) => {
        res[item.key] = item.value
        return res
      }, {})
      this.headMap.push({
        text: '',
        map: {
          ...obj,
          data_standard: null
        }
      })
    },
    handleSave (val, item) {
      const _item = this.headMap.find(e => e.map.name === item?.map?.name)
      const { id, name } = val
      Object.assign(_item.map.data_standard, { id, name_zh: name })
    },
    async handleChangeFile (multipartFile) {
      const type = multipartFile.name.split('.').pop()
      if (type === 'xlsx' || type === 'xls') {
        this.$snackbar.error('请选择非Excel文件')
        return
      }
      this.loading = true
      try {
        // 导入文件
        const { data: _data } = await api.uploadResource({ file: multipartFile })
        this.fileName = _data.url
        this.viewSrc = minIOSrc(_data.url)
        // 解析文件
        const { data } = await api.getUnstructured({ url: this.fileName })
        this.params = data
        Object.assign(this.names, {
          name: data.file_name
        })
        // this.headMap = []
        this.isEmpty = false
        // 解析关键词
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    },
    async handleSubmit () {
      // if (!this.headMap.length) {
      //   this.$snackbar.error('请先补充元数据设置')
      //   this.tab = 0
      //   return
      // }
      if (!this.fileName) {
        this.$snackbar.error('请先导入文件')
        return
      }
      const obj = this.$refs.base.getValue()
      if (!obj) {
        return
      }
      this.overlay = true
      try {
        await api.saveResource({
          author: this.params.author,
          keywords: this.params.keyword,
          url: this.fileName,
          additional_info: {
            head_data: this.headMap,
            data_resource: this.names
          },
          type: 'unstructured',
          ...obj
        })
        this.$snackbar.success('提交成功')
        this.$emit('close')
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.overlay = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  &-left {
    &-content-panel {
      height: 100%;
    }
  }
  &-content {
    flex: 1;
    height: 100%;
    // &:first-of-type {
    //   margin-right: 6px;
    // }
    &:last-of-type {
      width: 35%;
    }
  }
  &-right {
    position: relative;
    width: 400px;
    height: 100%;
    &-content {
      height: 100%;
      &-control {
        height: 100%;
        &-edit {
          flex: 1;
          overflow: auto;
        }
      }
    }
  }
  .label {
    width: 150px;
    text-align: right;
  }
  .body {
    flex: 1;
  }
}
.title {
  color: #1976D2;
  font-weight: 600;
}
::v-deep .v-tabs-items {
  height: 0;
  flex: 1;
  .v-window-item {
    overflow: auto;
    height: 100%;
  }
  .v-window__container {
    height: 100%;
  }
}
</style>
