<template>
  <div :class="classNames">
    <template v-if="mode === 'STYLE2'">
      <div class="app-form-mdctrl-repeater__content">
        <el-table :show-header="true" border :data="data">
          <el-table-column
            align="center"
            class-name="grid-column__localaction"
            width="64"
          >
            <template #header>
              <el-button
                type="primary"
                class="repeater-add"
                icon="el-icon-plus"
                size="mini"
                circle
                @click="handleAdd"
              ></el-button>
            </template>
            <template #default="{ row, column, $index }">
              <div class="repeater-grid-column">
                <span class="grid-column__localaction__index">{{
                  $index + 1
                }}</span>
                <el-button
                  class="repeater-remove-style2"
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  circle
                  @click="handleRemove(row, $index)"
                ></el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :prop="key"
            :align="columnAlign"
            v-for="key of Object.keys(children)"
            :key="key"
          >
            <template #header>
              {{ children[key].caption }}
            </template>
            <template #default="{ row, column, $index }">
              <slot
                :name="key"
                :data="row"
                :context="context"
                :viewparams="viewparams"
                :onFormItemValueChange="
                  ($event) => onFormItemValueChange($index, $event)
                "
              ></slot>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <template v-else>
      <div
        class="app-form-mdctrl-repeater__header"
        v-show="!(mode === 'STYLE3' && data.length >= 1)"
      >
        <span class="repeater-caption" v-if="showCaption && caption">{{
          caption
        }}</span>
        <el-button
          type="primary"
          class="repeater-add"
          icon="el-icon-plus"
          size="mini"
          circle
          @click="handleAdd"
        ></el-button>
      </div>
      <div class="app-form-mdctrl-repeater__content">
        <template v-for="(item, vIndex) of data">
          <row class="app-form-mdctrl-repeater__row">
            <el-button
              class="repeater-remove-default"
              type="danger"
              size="mini"
              circle
              icon="el-icon-delete"
              @click="handleRemove(item, vIndex)"
            >
            </el-button>
            <slot
              :context="context"
              :viewparams="viewparams"
              :data="item"
              :onFormItemValueChange="
                ($event) => onFormItemValueChange(vIndex, $event)
              "
            ></slot>
          </row>
        </template>
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import { Subject } from "rxjs";
import { Vue, Component, Prop, Model } from "vue-property-decorator";

@Component({})
export default class AppFormMdCtrlRepeater extends Vue {
  /**
   * 应用上下文
   * 
   * @type {*}
   * @memberof AppFormMdCtrlRepeater
   */
  @Prop() public context: any;

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

  /**
   * 表单通讯状态
   * 
   * @type {Subject<any>}
   * @memberof AppFormMdCtrlRepeater
   */
  @Prop() public formState!: Subject<any>;

  /**
   * 项名称
   * 
   * @type {string}
   * @memberof AppFormMdCtrlRepeater
   */
  @Prop() public name!: string;

  /**
   * 层级
   * 
   * @type {number}
   * @memberof AppFormMdCtrlRepeater
   */
  @Prop({ default: 0 }) public level?: number;

  /**
   * 数据
   * 
   * @type {any[]}
   * @memberof AppFormMdCtrlRepeater
   */
  @Model() public data!: any[];

  /**
   * 模式
   * 
   * @type {string}
   * @memberof AppFormMdCtrlRepeater
   */
  @Prop({ default: "DEFAULT" }) public mode?:
    | "DEFAULT"
    | "STYLE2"
    | "STYLE3"
    | string;

  /**
   * 是否显示标题
   * 
   * @type {boolean}
   * @memberof AppFormMdCtrlRepeater
   */
  @Prop({ default: true }) public showCaption?: boolean;

  /**
   * 标题
   * 
   * @type {string}
   * @memberof AppFormMdCtrlRepeater
   */
  @Prop() public caption!: string;

  /**
   * 子集合
   * 
   * @type {*}
   * @memberof AppFormMdCtrlRepeater
   */
  @Prop({
    default: () => {
      return {};
    },
  })
  public children: any;

  /**
   * 应用上下文
   * 
   * @type {"center" | "left" | "right"}
   * @memberof AppFormMdCtrlRepeater
   */
  @Prop({ default: "center" }) public columnAlign?: "center" | "left" | "right";

  /**
   * 样式表
   * 
   * @type {*}
   * @memberof AppFormMdCtrlRepeater
   */
  get classNames() {
    return {
      "app-form-mdctrl-repeater": true,
      [`app-form-mdctrl-repeater--${this.name.toLowerCase()}`]: true,
      [`app-form-mdctrl-repeater--${(this.mode || "DEFAULT").toLowerCase()}`]:
        true,
      [`app-form-mdctrl-repeater__level-${this.level}`]: true,
    };
  }

  /**
   * 处理数据增加
   * 
   * @memberof AppFormMdCtrlRepeater
   */
  public handleAdd() {
    const item = {};
    Object.keys(this.children).forEach((key: string) => {
      Object.assign(item, {
        [key]: this.children[key].type === "MDCTRL" ? [] : null,
      });
    });
    if (!this.data) {
      this.data = [];
    }
    if (this.mode === "STYLE2") {
      this.data.unshift(item);
    } else {
      this.data.push(item);
    }
  }

  /**
   * 处理数据删除
   * 
   * @memberof AppFormMdCtrlRepeater
   */
  public handleRemove(data: any, index: number) {
    this.data.splice(index, 1);
  }

  /**
   * 处理数据项变化
   * 
   * @memberof AppFormMdCtrlRepeater
   */
  public onFormItemValueChange(
    index: number,
    { name, value }: { name: string; value: any }
  ) {
    if (!name) {
      return;
    }
    this.data[index][name] = value;
  }
}
</script>
<style lang="less">
@import "./app-form-mdctrl-repeater.less";
</style>
