<template>
  <dee-dialog title="附件上传" :dialog-visible.sync="visible" width="90%" custom-class="mobile-dialog">
    <div v-dee-loading="loading" class="storageExperiment-com">
      <el-form
        v-if="visible"
        ref="form"
        class="checkNo-container"
        label-position="left"
      >
        <header class="header">
          <span>工序号: </span>
          <el-input v-model="process.serialNumber" clearable class="gongxv" disabled />
          <span>工序名称: </span>
          <el-input v-model="process.title" clearable disabled />
        </header>
        <el-form-item>
          <DeeUploadTable
            v-model="process.fileList"
            app-name="tf-mom"
            :read-only="false"
            :config-item="tableConfig"
            :table-columns="tableColumns"
          />
        </el-form-item>
        <el-form-item class="btns">
          <el-button
            :disabled="disabled"
            type="primary"
            @click="onSubmit"
          >保存</el-button>
          <el-button size="medium" @click="visible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </dee-dialog>
</template>
<script>
import { post } from '@/utils/http'
export default {
  name: 'StorageExperimentDialog',
  data() {
    return {
      visible: false,
      loading: false,
      process: {},
      processNumber: null,
      processName: null,
      disabled: false,
      tableColumns: [
        {
          'title': '文件名',
          'key': 'target.originalFileName',
          'parentKey': 'target',
          'headerAlign': 'center',
          'align': 'left'
        },
        {
          'title': '文件大小',
          'key': 'target.fileSize',
          'parentKey': 'target',
          'level': 1,
          'show': true,
          'headerAlign': 'center',
          'align': 'left'
        },
        {
          'title': '扩展名',
          'key': 'target.fileExtension',
          'parentKey': 'target',
          'level': 1,
          'show': true,
          'headerAlign': 'center',
          'align': 'left'
        }
      ],
      tableConfig: {
        component: {
          alimit: 1,
          appendFilter: ['ATTACH_FILE', 'SECONDARY', 'FLOW_FILE', 'PROCESS_CONTENTROLE_PDF'],
          appendTitle: '附件',
          appendUploadFilter: 'ATTACH_FILE',
          defaultValueSelfFun: 'return null',
          disabled: false,
          filterKey: 'contentType',
          // limit: 1,
          masterFilter: ['MASTER_FILE', 'PRIMARY'],
          masterTitle: '主内容',
          masterUploadFilter: 'MASTER_FILE',
          mlimit: 1,
          mrequired: true,
          name: 'DeeUploadTable',
          placeholder: '',
          required: false,
          showFileList: true,
          state: 'edit',
          taleType: 'single',
          url: '/dfs/fileManager/feign/uploadFile'
        },
        descriptionShowMode: 'text',
        hidden: false,
        key: 'objFileLinks',
        name: '附件',
        parentKey: 'objFileLinks',
        premMark: true,
        title: '',
        width: 3
      }
    }
  },
  methods: {
    // 打开弹出框
    open(data) {
      this.process = this.$utils.deepClone(data)
      this.visible = true
    },
    // 保存
    onSubmit() {
      this.disabled = true
      this.loading = true
      const params = {
        operator: 'MODIFY',
        id: this.process.id,
        extProcessOperation: {
          id: this.process.tableId,
          operator: 'MODIFY'
        }
      }
      params.extProcessOperation.objFileLinks = this.process.fileList
      post('/JoExecuteOpPlan/recursion', params)
        .then((res) => {
          this.$parent.getWorkingProcedure()
          this.$utils.showMessageSuccess('保存成功')
          // 关闭抽屉并刷新表格
          this.visible = false
          this.$emit('reload')
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.disabled = false
          this.visible = false
          // this.uploadVisble = true
          this.loading = false
        })
    }
  }
}
</script>
<style lang="scss" >
.storageExperiment-com {
  .checkNo-container {
    .btns {
      text-align: center;
    }
  }
  header {
    display: flex;
    white-space: nowrap;
    align-items: center;
    margin-bottom: 20px;
    > div {
      width: 140px;
      margin-left: 15px;
      &.gongxv {
        margin-right: 30px;
      }
    }
  }
  .el-row {
    padding-right: 10px;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>