<template>
  <div style="margin-bottom: 5px">
    <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 ">
          <iframe v-iframetrigger id="frmFrame" name="frmFrame" style="height:100%;width:100%;border:0px"
            :src="htmlSrc"></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"
  ],
  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()
    };
  },
  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;
          _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);
      }
    },
    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;
  }
}
/deep/.el-form-item {
  margin-bottom: 15px !important;
  margin-top: 10px !important;
  margin-right: 10px !important;
}
/deep/ .form-table {
  width: 100%;
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
}

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

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

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

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

/deep/ .form-table > tbody > tr > th,
/deep/ .form-table > tbody > tr > td,
/deep/ .form-table > tfoot > tr > td,
/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;
}

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

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

/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;
}

/deep/ div[aria-invalid="true"] + small,
/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;
}

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

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

/deep/.text-fixed p {
  margin: 0;
  margin-bottom: -2px;
}
.tab-container {
  height: 600px;
}
.brStyle {
  nulldivstyle: #fff;
}
</style>
