<template>
  <el-container>
    <el-header height="48px">
      <el-row>
        <el-col :span="12" :offset="6" class="top-subject-col">
          <h3>{{ subject }}</h3>
        </el-col>
        <el-col :span="6" class="top-btns-col">
          <el-button type="text" icon="el-icon-success" @click="saveFormData"
            >保存修改</el-button
          >
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-card
        class="task-card"
        id="printTest"
        style="overflow: auto;"
        :class="{'task-card__wrap': isPlmeformPage}"
      >
        <FormContent :instId="procInstId" :taskId="taskId" :type="type" />
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import FormContent from '@/components/flow/formContent.vue'
import {mapState, mapActions} from 'vuex'
import utils from '@/utils.js'
import {Base64} from 'js-base64'

export default {
  name: 'formManage',
  components: {
    FormContent
  },
  props: ['instId', 'type', 'taskId'],
  data() {
    return {
      procInstId: this.instId,
      defId: '',
      bpmnInstId: '',
      subject: '',
      status: '',
      choiceExcutor: '',
      jumpType: ''
    }
  },
  computed: {
    isPlmeformPage() {
      return this.$route.query.hasOwnProperty('plmeform')
    }
  },
  methods: {
    //保存数据
    saveFormData() {
      utils
        .getOnlineFormData(true)
        .then(formDataStr => {
          let jsonData = {}
          jsonData.proInstId = this.instId
          jsonData.data = Base64.encode(formDataStr)
          jsonData.expression = ''
          this.disabled = true
          this.$confirm('确认修改表单数据?', '提示', {
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            type: 'warning',
            closeOnClickModal: false
          })
            .then(() => {
              utils.closeAllNotification()
              this.$store
                .dispatch('storeProcess/saveFormData', jsonData)
                .then(resp => {
                  if (resp && resp.state) {
                    this.$message.success('修改成功')
                  } else {
                    let message =
                      resp && resp.message ? resp.message : '修改失败'
                    this.$message.error(message)
                  }
                })
            })
            .finally(() => {
              this.disabled = false
            })
        })
        .catch(reason => utils.handleGetFormDataReject(reason))
    }
  },
  created() {
    this.$store
      .dispatch('storeProcess/getInstanceByInstId', this.instId)
      .then(insts => {
        this.defId = insts.procDefId
        this.bpmnInstId = insts.bpmnInstId
        this.subject = insts.subject
      })
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.el-main {
  padding: 0;
}

.el-header {
  padding: 0;
}

.top-subject-col > h3 {
  text-align: center;
  color: #666;
}

.top-btns-col {
  padding-right: 6px;
  height: 48px;
  line-height: 48px;
  text-align: right;
}

.top-btns-col > button {
  color: #666;
}

.top-btns-col > button ::v-deep span {
  margin-left: 3px;
}

.top-btns-col > button:hover {
  color: $--theme-color;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.task-card {
  background: #fff;
  max-height: 700px;
}
.task-card__wrap {
  max-height: unset;
}
</style>
