<template>
  <ifbp-page>
    <ifbp-breadcrumb name="新增"></ifbp-breadcrumb>
    <!--search-->
    <!-- 添加员工信息ui模板 -->
    <ifbp-main-area type="detail">
      <!-- 添加用户信息ui模板 -->
      <ifbp-panel title="用户信息">
        <ifbp-template 
                     ref="userFormRef"
                     tplId="userFormId"
                     :funnode="funnode"
                     :nexuskey="nexuskey"
                     show-type="form"
                     :tplData="userFormData"
                     :methods="userFormMethods"
                     :editable="userFormEdit"
                     :tpl-reset-fun="userTplResetFun"
                     @change="userChange">
        </ifbp-template>
        <div class="fr">
          <el-button @click="backInfo">取消</el-button>
          <el-button type="primary" @click="addUser">保存</el-button>
        </div>
        <div style="clear:both;"></div>
      </ifbp-panel>
    </ifbp-main-area>
  </ifbp-page>
</template>
<script>
  export default {
    data(){
      var vm = this;
      return {
        funnode: 'YHGL',
        nexuskey: 'USER_DETAIL',
        userFormData: {
          showRef:true,
          user: {}
        },
        userTplResetFun:function($node){
          // 自定义名称，判断是否使用参照
          var $userName = $node.find('el-form-item[prop="pk_base_doc"]');
          if($userName.length){
            $userName.html(
              '<el-ref v-if="showRef" :editable="editable" v-model="user.pk_base_doc" field="pk_base_doc" :template-value="user" ref-code="bdpsndoc"></el-ref>'+
              '<el-input v-else :editable="editable" v-model="user.user_name"></el-input>'
            );
          }
          // 在这里使用身份类型来替代名称user_name
          var $input = $node.find("el-ref[field='pk_base_doc']");
          $input.attr('v-on:trigger','userChangeFun');
          return $node[0].outerHTML;
        },
        userFormMethods: {
          // 根据名称参照，自动填充手机号和邮件，
          userChangeFun(type,val){
            if(type === 'change'){
              var data = val.value[0];
              var formData = vm.$refs.userFormRef.getFormData();
              vm.refData = data;
              formData.mobile = data.mobile;
              formData.email = data.email;
            } 
          }
        },
        refData: '',
        userFormEdit: true,
        isEdit: true,
        isEditUser: true,
        user_code_tpl: {}
      };
    },
    methods: {
      userChange(field,value){ 
        if(field === 'base_doc_type'){
          if(value === '0' || value === '1' || value === '2'){
            this.$refs.userFormRef.setData('showRef',true);
          } else {
            this.$refs.userFormRef.setData('showRef',false);
          }
          var data = this.$refs.userFormRef.getFormData();
            data.mobile = '';
            data.email = '';
            data.user_code = '';
            data.user_name = '';
            data.user_note = '';
            data.pk_base_doc = '';
        }
      },
      /**
       *  添加用户
       *
       **/
      addUser() {
        this.$refs.userFormRef.getFormComp().validate((valid) => {
          if(valid) {
            let submitData = this.$refs.userFormRef.getData("user");
            this.$set(submitData,'pk_base_doc',this.refData.id);
            let url = '/ifbp-app-sm/sm/user/create';
            this.$http({
              url: url,
              method: 'POST',
              data: submitData,
              dataType: 'json'
            }).then((res) => {
              if (res.data.success) {
                this.$message({
                  message: '添加成功！',
                  type: 'success'
                });
                this.$context.destroyCurrentTile();
                this.$router.push('/userInfo');
              } else {
                this.$message({
                  message: res.data.error.errorMessage,
                  type: 'error'
                });
              }
            }).catch(() => {
              this.$message({
                message: '接口调用失败！',
                type: 'error'
              });
            });
          }else {
            // 验证失败
          }
        });
      },
      backInfo(){
        this.$context.destroyCurrentTile();
        this.$router.push('/userInfo');
      }
  }
};

</script>
