<script>
import '../hotent.helper.js'
  export default {
    data() {
      return {
        qjr: "",
        kssj: "",
        jssj: "",
        sc: 0,
        qjlx: "",
        sm: "",
      };
    },
    created() {
      window.currentVM = this;
      setTimeout(() => {
        // 1.传递渲染完成后的页面高度
        const height = window.document.body.clientHeight + 60;
        hotent.sendMessage({ type: "height", height });
      }, 500);

      // 2.获取url地址参数的id值后，通过id从业务系统后台获取对应的业务表单数据
      setTimeout(() => {
        // 获取url地址中的id值
        const idVal = getUrlParam("id");
        if (idVal) {
          //TODO 调用后台接口，通过id获取业务表单数据
          this.qjr = "张三";
          this.kssj = "2022-04-15";
          this.jssj = "2022-04-16";
          this.sc = 2;
        }
      }, 300);
    },
  };

  // 3.启动或者审批过程中传递表单数据
window.saveData = function (alias) {
   
    if(alias) {
      /**
       * alias 如果是按钮组，会是 agree-before、agree-submission 、agree-after这种形式
       * alias[0] 表示个是点击按钮的类型
       *  - 可选值
       *    startFlow: '启动',
       *    agree: '同意',
       *    reject: '驳回',
       *    inqu: '征询',
       *    saveDraft: '保存',
       *    endProcess: '终止',
       *    startTrans: '流转',
       *    oppose: '反对',
       *    addSign: '加签',
       *    revoke: '撤回',
       *    cancel: '取消',
       *    close: '关闭'
       * alias[1] 表示的是触发的时机
       *  - 可选值：
       *  1. before 表示触发时机是点击页面下方按钮，这里可以通过发送消息 hotent.sendMessage({type: 'saveData',state: false, message: '表单校验失败'}) 进行拦截弹窗出现，可用于做 URL 表单的必填项校验
       *  2. submission 表示触发时机是点击弹窗的确定按钮
       *  3. after 表示触发时机是点击弹窗确定按钮（且接口请求都成功）后
       */
      const aliasArr = alias.split('-')
      const name = aliasArr[0]
      const COMPONENTS_MAP = {
        startFlow: '启动',
        agree: '同意',
        reject: '驳回',
        inqu: '征询',
        saveDraft: '保存',
        endProcess: '终止',
        startTrans: '流转',
        oppose: '反对',
        addSign: '加签',
        revoke: '撤回',
        cancel: '取消',
        close: '关闭'
      }
      const triggerTiming = {
        before: "点击页面下方触发，可以通过 hotent.sendMessage({type: 'saveData',state: false, message: '表单校验失败'})进行拦截数据保存",
        submission: '点击弹窗的确定按钮立即触发',
        after: '点击弹窗的确定按钮后会触发'
      }
      const styles = [
        'color: green',
        'font-size: 16px',
        'border: 1px solid red',
        'padding: 5px',
      ].join(';');
      console.log(`%c当前点击按钮是【${COMPONENTS_MAP[name]}】`, styles)
      console.log(`%c触发时机 => ${triggerTiming[aliasArr[1]]}`, styles)
    }
    if (!window.currentVM) {
      alert("当前页面未获取到Vue实例.");
    }
    const { qjr, kssj, jssj, sc, qjlx, sm } = window.currentVM;

    // (1).调用应用系统的后台接口保存表单数据
    // req.post(url, { qjr, kssj, jssj, sc, qjlx, sm }).then((response) => {
    // (2).模拟后台完成表单数据保存后，通知eip系统
    //   const { state, id } = response
    //   hotent.sendMessage({
    //     type: "saveData",
    //     state,
    //     sysCode: "demo",
    //     businessKey: id,
    //     vars: { sc },
    //   });
    // })

    // 因为没有对应的后台接口，这里延迟1秒后直接通知eip系统
    setTimeout(() => {
      hotent.sendMessage({
        type: "saveData",
        state: true, // 数据保存是否成功，返回 false 时中断流程发起或任务审批的动作。
        message: '表单校验',
        sysCode: "demo", // 业务系统编码
        businessKey: "1", // 业务数据主键，返回这条业务数据对应的主键
        vars: { sc }, // 流程变量
      });
    }, 1000);
  };

  // 获取url地址栏参数
  window.getUrlParam = function (key) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");
      if (pair[0] == key) {
        return pair[1];
      }
    }
    return false;
  };
</script>

<template>
  <h2>申请人</h2>
  <input v-model="qjr" />

  <h2>开始时间</h2>
  <input type="date" v-model="kssj" />

  <h2>结束时间</h2>
  <input type="date" v-model="jssj" />

  <h2>时长</h2>
  <input v-model="sc" />

  <h2>请假类型</h2>
  <input v-model="qjlx" />

  <h2>请假原因</h2>
  <textarea v-model="sm"></textarea>
</template>