import { Vue, Prop } from 'vue-property-decorator';
import { Watch } from '../../../../decorators';

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

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

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

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

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

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

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

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

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

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