<template>
  <el-dialog
    :title="'' "
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
      <el-form-item label="驳回到" v-if="status === 5 " >
        <el-select v-model="dataForm.rollbackFlowId" placeholder="请选择">
          <el-option
            v-for="item in rollbackData"
            :key="item.id"
            :label="item.flowName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="意见" prop="resultComment">
        <div id="resultCommentEditorElem" class="editor"></div>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" v-if="auth.approvelCommit === 1 && status !== 5 " @click="commitRecord(2)">通过</el-button>
      <el-button type="primary" v-if="auth.waitCommit===1 && status !== 5 " @click="commitRecord(3)">待提交</el-button>
      <el-button type="primary" v-if="status === 5 && auth.reject == 1" @click="commitRecord(5)">驳回</el-button>
    </span>
  </el-dialog>
</template>

<script>
import E from 'wangeditor'
import {commitApproval, getResultComment} from '@/api/api_result'

var Base64 = require('js-base64').Base64
export default {
  data () {
    return {
      visible: false,
      resultCommentEditor: null,
      recordResultId: 0,
      auth: [],
      resultCommitId: 0,
      rollbackData: [],
      status: 1,
      dataForm: {
        resultComment: '',
        rollbackFlowId: ''
      },
      dataRule: {}
    }
  },
  mounted () {

  },
  computed: {},
  methods: {
    async init (recordResultId, auth, status) {
      this.recordResultId = recordResultId
      this.auth = auth
      this.visible = true
      this.status = status

      this.$nextTick(async () => {
        this.$refs['dataForm'].resetFields()
        if (this.resultCommentEditor === null) {
          this.resultCommentEditor = new E('#resultCommentEditorElem')
          this.resultCommentEditor.customConfig.uploadImgServer = '/uploadPicture'
          this.resultCommentEditor.customConfig.uploadFileName = 'file'
          this.resultCommentEditor.customConfig.uploadImgParams = ''
          this.resultCommentEditor.customConfig.debug = true
          this.resultCommentEditor.create()
        }
        const data = await getResultComment(this.recordResultId)
        if (data && data.code === 0) {
          this.resultCommitId = data.resultComment.id
          this.rollbackData = data.list
          if (this.keyResultEditor !== null) {
            this.resultCommentEditor.txt.html(data.resultComment.comment)
          }
        }
      })
    },
    alertInfo (msg) {
      this.$message({
        message: msg,
        type: 'success',
        duration: 1500,
        onClose: () => {
        }
      })
    },
    commitRecord (status) {
      if(status === 5 && this.dataForm.rollbackFlowId === ''){
        this.alertInfo("请选择驳回目标")
        return;
      }
      commitApproval({
        'recordResultId': this.recordResultId,
        'resultComment': Base64.encode(this.resultCommentEditor.txt.html()),
        'status': status,
        'resultCommitId': this.resultCommitId,
        'rollbackFlowId': this.dataForm.rollbackFlowId
      }).then(data => {
        if (data && data.code === 0) {
          this.$emit('refreshDataList', this.recordResultId)
          this.alertInfo('更新成功')
        } else {
          this.alertInfo(data.msg)
        }
      })
    },
    stringIsNull (str) {
      if (typeof str === 'undefined' || str === null || str === '') {
        return true
      }
      return false
    }
  }
}
</script>
