<template>
  <div class="test-area-contaienr">
    <!-- UI模板组件 -->
    <ifbp-template ref="tplRef"
      :funnode="funnode"
      :nexuskey="nexuskey"
      :tpl-data="tplData"
      :editable="tplEditable"
      show-type="form">
    </ifbp-template>

    <!-- button -->
    <div class="test-btn-container clearfix">
      <el-button @click="tplEditable = !tplEditable">切换编辑态</el-button>
      <el-button @click="clearRef">清空参照</el-button>
      <el-button @click="clearRefAndSetEditable">先清后切</el-button>
      <el-button @click="setEditableAndClear">先切后清</el-button>
    </div>

    <div>{{ JSON.stringify(blobResData) }}</div>


    <div class="ref-container">
      <el-ref
        ref-code="uitemplate_treeGridref"
        field="pk_tree_table"
        :template-value="refTemplateTreeTable"
        :is-muti-select="true">
      </el-ref>
    </div>

    <!-- button -->
    <div class="test-btn-container clearfix">
      <el-button @click="setPK('hradmin030000000017')">setPK</el-button>
      <el-button @click="setPK('hradmin030000000016')">setPK2</el-button>
      <el-button @click="setPKs('hradmin030000000016,hradmin030000000017')">setPKs</el-button>
    </div>
    <div class="ref-container">
      <el-ref
        ref="testSetPK"
        ref-code="defdoc"
        field="a"
        :template-value="refTemplateSetPK">
      </el-ref>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    var vm = this;
    return {
      funnode:'CXMB',
      nexuskey:'TEST_UITemplateRefBug',
      tplData: {},
      tplEditable: true,
      blobResData: {},
      refTemplateTreeTable: {
        pk_tree_table: ''
      },
      refTemplateSetPK: {
        a: ''
      }
    };
  },
  methods: {
    clearRef() {
      let formTplData = this.$refs.tplRef.getFormData();
      if (formTplData) {
        formTplData.pk_group = '';
        formTplData.pk_org = '';
      }
    },
    clearRefAndSetEditable() {
      this.clearRef();
      this.tplEditable = false;
    },
    setEditableAndClear() {
      this.tplEditable = false;
      this.clearRef();
    },
    setPK(pk) {
      this.$refs.testSetPK.setPK(pk)
    },
    setPKs(pks) {
      this.$refs.testSetPK.setPKs(pks);
    },
  },
  created() {
  }
};
</script>

<style scoped>
  .test-area-contaienr {
    padding-top: 40px;
  }
  .test-btn-container {
    padding: 20px;
  }
  .test-btn-container .el-button {
    float: left;
  }
  .test-area-contaienr .ref-container {
    width: 40%;
  }
</style>
