import { IPSDEFormDetail } from '@ibizstudio/runtime';
import { Vue, Prop, Watch } from 'vue-property-decorator';

/**
 * 表单成员基类
 *
 * @export
 * @class AppDefaultFormDetail
 * @extends {Vue}
 */
export class AppDefaultFormDetail extends Vue {
  /**
   * 表单成员实例对象
   *
   * @type {*}
   * @memberof AppDefaultFormDetail
   */
  @Prop() declare detailsInstance: IPSDEFormDetail;

  /**
   * 表单成员索引
   *
   * @type {number}
   * @memberof AppDefaultFormDetail
   */
  @Prop({ default: 0 }) index!: number;

  /**
   * 表单模型对象
   *
   * @type {any}
   * @memberof AppDefaultFormDetail
   */
  @Prop() formModel!: any;

  /**
   * 表单模型对象
   *
   * @type {any}
   * @memberof AppDefaultFormDetail
   */
  @Prop() declare controlInstance: any;

  /**
   * 表单成员运行时模型对象
   *
   * @type {any}
   * @memberof AppDefaultFormDetail
   */
  @Prop() runtimeModel!: any;

  /**
   * 应用上下文
   *
   * @type {any}
   * @memberof AppDefaultFormDetail
   */
  @Prop() context: any;

  /**
   * 视图参数
   *
   * @type {any}
   * @memberof AppDefaultFormDetail
   */
  @Prop() viewparams: any;

  /**
   * 模型服务对象
   *
   * @memberof AppDefaultFormDetail
   */
  @Prop() modelService?: any;

  /**
   * 监听表单成员实例对象变化
   *
   * @type {*}
   * @memberof AppDefaultFormDetail
   */

  @Watch('detailsInstance', { immediate: true })
  detailsInstanceChange() {
    this.initDetail();
  }

  /**
   * 绘制参数
   *
   * @type {*}
   * @memberof AppDefaultForm
   */
  renderOptions: any = {
    detailClassNames: {},
  };

  /**
   * 初始化解析formModel
   *
   * @memberof AppDefaultForm
   */
  initDetail() {
    const sysCss = this.detailsInstance.getPSSysCss();
    this.renderOptions = {};
    // 表单成员类名
    const detailClassNames: any = {};
    if (sysCss?.cssName) {
      Object.assign(detailClassNames, { [sysCss?.cssName]: true });
    }
    this.$set(this.renderOptions, 'detailClassNames', detailClassNames);
  }
}