<template>
  <div class="w100">
    <!-- 选择组织的dialog -->
    <el-dialog
      class="distribution"
      :visible.sync="processDialogsVisible"
      :title="processMethods"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form ref="trainedFile" label-width="90px">
        <el-form-item class="nessaryFile" label="附件">
          <el-row>
            <el-col :span="10">
              <p class="w100 minH30px">
                <span class="fileItem" v-for="(item, index) in fileList" :key="item.docId">
                  {{item.docTitle}}
                  <i
                    class="el-icon-close"
                    @click.stop="deleteUploadFile(item, index)"
                  ></i>
                </span>
              </p>
            </el-col>
            <el-col :span="13" :offset="1">
              <el-upload
                :action="action"
                accept=".xls, .xlsx, .png, .jpg, .jpeg, .txt"
                :before-upload="beforeUpload"
                :show-file-list="false"
                :on-success="handlerFileUploadSuccess"
              >
                <el-button size="mini" slot="trigger" type="primary">选择附件</el-button>
              </el-upload>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="提示"  v-if=" this.processMethod !== '流程导入'" >
          <el-row>
            <el-col :span="24">
              <p style="color:red;padding-bottom:10px;line-height: 26px;">需先编辑和保存流程卡片后，再导入流程图</p>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="processDialogsVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmChoose">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  importProcessJson,
  importProcessChartJson
} from '../../../api/processDesignCenter'
import { uploadFile, deluploadFile } from '../../../api/common'
import { getCookie } from '../../../utils/utils'
import {
  baseUrl
} from '../../../utils/url'
export default {
  name: 'selectProcess',
  data() {
    let self = this
    return {
      processDialogsVisible: false,
      processMethods: '',
      processCodeId: '',
      processCodeState:'',
      // 上传文件
      fileList: [],
      userId: getCookie('username')
    }
  },
  computed: {
    host() {
      return baseUrl
    },
    action() {
      return `${this.host}/attach/upload?username=${this.userId}`
    }
  },
  mounted() {},
  props: {
    value: {
      type: Boolean,
      default: false
    },
    processMethod: {
      type: String,
      default: ''
    },
    processId: {
      type: String,
      default: ''
    },
    processState: {
      type: String,
      default: ''
    },
  },
  watch: {
    value(val) {
      if (val) {
        this.processDialogsVisible = val
      } else {
        this.fileList = []
      }
    },
    processDialogsVisible(val) {
      this.$emit('input', val)
    },
    processMethod(val) {
      if (val) {
        this.processMethods = val
      }
    },
    processId(val) {
      if (val) {
        this.processCodeId = val
      }
    },
    processState(val) {
      if (val) {
        this.processCodeState = val
      }
    },
  },
  methods: {
    // 上传文件之前的判断文件类型
    beforeUpload(file) {
      console.log(file.name)
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension = testmsg === 'xls'
      const extension1 = testmsg === 'xlsx'
      const extension2 = testmsg === 'png'
      const extension3 = testmsg === 'jpg'
      const extension4 = testmsg === 'jpeg'
      // const extension5 = testmsg === 'pdf'
      const extension6 = testmsg === 'txt'
      if (
        !extension &&
        !extension1 &&
        !extension2 &&
        !extension3 &&
        !extension4 &&
        !extension6
      ) {
        this.$message({
          message: '上传文件仅支持图片、文本、表格文件类型!',
          type: 'warning'
        })
        return false
      }
    },
    handlerFileUploadSuccess(data) {
      uploadFile({
        docId: data.id,
        docTitle: data.newName,
        downloadUrl: this.host + '/attach/download/' + data.id,
        folderDocumentList: [{ documentid: data.id, folderid: 'PROCEID' }], // 培训记录写死了'AAAAA'
        provideruser: this.userId,
        revId: !data.revId ? data.id : data.revId,
        viewUrl: this.host + '/document/print/' + data.id
        }).then(res => {
          console.log(res)
          this.fileList = [
            {
              docId: data.id,
              docTitle: data.newName,
              downloadUrl: this.host + '/attach/download/' + data.id,
              folderDocumentList: [{ documentid: data.id, folderid: 'PROCEID' }], // 培训记录写死了'AAAAA'
              provideruser: this.userId,
              revId: !data.revId ? data.id : data.revId,
              viewUrl: this.host + '/document/print/' + data.id
            }
          ]
        })
    },
    deleteUploadFile(item, index) {
      deluploadFile(item.docId).then(res => {
        if (!res) return false
        if (item.id) {
          delRecords(item.id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.fileList.splice(index, 1)
          })
        } else {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.fileList.splice(index, 1)
        }
      })
    },
    confirmChoose() {
      if (this.fileList.length === 0) {
        this.$message({
          type: 'warning',
          message: '请先上传附件!'
        })
        return
      }
      if (this.processMethods === '流程导入') {
        importProcessJson(this.processCodeId, this.fileList[0].docId).then(
          res => {
              if (!res) return false
              this.$message({
                type: 'success',
                message: '导入成功!'
              })
              this.processDialogsVisible = false
              this.$emit('confirm', '')
          }
        )
      } else if (this.processMethods === '流程图导入') {
        if (this.processCodeState === '2'){
            this.$message({
              type: 'warning',
              message: '需先编辑和保存流程卡片后，再导入流程图'
            })
            return
        }
        importProcessChartJson(this.processCodeId, this.fileList[0].docId).then(
          res => {
              if (!res) return false
              this.$message({
                type: 'success',
                message: '导入成功!'
              })
              this.processDialogsVisible = false
              this.$emit('confirm', '')
          }
        )
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/*附件部分*/
.ztree li span.button.chk.type1 {
  display: none !important;
}
.distribution {
  .h70px {
    height: 70px;
  }
  .h300px {
    height: 300px;
  }
}
/deep/input[type=file]{ display: none;}
</style>
