<template>
  <div class="import-patent">
    <el-container class="import-patent">
      <el-main class="import-patent-main">
        <el-container class="import-patent-action">
          <!-- <el-header>
            <el-form :inline="true" class="import-patent-action-form">
              <el-form-item>
                <el-button size="small" type="primary" @click="handleManage" :disabled="!($permission('/workspace/common/customField') && $r(projectId,[1,2]))">自定义栏位管理</el-button>
                <el-button size="small" type="success" @click="handleFolder" :disabled="!($permission('/workspace/common/folder_manage') && $r(projectId,[1,2]))">文件夹管理</el-button>
              </el-form-item>
            </el-form>
          </el-header> -->
          <el-main class="import-patent-action-main" v-loading="loading">
            <el-form :model="form">
              <!-- <el-form-item label="选择需要关联的标引与分类">
                <el-table :data="tableData" :show-header="false">
                  <el-table-column type="expand">
                    <template slot-scope="props">
                      <el-form label-position="top" class="custom-field-form">
                        
                        <template v-if="props.row.field === 'folder'">
                          <el-tree
                              ref="folderTree"
                              :data="customField.folder"
                              check-strictly
                              :default-checked-keys="form.json.field.folder"
                              show-checkbox
                              node-key="id"
                              :props="defaultProps"
                          ></el-tree>
                        </template>
                        <template v-else v-for="(item, index) in customField[props.row.field]">
                          <el-form-item :label="`${index + 1}. ${item.name}`">
                            <template v-if="item.type === 0 || item.type === 2">
                              <el-input v-model="form.json.field[item.id].value" placeholder="请输入内容" size="small"></el-input>
                            </template>
                            <template v-if="item.type === 1">
                              <el-date-picker v-model="form.json.field[item.id].value" value-format="yyyy-MM-dd" type="date" size="small" placeholder="选择日期" style="width: 100%;"></el-date-picker>
                            </template>
                            <template v-if="item.type === 3">
                              <el-select v-model="form.json.field[item.id].value" size="small" placeholder="请选择" class="width_100">
                                <el-option v-for="option in item.option" :value="option.id" :label="option.name"></el-option>
                              </el-select>
                            </template>
                            <template v-if="item.type === 4">
                              <el-radio-group v-model="form.json.field[item.id].value">
                                <el-radio v-for="option in item.option" :label="option.id">{{ option.name }}</el-radio>
                              </el-radio-group>
                            </template>
                            <template v-if="item.type === 5">
                              <el-checkbox-group v-model="form.json.field[item.id].value">
                                <el-checkbox v-for="option in item.option" :label="option.id">{{ option.name }}</el-checkbox>
                              </el-checkbox-group>
                            </template>
                            <template v-if="item.type === 6">
                              <el-tree
                                  :ref="item.id"
                                  :data="item.option"
                                  check-strictly
                                  :default-checked-keys="form.json.field[item.id].value"
                                  show-checkbox
                                  node-key="id"
                                  :props="defaultProps"
                              ></el-tree>
                            </template>
                          </el-form-item>
                        </template>
                      </el-form>
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" show-overflow-tooltip></el-table-column>
                </el-table>
              
              </el-form-item>
              <el-form-item label="数据来源：">
                <select style="width:390px;border:0;outline:none" name="" id="" v-model="sourceId">
                  <option value="">请选择数据来源</option>
                  <option v-for="item in customField.dataType" :value="item.id">{{item.name}}</option>
                </select>
                <el-divider ></el-divider>
              </el-form-item>  -->
              
              <el-form-item label="选择需要上传的专利信息导入文件">
                <el-upload class="upload-file" drag action="#" :auto-upload="false" :show-file-list="false" :on-change="onChange">
                  <i :class="!form.file ? 'el-icon-upload' : 'el-icon-refresh'"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  <div class="el-upload__tip" slot="tip"></div>
                </el-upload>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>

        <system-task ref="systemTask" :form="1" :reportId="reportId" />
      </el-main>
<!--      <el-footer class="import-folder-button">-->
<!--        <el-button @click="handleClose">关 闭</el-button>-->
<!--        <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>-->
<!--      </el-footer>-->
    </el-container>

    <!-- <project-field-drawer @close="handleClose2" ref="projectFieldDrawer" />

    <project-folder-dialog @close="updateFolder" ref="projectFolderDialog" /> -->
  </div>
</template>

<script>
// import ProjectFieldDrawer from "../../layout/components/field.vue";
// import ProjectFolderDialog from "../common/Folder.vue";
import SystemTask from '../task'
import { mapGetters } from "vuex";

export default {
  components: {
    // ProjectFieldDrawer,
    // ProjectFolderDialog,
    SystemTask
  },
  data() {
    return {
      sourceId: '',
      reportId: this.$route.query.id,
      title: '',
      customField: {},
      loading: false,
      btnLoading: false,
      total: 0,
      tableData2: [],
      form: {
        file: null,
        json: {
          projectId: 0,
          field: [],
          folder: {}
        }
      },
      fieldTypeObj: {
        0: '数字',
        1: '日期',
        2: '文本',
        3: '下拉框',
        4: '单选',
        5: '多选',
        6: '树',
      },
      tableData: [
        {
          name: '标引',
          field: 'index'
        }, {
          name: '分类',
          field: 'classify'
        }, {
          name: '文件夹',
          field: 'folder'
        }],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
    }
  },
  computed: {
    ...mapGetters(['webSocket', 'userinfo'])
  },
  mounted() {

    this.reportId = this.$route.query.id
    // this.getCustomField()
  },
  // watch:{
  //   sourceId(val){
  //     console.log(val)
  //   }
  // },
  methods: {

    getQueueList() {
      this.$refs.systemTask.getQueueList()
    },
    cancel() {
      this.dialogVisible = false
    },
    updateFolder() {
      this.$api.getProjectFolderList({ projectId: this.projectId, patentTotal: false }).then(response => {
        this.customField.folder = response.data
      })
    },
    handleManage() {
      this.$refs.projectFieldDrawer.open(this.projectId)
    },
    handleFolder() {
      this.$refs.projectFolderDialog.open(this.projectId)
    },
    onChange(file, fileList) {
      this.form.file = file.raw
      this.handleConfirm()
    },
    handleClose() {

    },
    handleClose2() {
      this.getCustomField()
    },
    getCustomField() {
      this.$api.getCustomField({ projectId: this.projectId }).then(response => {
        this.customField = response.data;
        ['index', 'classify'].map(key => {
          this.customField[key].map(item => {
            let value = null
            if (item.type === 5 || item.type === 6) {
              value = []
            }
            this.$set(this.form.json.field, item.id, { type: item.type, value })
          })
        })
        // console.log(this.customField);
      })
    },
    handleConfirm() {
      // const json = JSON.parse(JSON.stringify(this.form.json))
      // const refs = this.$refs

      // let data = {
      //   projectId: this.projectId,
      //   sourceId: this.sourceId,
      //   fieldList: [],
      //   folderIds: refs.folderTree ? refs.folderTree.getCheckedKeys() : []
      // }
      // for (let id in json.field) {
      //   const field = json.field[id]
      //   if (!field) {
      //     continue;
      //   }
      //   const type = field.type
      //   const value = field.value
      //   if (value) {
      //     if (type === 5) {
      //       value.map(option => {
      //         data.fieldList.push({
      //           fieldId: parseInt(id),
      //           type: type,
      //           optionId: option
      //         })
      //       })
      //     } else if (type === 6) {
      //       const tree = refs[id]
      //       if (tree) {
      //         const treeNode = tree[0].getCheckedKeys()
      //         treeNode.map(node => {
      //           data.fieldList.push({
      //             fieldId: parseInt(id),
      //             type: type,
      //             optionId: node
      //           })
      //         })
      //       }
      //     } else {
      //       data.fieldList.push({
      //         fieldId: parseInt(id),
      //         type: type,
      //         optionId: [0, 1, 2].indexOf(type) === -1 ? value : 0,
      //         text: value
      //       })
      //     }
      //   }
      // }
      if (!this.form.file) {
        this.$message.error('请选择文件')
        return false
      }
      // if (!this.sourceId) {
      //   this.$message.error('请选择数据类型')
      //   return false
      // }
      let formData = new FormData()
      formData.append('reportId', this.reportId)
      formData.append('file', this.form.file)
      // formData.append('json', JSON.stringify(data))
      this.btnLoading = true
      this.loading = true
      // console.log(formData)
      this.$api.import(formData).then(response => {
        this.$message.success('任务创建成功')
        this.form.file = null
        this.btnLoading = false
        this.loading = false
        // this.handleClose()
        this.getQueueList()
      }).catch(error => {
        this.btnLoading = false
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss">
.el-divider--horizontal {
  margin: 0
}

.import-patent {
  height: 100%;

  .import-patent-main {
    padding: 0;
    height: 100%;
    background: #fff;
  }

  .import-patent-action {
    width: 500px;
    height: 100%;
    border-right: 1px solid #d2d2d2;
    float: left;

    .custom-field-form .el-form-item__label {
      font-weight: bold !important;
    }

    .import-patent-action-form {
      margin-left: 20px;
    }

    .import-patent-action-main {
      padding: 10px;
    }
  }

  .import-patent-button {
    height: 70px !important;
    text-align: right;
  }
}
</style>