<template>
  <div>
    <!-- <div style="padding:20px;background: #fff"> -->
    <!-- <div :class="[(!myReadType)?'form-container':'form-container-not']" ref="formContainer" :style="status_style">
        <span>审批内容</span>
        <div class="urgent_state_div" v-if="urgentStateConf.conf && (urgentStateConf.conf.length >0)">
          <span>紧急状态:</span>
          <span v-if="urgentStateConf.right =='w'">
            <label :style="'color:'+c.color" class="radio-inline" v-for="c in urgentStateConf.conf" :key="c.state">
              <input :value="c.state" type="radio" v-model="urgentStateConf.value" />
              {{c.name}}
            </label>
          </span>
          <span v-if="urgentStateConf.right !='w'">
            <span v-show="c.state == urgentStateConf.value" :style="'color:'+c.color" v-for="c in urgentStateConf.conf"
              :key="c.state">{{c.name}}</span>
          </span>
        </div>
        <div class="urgent_state_div" v-if="formHelpFile && (formHelpFile.length >0)">
          <el-button class="help" icon="el-icon-question" type="text" @click="previewHelpFile">帮助</el-button>
        </div>
      </div> -->
    <div class="form-content">
      <form v-if="html && formType == 'INNER'" data-vv-scope="custom-form">
        <online-form
          class="custom-form"
          :html="html"
          :data="data"
          :permission="permission"
          :isView="isView"
          :initFillData="initFillData"
          :flowKey="flowKey"
          :formId="formId"
          :isLook="isLook"
          :key="formComponentKey"
        />
      </form>
      <div
        v-if="htmlSrc && formType == 'FRAME'"
        class="tab-container"
        id="parentDiv"
        :class="startFlow ? 'start-flow' : ''"
      >
        <iframe
          v-iframetrigger
          id="frmFrame"
          name="frmFrame"
          style="height: 100%; width: 100%; border: 0px"
          :src="htmlSrc"
          ref="iframe"
          @load="sendData()"
        ></iframe>
      </div>
      <!-- </div> -->
      <!-- 预览文件-->
      <FilePreview ref="filePreview" />
    </div>
  </div>
</template>
<script>
import OnlineForm from '@/components/flow/OnlineForm.vue'
import form from '@/api/formContent.js'
import {Message} from 'element-ui'
import {Loading} from 'element-ui'
import FilePreview from '@/components/common/FilePreview.vue'
import req from '@/request.js'
export default {
  name: 'formContent',
  props: [
    'instId',
    'taskId',
    'defId',
    'proInstId',
    'type',
    'readId',
    'readDoneId',
    'myReadType',
    'leaderId',
    'formLoading',
    'task_state',
    'tasks',
    'isLook',
    'copyInstId',
    'startFlow',
    'relationData'
  ],
  data() {
    return {
      buttons: [],
      status_style: '',
      dataInstId: '',
      html: null,
      data: null,
      permission: null,
      isView: true,
      formType: 'INNER',
      htmlSrc: null,
      urgentStateConf: {},
      formHelpFile: '',
      src: '',
      files: [],
      fileId: '',
      fileTree: '',
      formData: '',
      initFillData: false,
      formId: '',
      flowKey: '',
      taskDetailLoading: '',
      topDivHeight: '99px', //空div的高度 用于撑开页面下的div内容
      formKey: '', //表单key
      formComponentKey: new Date().getTime(),
      iframeWin: null
    }
  },
  watch: {
    tasks: function(newVal, oldVal) {
      if (newVal) {
        this.init()
      }
    },
    urgentStateValue: function(newVal, oldVal) {
      if (window.urgentStateValue) {
        window.urgentStateValue.new = newVal
      }
    }
  },
  created() {
    if (this.isPlmeformPage) {
      this.topDivHeight = 0
    }
    //待办的时候,watch已经监听了tasks,可以不用初始化
    if (!this.taskId) {
      this.init()
    }
    if (this.type == 'request') {
      this.topDivHeight = '20px'
    }
  },
  methods: {
    /**
     * 修改样式
     * @param divheight  最上面div的高度
     */
    updateStyle(divheight) {
      this.topDivHeight = divheight
    },
    previewHelpFile() {
      let obj = {}
      obj.id = this.formHelpFile[0].id
      obj.name = this.formHelpFile[0].name
      obj.size = this.formHelpFile[0].size
      this.$refs.filePreview.preview(obj)
    },
    setInitFillData(isInitFillData) {
      this.initFillData = isInitFillData
    },
    hiddenContent() {
      this.$refs.formContainer.className = 'form-container-not'
    },
    init(updateFormComponent) {
      if (this.task_state == 'FOLLOW') {
        this.status_style = 'padding-top:0px !important;'
      }
      var $ = require('jquery')
      let _me = this
      if (_me.tasks) {
        _me.initFillData = _me.tasks.initFillData
      }
      let readOnly = false
      if (
        _me.tasks &&
        _me.tasks.bpmTask &&
        (_me.tasks.bpmTask.status === 'COMMU' ||
          _me.tasks.bpmTask.status === 'TRANSFORMEDINQU' ||
          _me.tasks.bpmTask.status === 'FOLLOW')
      ) {
        readOnly = true
      }

      //获取流程定义key
      _me.getFlowKey()
      let handlerJs = function(rep) {
        const currentUser = _me.$store.state.login.currentUser

        let data = _me.data
        let _this = _me
        if (rep && rep.diyJs) {
          eval(rep.diyJs)
        }
      }

      let handler = function(rep) {
        //发起流程的时候得到按钮对象
        if (rep.buttons) {
          _me.buttons = rep.buttons
        }
        if (_me.taskDetailLoading) {
          _me.taskDetailLoading.close()
        }
        if (_me.myReadType == 'agent') {
          Message.warning('此流程已被委托,没有审批权')
        }
        if (!rep) {
          return
        }
        if (JSON.stringify(rep) == '{}') {
          Message.error('此流程还没有设置全局表单,请先设置全局表单!')
          return
        }
        if (rep.resultMsg == 'formEmpty' || rep.result == 'formEmpty') {
          Message.error('此流程还没有设置表单,请先设置表单!')
          return
        }
        _me.formKey = rep.form.formKey
        //_me.formId=rep.form.formId;
        if (rep.form && rep.form.type == 'FRAME') {
          _me.htmlSrc = rep.form.formValue
          console.log(_me.htmlSrc, '_me.htmlSrc ', _me)
          _me.formType = rep.form.type

          //表单加载完成发布事件 审批按钮才可以点击
          _me.$root.$emit('formLoading', false)
        } else {
          _me.formId = rep.form.formId
          form.preview(rep.form.formId, handlerJs)
          if (_me.formData) {
            _me.data = JSON.parse(Base64.decode(_me.formData))
          } else {
            _me.data = rep.data
          }

          if (rep.permission) {
            const permissionObj = JSON.parse(rep.permission)
            let commonRight = ''
            //如果是管理端进入，则将页面字段的权限修改为可编辑
            if (_me.type == 'manage') {
              commonRight = 'w'
              //如果是查看实例，也是获取发起流程的表单和权限。只不过所有可见的权限要变成编辑
            } else if (
              'request' == _me.type ||
              _me.myReadType == 'myRequest' ||
              _me.myReadType == 'delegate' ||
              _me.myReadType == 'myRead' ||
              _me.readDoneId ||
              _me.type == 'read' ||
              readOnly
            ) {
              commonRight = 'r'
            }
            if (permissionObj.fields && commonRight) {
              for (var key in permissionObj.fields) {
                const bodef = permissionObj.fields[key]
                if (bodef) {
                  for (var fname in bodef) {
                    if (
                      commonRight == 'w' ||
                      (commonRight == 'r' && bodef[fname] != 'n')
                    ) {
                      bodef[fname] = commonRight
                    }
                  }
                }
                permissionObj.fields[key] = bodef
              }
            }
            if (permissionObj.table && commonRight) {
              for (var key in permissionObj.table) {
                const table = permissionObj.table[key]
                if (table) {
                  if (commonRight == 'w') {
                    table['hidden'] = false
                    table['add'] = true
                    table['del'] = true
                  } else if (commonRight == 'r') {
                    table['add'] = false
                    table['del'] = false
                    table['required'] = false
                    table['edit'] = false
                  }
                }
                permissionObj.table[key] = table
              }
            }

            _me.permission = permissionObj
          }
          _me.html = rep.form.formHtml
          if (rep.form.helpFile) {
            _me.formHelpFile = JSON.parse(rep.form.helpFile)
          }
          if (_me.html.split('ref="next_step_check_').length > 1) {
            _me.$root.$emit('startFlowBtnChange', false)
          }
          //表单加载完成发布事件 审批按钮才可以点击
          _me.$root.$emit('formLoading', false)
          if (updateFormComponent) {
            _me.formComponentKey = new Date().getTime()
          }
        }
      }
      this.$store
        .dispatch('storeProcess/getUrgentStateConf', {
          defId: this.defId,
          instId: this.instId,
          taskId: this.taskId
        })
        .then(data => {
          if (data.conf) {
            try {
              data.conf = JSON.parse(data.conf)
            } catch (error) {
              data.conf = eval('(' + data.conf + ')')
            }
            window.urgentStateValue = {old: data.value}
            if (!data.value) {
              for (let index = 0, c; (c = data.conf[index++]); ) {
                if (c.default) {
                  data.value = c.state
                  break
                }
              }
            }
            _me.urgentStateConf = data
          }
        })
      if (this.taskId && this.tasks && JSON.stringify(this.tasks) != '{}') {
        if (
          !this.tasks.bpmTask &&
          !this.tasks.state &&
          this.tasks.message == '此任务已被处理或不存在！'
        ) {
          _me.$router.push('/v-flow/v-todo')
          return
        }
        this.taskDetailLoading = Loading.service({
          fullscreen: true,
          lock: true,
          text: '表单数据加载中，请耐心等待...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        }) //开始
        if (this.tasks.bpmTask.bpmnInstId) {
          form.taskDetail(
            {taskId: this.taskId, leaderId: this.leaderId},
            handler
          )
        } else {
          form.getInstFormAndBO(this.tasks.bpmTask.procInstId, handler)
        }
      } else if (
        this.taskId &&
        window.location.href.indexOf('/task/' + this.taskId + '/0') != -1
      ) {
        form.taskDetail({taskId: this.taskId, leaderId: this.leaderId}, handler)
        let params = {
          taskId: this.taskId,
          leaderId: this.leaderId
        }
        this.$store.dispatch('storeProcess/taskDetail', params) //获取操作按钮
      } else if (this.instId) {
        if ('start' != this.type) {
          this.isView = false
        }
        //查看我发起的，也使用发起流程的表单。只不过把编辑和必填权限改成只读
        if ('request' == this.type || 'myRequest' == this.myReadType) {
          form.getFormAndBO({proInstId: this.instId}, handler)
        } else if ('read' == this.type || this.myReadType) {
          const this_ = this
          if (this.readId) {
            //知会待办
            //根据待办知会任务主键ID获取任务ID
            this.$store
              .dispatch('storeProcess/getBpmTaskNoticeById', this_.readId)
              .then(row => {
                if (row.taskId) {
                  //根据任务Id获取审批历史数据（只有一条）
                  this.$store
                    .dispatch('storeProcess/getTaskKeyByTaskId', row.taskId)
                    .then(res => {
                      if (res.formData) {
                        this_.formData = res.formData
                      }
                      let isIncludData = res.formData ? false : true
                      form.getInstFormAndBO(
                        {
                          instId: this_.instId,
                          nodeId: res.taskKey,
                          includData: isIncludData
                        },
                        handler
                      )
                    })
                } else if (row.nodeId) {
                  let data = {
                    nodeId: row.nodeId,
                    instId: this_.instId
                  }
                  //根据任务节点ID和流程实例ID获取审批历史数据（只有一条）
                  this.$store
                    .dispatch('storeProcess/getTaskKeyByNodeId', data)
                    .then(res => {
                      if (res.formData) {
                        this_.formData = res.formData
                      }
                      let isIncludData = res.formData ? false : true
                      form.getInstFormAndBO(
                        {
                          instId: this_.instId,
                          nodeId: res.taskKey,
                          includData: isIncludData
                        },
                        handler
                      )
                    })
                } else {
                  //查看我发起的，也使用发起流程的表单
                  form.getFormAndBO({proInstId: this.instId}, handler)
                  // form.getInstFormAndBO(this_.instId, handler);
                }
              })
          } else if (this.readDoneId) {
            //知会已办
            //根据已办知会任务主键ID获取任务ID
            this.$store
              .dispatch(
                'storeProcess/getBpmTaskNoticeDoneById',
                this_.readDoneId
              )
              .then(row => {
                if (row.taskId) {
                  //根据任务Id获取审批历史数据（只有一条）
                  this.$store
                    .dispatch('storeProcess/getTaskKeyByTaskId', row.taskId)
                    .then(res => {
                      if (res.formData) {
                        this_.formData = res.formData
                      }
                      let isIncludData = res.formData ? false : true
                      form.getInstFormAndBO(
                        {
                          instId: this_.instId,
                          nodeId: res.taskKey,
                          includData: isIncludData
                        },
                        handler
                      )
                    })
                } else if (row.taskKey) {
                  let data = {
                    nodeId: row.taskKey,
                    instId: this_.instId
                  }
                  //根据任务节点ID和流程实例ID获取审批历史数据（只有一条）
                  this.$store
                    .dispatch('storeProcess/getTaskKeyByNodeId', data)
                    .then(res => {
                      if (res.formData) {
                        this_.formData = res.formData
                      }
                      let isIncludData = res.formData ? false : true
                      form.getInstFormAndBO(
                        {
                          instId: this_.instId,
                          nodeId: res.taskKey,
                          includData: isIncludData
                        },
                        handler
                      )
                    })
                } else {
                  //查看我发起的，也使用发起流程的表单
                  form.getFormAndBO({proInstId: this.instId}, handler)
                  // form.getInstFormAndBO(this.instId, handler);
                }
              })
          } else {
            //查看我发起的，也使用发起流程的表单
            form.getFormAndBO({proInstId: this.instId}, handler)
            // form.getInstFormAndBO(this.instId, handler);
          }
        } else {
          //查看我发起的，也使用发起流程的表单
          form.getFormAndBO({proInstId: this.instId}, handler)
          // form.getInstFormAndBO(this.instId, handler);
        }
      } else if (this.defId) {
        let data = {}
        if (this.proInstId != undefined) {
          data = {defId: this.defId, proInstId: this.proInstId}
        } else if (this.copyInstId) {
          data = {defId: this.defId, copyInstId: this.copyInstId}
        } else {
          data = {defId: this.defId}
        }
        form.getFormAndBO(data, handler)
      }
    },
    sendData() {
      this.$refs.iframe.contentWindow.postMessage({params: this.relationData})
    },
    getFlowKey() {
      if (this.defId || this.instId || this.taskId) {
        let url = '${bpmRunTime}/runtime/instance/v1/getFlowKey'
        if (this.defId) {
          url = url + '?defId=' + this.defId
        } else if (this.instId) {
          url = url + '?procInstId=' + this.instId
        } else if (this.taskId) {
          url = url + '?taskId=' + this.taskId
        }
        let _me = this
        try {
          _me.$http.get(url, 'json', false).then(resp => {
            const rep = resp.data
            if (rep.state) {
              _me.flowKey = rep.value
            }
          })
        } catch (error) {}
      }
    }
  },
  computed: {
    urgentStateValue: function() {
      return this.urgentStateConf.value
    },
    isPlmeformPage() {
      return this.$route.query.hasOwnProperty('plmeform')
    }
  },
  components: {OnlineForm, FilePreview}
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
@media print {
  .no-print {
    display: none;
  }
  .approve_content {
    padding: 0px !important;
  }
  .form-container-not {
    padding: 0px 0px 10px 0px !important;
  }
}

::v-deep .el-form-item {
  margin-bottom: 15px !important;
  margin-top: 10px !important;
  margin-right: 10px !important;
}

::v-deep .form-table {
  width: 100%;
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
}

::v-deep .form-table > thead > tr > th,
::v-deep .form-table > tbody > tr > th {
  text-align: right;
  color: #666;
  font-weight: normal;
}

::v-deep .form-table > tbody > tr > th.group-th {
  text-align: left;
  background: #f9f9f9;
  font-weight: bold;
}

::v-deep .form-table > thead > tr.sub-table-header > th {
  text-align: center;
  background: #fafafa;
}

::v-deep .form-table > tbody > tr > th > span,
::v-deep .form-table > thead > tr > th > span {
  color: #f00;
}

::v-deep .form-table > tbody > tr > th,
::v-deep .form-table > tbody > tr > td,
::v-deep .form-table > tfoot > tr > td,
::v-deep .form-table > thead > tr > th {
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  padding: 10px;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
}

::v-deep .form-table-noBorder {
  border-top: 0px solid #ebeef5;
  border-left: 0px solid #ebeef5;
}

::v-deep .form-table-noBorder > tbody > tr > th,
::v-deep .form-table-noBorder > tbody > tr > td,
::v-deep .form-table-noBorder > tfoot > tr > td,
::v-deep .form-table-noBorder > thead > tr > th {
  border-right: 0px solid #ebeef5;
  border-bottom: 0px solid #ebeef5;
}

::v-deep .form-table > tfoot > tr > td {
  padding: 5px 10px;
}

.form-container {
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.form-container-not {
  border-bottom: 1px solid #ebeef5;
  padding: 30px 0 10px 0;
}

.form-container-not > span {
  border-left: 3px solid $--theme-color;
  font-weight: bold;
  font-size: 14px;
  padding-left: 10px;
  color: #666;
}

.form-container > span {
  border-left: 3px solid $--theme-color;
  font-weight: bold;
  font-size: 14px;
  padding-left: 10px;
  color: #666;
}

.form-content {
  // padding: 11px 0;
}

::v-deep div[aria-invalid='true'] + small,
::v-deep small.error-message {
  display: block;
  margin-top: 8px;
  color: #f56c6c;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}

.urgent_state_div {
  display: inline-block;
  float: right;
}

.urgent_state_div > span {
  font-weight: bold;
  font-size: 14px;
  color: #666;
  padding-right: 5px;
}

::v-deep .el-radio__label {
  padding-left: 5px;
}

::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: none !important;
}

::v-deep .text-fixed p {
  margin: 0;
  margin-bottom: -2px;
}
.tab-container {
  height: calc(100vh - 146px);
}
.tab-container.start-flow {
  height: calc(100vh - 110px);
}
.brStyle {
  nulldivstyle: #fff;
}
</style>
