<template>
    <el-main class="base-main">
      <div style="width:96%; margin: 0px auto 0; background-color: #fff; padding: 20px; margin-top: 20px">
        <div id="printData">
          <div class="form-container">
            <span>表单内容</span>
          </div>
          <div class="form-content">
            <form v-if="html" data-vv-scope="custom-form">
              <online-form class="custom-form" :html="html" :data="data" :permission="permission" :isView="isView" ref="onlineForm" :isPrint="print" @loadSuccess="loadSuccess"/>
            </form>
          </div>
        </div>
        <div style="wdith: 100%; text-align: center; padding-top: 20px" ref="btnRegion">
          <el-button type="success" v-if="startFlow && startFlow != 'false' && action != 'get'" @click="start" :disabled="disabled">{{startLable}}</el-button>
          <el-button type="primary" icon="el-icon-printer" @click="printDetail()" :disabled="disabled">{{printLable}}</el-button>
          <el-button type="primary" @click="boSave()" v-if="isShow && action != 'editDraft'" :disabled="disabled">保存</el-button>
          <el-button type="primary" @click="boSaveAndDelDraft" v-if="action === 'editDraft'" :disabled="disabled">保存并删除草稿</el-button>
          <el-button type="primary" @click="boSaveDraft" v-if="!id" :disabled="disabled">保存至草稿</el-button>
          <el-button type="error" @click="close(false)">返回</el-button>
        </div>
      </div>
    </el-main>
</template>
<script>
import OnlineForm from '@/components/flow/OnlineForm.vue';
import form from '@/api/form.js';
import utils from '@/utils.js';
export default {
  name: 'formContent',
  props: ['templateKey', 'action', 'isShare',"openType"],
  data() {
    return {
      alias_new: 'statement',
      html: null,
      data: null,
      permission: null,
      reloadOnlineForm: false,
      isView: true,
      disabled: false,
      boAlias: '',
      id: '',
      startFlow: false,
      recordId: '',
      defKey: '',
      formKey: '',
      fillField: '',
      fillValue: '',
      bindList: [],
      print: false,
      isShow: true,
      tempAlias: '',
      startLable: '发起流程',
      printLable: '打印',
    };
  },
  components: { OnlineForm },
  updated() {
    let result = window.location.href.split('?')[0].split('/');
    if (result[result.length - 1] == 'get' || result[result.length - 2] == 'get') {
      this.isShow = false;
    }
    //判断是否显示发起流程按钮
    if(window.location.href.split('?')[1] && window.location.href.split('?')[1].split('&')){
      if(window.location.href.split('?')[1].split('&')[1] && window.location.href.split('?')[1].split('&')[1]=="startFlow=false"){
        this.startFlow = false;
      }
    }

  },
  methods: {
    loadSuccess(){
      if (this.$route.query.isPrint) {
        this.printDetail();
      }
    },
    printDetail() {
      this.$refs.btnRegion.style.display = "none";
      setTimeout(() => {
        document.getElementsByTagName('body')[0].style.zoom = 0.8;
        window.print();
        this.$refs.btnRegion.style.display = "block";
        if (this.$route.query.isPrint){
          this.close(false)
        }
        document.getElementsByTagName('body')[0].style.zoom = 1;
      }, 500);
    },
    //启动
    start() {
      utils
        .getOnlineFormData(true)
        .then((formDataStr) => this.processStart(formDataStr))
        .catch((reason) => utils.handleGetFormDataReject(reason).then(() => this.processStart()));
    },
    processStart(formDataStr) {
      utils.closeAllNotification();
      let data = { flowKey: this.defKey };
      if (formDataStr) {
        data.data = Base64.encode(formDataStr);
      }
      this.disabled = true;
      this.$store
        .dispatch('storeProcess/start', data)
        .then(() => {
          this.close(true);
        })
        .catch(() => {
          this.disabled = false;
        });
    },
    //保存
    boSave(delDraftId) {
      utils
        .getOnlineFormData(true)
        .then((formDataStr) => {
          utils.closeAllNotification();
          let _me = this;
          // for (let i=0; i<_me.$validator.errors.items.length; i++) {
          //   if(_me.$validator.errors.items[i].rule == "required"){
          //     this.$message.warning("请将信息填写完整");
          //     return false;
          //   }
          // }
          let data = {
            boAlias: this.boAlias,
            boData: utils.parseToJson(formDataStr),
          };
          //数据视图控件
          // if (this.fillField && this.fillField != "") {
          //   let fillField = this.fillField;
          //   data.boData[this.boAlias][fillField] = this.fillValue;
          // }
          this.disabled = true;

          if (delDraftId) {
            data.delDraftId = delDraftId;
          }
          data.formKey = this.formKey;
          data.templateKey = this.templateKey;
          this.$store.dispatch('form/boSave', data).then((result) => {
            if (result.state) {
              //当操作为编辑是，点击保存成功后提示继续编辑还是返回
              if (this.action === 'edit' || this.action === 'add') {
                this.$message.success(result.message);
                this.$confirm('保存成功，是否退出？', '提示', {
                  confirmButtonText: '立即退出',
                  cancelButtonText: '继续操作',
                  type: 'warning',
                })
                  .then(() => {
                    this.close(false);
                  })
                  .catch(() => {
                    this.$refs.onlineForm.init();
                    this.disabled = false;
                    if (this.action === 'editDraft') {
                      this.editDraftHandler();
                    } else {
                      this.handler();
                    }
                  });
              } else {
                this.close(true);
              }
            } else {
              this.disabled = false;
            }
          });
        })
        .catch((reason) => utils.handleGetFormDataReject(reason));
    },
    boSaveAndDelDraft() {
      this.boSave(this.draftId);
    },
    //保存
    boSaveDraft() {
      const this_ = this;
      utils
        .getOnlineFormData(false)
        .then((formDataStr) => {
          utils.closeAllNotification();
          let _me = this;
          let data = {
            tempAlias: this.tempAlias,
            dataJson: formDataStr,
          };
          if (this.draft) {
            data.id = this.draft.id;
            data.title = this.draft.title;
            data.createBy = this.draft.createBy;
            data.createTime = this.draft.createTime;
          }
          //数据视图控件
          // if(this.bindList && this.bindList.length >0) {
          //   for(var i=0;i<this.bindList.length;i++){
          //     data.boData[this.boAlias][this.bindList[i].key] = this.bindList[i].value;
          //   }
          // }
          this.disabled = true;
          this.$store.dispatch('form/boSaveDraft', data).then((result) => {
            if (result.state) {
              this.$message.success(result.message);
              let dataViewFlag = false;
              //数据视图随机添加到其他菜单下面时获取当前菜单的别名  并且当前数据视图不是表单里的数据视图  dataViewFlag
              if (sessionStorage.menu_alias && !(this_.fillField && this_.fillField != '')) {
                this.alias_new = sessionStorage.menu_alias;
              }
              //判断当前数据视图是不是表单里的数据视图
              if(this.bindList && this.bindList.length >0) {
                dataViewFlag = true;
              }
              if (_me.isShare) {
                _me.close(true);
                return;
              }
              let path = ""
              if(this.openType == "new"){
                path = `/statement/draftList/${this.tempAlias}/${dataViewFlag}?isNew=true`;
              }else{
                path = '/' + this.alias_new + '/draftList/' + this.tempAlias + '/' + dataViewFlag;
              }
              this.$router.push(path);
              // this.$router.push("/statement/draftList");
            } else {
              this.disabled = false;
              this.$message.error(result.message);
            }
          });
        })
        .catch((reason) => utils.handleGetFormDataReject(reason));
    },

    //关闭窗口
    close(isDelay) {
      utils.closeAllNotification();
      let _me = this;
      let url = window.location.href;
      let arr = url.split('?');
      if (isDelay) {
        setTimeout(function () {
          if (_me.isShare) {
             _me.$router.push("/messageFillPage/1");
             return;
          }
          if (arr.length > 1) {
            let param = url.split('?')[1].split('&');
            if (param.includes('isNewPage=true')) {
               _me.$router.push("/messageFillPage/1");
               return;
            }
          }
          if(_me.openType == "new"){
            //跳转到草稿
            let dataViewFlag = false;
            if(_me.bindList && _me.bindList.length >0) {
              dataViewFlag = true;
            }
            _me.$router.push(
              `/statement/draftList/${_me.tempAlias}/${dataViewFlag}?isNew=true`
            )
          }else{
            _me.$router.go(-1);
          }
        }, 2000);
      } else {
        if (_me.isShare) {
             _me.$router.push("/messageFillPage/1");
        }else{
          if(_me.openType == "new"){
            window.close();
          }else{
            //打印取消之后会导致路由发生变化,不能直接回到上一个页面
            let menuAlias = "statement";
            //发布到其它菜单的别名
            if(sessionStorage.menu_alias){
              menuAlias = sessionStorage.menu_alias;
            }
            let url = "/"+ menuAlias + "/template/preview/" + _me.templateKey;
            if(_me.$route.meta && _me.$route.meta.single){
              url += "/true";
            }
            _me.$router.push(url);
          }

          // _me.$router.go(-1);
        }

      }
    },
    handler() {
      let _me = this;
      let data = {
        formKey: _me.formKey,
        boAlias: _me.boAlias,
        id: _me.id ? _me.id : '',
        action: _me.action,
        recordId: _me.recordId ? _me.recordId : '',
        dataKey: _me.templateKey ? _me.templateKey : '',
      };
      _me.$store.dispatch('form/getTemplateForm', data).then((rep) => {
        if (rep.result) {
          _me.data = rep.data;
          //数据视图控件
          if(_me.bindList && _me.bindList.length >0) {
            for(var i=0;i<_me.bindList.length;i++){
              if (_me.data[_me.boAlias][_me.bindList[i].key] == '') {
                // 回填数据
                _me.data[_me.boAlias][_me.bindList[i].key] = _me.bindList[i].value;
              }
            }
          }
          //是否是数据报表明细
          if (rep.permission && _me.action == 'get') {
            const permissionObj = rep.permission;
            let commonRight = '';
            //如果是管理端进入，则将页面字段的权限修改为可编辑
            if (_me.type == 'manage') {
              commonRight = 'w';
              //如果是查看实例，也是获取发起流程的表单和权限。只不过所有可见的权限要变成编辑
            } else {
              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;
          } else {
            _me.permission = rep.permission;
          }
          _me.html = rep.form.formHtml;
          this.handlerJs(rep.form);
        }
      });
    },
    handlerJs(rep) {
      let _me = this;
      _me.reloadOnlineForm = true;
      const currentUser = _me.$store.state.login.currentUser;

      let data = _me.data;
      let _this = _me;
      setTimeout(()=>{
        eval(rep.diyJs);
      },10)
    },
    editDraftHandler() {
      let _me = this;
      _me.$store.dispatch('form/getTempDraftData', _me.draftId).then((rep) => {
        if (rep.result) {
          _me.data = rep.data;
          _me.draft = rep.draft;
          if (rep.permission) {
            _me.permission = rep.permission;
          }
          _me.html = rep.form.formHtml;
          this.handlerJs(rep.form);
        }
      });
    },
    init() {
      var $ = require('jquery');
      this.id = utils.getUrlKey('id');
      this.startFlow = utils.getUrlKey('startFlow');
      this.recordId = utils.getUrlKey('recordId');
      let bindList = utils.getUrlKey("bindList");
      if(bindList){
        this.bindList = JSON.parse(Base64.decode(decodeURIComponent(bindList)));
      }
      this.draftId = utils.getUrlKey('draftId');
      this.isView = (this.action !== 'get');
      let _me = this;

      this.$store
        .dispatch('form/getBpmDataTemplateInfo', {
          templateKey: this.templateKey,
        })
        .then((result) => {
          if (result.state) {
            if (result.value.allowShare == 2 && _me.isShare) {
               _me.$router.push("/messageFillPage/5");
              return;
            }
            _me.boAlias = result.value.boDefAlias;
            _me.defKey = result.value.defId;
            _me.formKey = result.value.formKey;
            _me.tempAlias = result.value.alias;
            if (result.value.manageField) {
              let re = JSON.parse(result.value.manageField);
              re.forEach((item) => {
                if (item.name == 'startFlow') {
                  this.startFlow = true;
                  this.startLable = item.desc;
                }else if(item.name == 'print'){
                  this.printLable = item.desc;
                }
              });
            } else {
              this.startFlow = true;
            }
            this.reloadOnlineForm = false;
            //如果编辑的是草稿数据
            if (this.action === 'editDraft') {
              this.editDraftHandler();
            } else {
              this.handler();
            }
          }
        });
    }
  },
  created() {
    this.init();
  },
  watch: {
    templateKey: function (n, o) {
      if (n && o && n != o) {
        this.init();
      }
    },
    //控件的联动会导致表单的permission发生变化，联动显示会变成'w'，需要改回原来的权限
    permission:{
      handler(newVal,oldVal){
        if(this.formKey && this.action == "get"){
          for(let key in newVal.fields[this.formKey]){
            if(newVal.fields[this.formKey][key] == 'w'){
              newVal.fields[this.formKey][key] = 'r';
            }
          }
        }
      },
      deep: true
    }
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
/deep/.el-form-item {
  margin-bottom: 15px !important;
  margin-top: 10px !important;
  margin-right: 10px !important;
}
.base-main {
  background-color: #e9eef3;
  height: 100%;
}

/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 > tfoot > tr > td {
  padding: 5px 10px;
}

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

.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;
}
.form-empty {
  position: absolute;
  text-align: center;
  width: 100%;
  font-size: 20px;
  top: 200px;
  color: #ccc;
}
</style>
