<template>
 <div class='app-form-part' v-if="loadState">
    <avue-form :option="formOption" v-model="formVal"></avue-form>
  </div>
</template>
<script lang = 'ts'>
import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
import { Subject, Subscription } from "rxjs";
import { LogUtil } from '@ibizstudio-ex/runtime';
@Component({
})
export default class AppFormPart extends Vue {

  /**
   * 系统名称
   *
   * @type {string}
   * @memberof AppFormPart
   */
  @Prop() systemCodeName!: string;

  /**
   * 应用名称
   *
   * @type {string}
   * @memberof AppFormPart
   */
  @Prop() appCodeName!: string;

  /**
   * 实体名称
   *
   * @type {string}
   * @memberof AppFormPart
   */
  @Prop() deCodeName!: string;

  /**
   * 表单代码标识
   *
   * @type {string}
   * @memberof AppFormPart
   */
  @Prop() formCodeName!: string;

  /**
   * 表单成员标识
   *
   * @type {string}
   * @memberof AppFormPart
   */
  @Prop() formDetailCodeName!: string;

  /**
   * 当前表单项名称
   *
   * @type {string}
   * @memberof AppFormPart
   */
  @Prop() name!: string;

  /**
   * 导航上下文
   *
   * @type {string}
   * @memberof AppFormPart
   */
  @Prop() context!: any;

  /**
   * 导航参数
   *
   * @type {string}
   * @memberof AppFormPart
   */
  @Prop() viewparams!: any;

  /**
   * 表单数据
   *
   * @type {any}
   * @memberof AppFormPart
   */
  @Prop() data: any;

  /**
   * 表单状态对象
   *
   * @type {Subject<any>}
   * @memberof AppFormPart
   */
  @Inject('formState')
  formState!: Subject<any>

  /**
   * 订阅对象
   *
   * @protected
   * @type {(Subscription | undefined)}
   * @memberof AppFormPart
   */
  formStateEvent: Subscription | undefined;

  /**
   * 远程地址
   *
   * @protected
   * @type {(Subscription | undefined)}
   * @memberof AppFormPart
   */
  remoteUrl:string =`/lite/${this.systemCodeName.toLowerCase()}-${this.appCodeName.toLowerCase()}/components/${this.formDetailCodeName.toLowerCase()}`;

  /**
   * 动态表单配置对象
   *
   * @type {*}
   * @memberof AppFormPart
   */
  formOption:any;

  /**
   * 当前动态表单绑定值
   *
   * @type {*}
   * @memberof AppFormPart
   */
  curFormValue:any = {};

  /**
   * 获取动态表单值对象
   *
   * @type {*}
   * @memberof AppFormPart
   */
  get formVal(){
      return this.curFormValue;
  }

  /**
   * 设置动态表单值对象
   *
   * @type {*}
   * @memberof AppFormPart
   */
  set formVal(data:any){
      this.$emit("change",{name:this.name,value:data});
  }

  /**
   * 加载数据状态
   *
   * @type {*}
   * @memberof AppFormPart
   */
  loadState:boolean = false;

  /**
   * 初始化组件（vue生命周期）
   *
   * @type {Subject<any>}
   * @memberof AppFormPart
   */
  created(){
    if (this.formState) {
      this.formStateEvent = this.formState.subscribe(({ type, data }) => {
        if (Object.is("load", type)){
            this.loadRemoteFormModel().then((result:any) =>{
                this.initStateData(result);
            })
        }
      });
    }
  }

  /**
   * 初始化状态数据
   *
   * @type {Subject<any>}
   * @memberof AppFormPart
   */
  initStateData(modelData:any){
    this.computedFormVal(modelData);
    this.formOption = modelData;
    this.loadState = true;
  }

  /**
   * 计算动态表单绑定数据
   *
   * @type {Subject<any>}
   * @memberof AppFormPart
   */
   computedFormVal(modelData:any){
    this.curFormValue = {};
    if(modelData && modelData.column && modelData.column.length > 0){
        modelData.column.forEach((element:any) => {
            Object.assign(this.curFormValue,{[element.prop]:null});
        });
    }
    if(Object.keys(this.curFormValue).length > 0){
        Object.keys(this.curFormValue).forEach((item:any) =>{
            if(this.data && this.data[item]){
                this.curFormValue[item] = this.data[item];
            }
        })
    }
  }

  /**
   * 加载动态表单数据模型
   *
   * @type {Subject<any>}
   * @memberof AppFormPart
   */
  loadRemoteFormModel(){
    return new Promise((resolve:any,reject:any) =>{
        this.$http.get(this.remoteUrl).then((res:any) =>{
            if(res.status && res.status == 200){
                let result:any = res.data;
                resolve(result);
            }else{
                LogUtil.warn(this.$t('components.part.error'));
            }
        }).catch((error:any) =>{
            LogUtil.warn(this.$t('components.part.error'));
        })
    })
  }

  /**
   * 销毁组件（vue生命周期）
   *
   * @type {Subject<any>}
   * @memberof AppFormPart
   */
  destroyed(){
      if(this.formStateEvent){
        this.formStateEvent.unsubscribe();
      }
  }

}
</script>
<style lang = "less">
@import './app-form-part.less';
</style>