<template>
  <div class="storeAffairsPlugin">
    <FormLayout
      :defaultColumn="defaultColumn"
      ref="FormLayout"
      :defaultconfig="dataList"
    >
      <div slot-scope="options" slot="content" class="formlayout-item">
        <!-- 组件label -->
        <slot name="label" :item="options.item">
          <div ref="label" :style="options.item.style">
            <span v-if="options.item.required" class="icon-tip">*</span>
            <span class="label-desc">
              <span :style="options.item.style">{{ options.item.label }}:</span>
            </span>
          </div>
        </slot>
        <component
          :is="options.item.type"
          v-show="options.item.show != false"
          v-model="options.item.props.value"
          v-bind="options.item.props"
          :disabled="options.item.disabled == true"
          @updataData="updataData"
          v-on="options.item.event"
        >
          <template v-if="options.item.type === 'Select'">
            <Option
              v-for="item in options.item.props.options"
              :key="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </Option>
          </template>
          <template v-if="options.item.type === 'RadioGroup'">
            <Radio
              v-for="item in options.item.props.options"
              :key="item.value"
              :label="item.value"
              :disabled="options.item.disabled == true"
            >
              {{ item.label }}
            </Radio>
          </template>
          <template v-if="options.item.type === 'CheckboxGroup'">
            <Checkbox
              v-for="item in options.item.props.options"
              :key="item.value"
              :label="item.label"
              :disabled="options.item.disabled == true"
            >
            </Checkbox>
          </template>
          <slot v-if="options.item.type === 'Button'">
            {{ options.item.props.value }}
          </slot>
        </component>
        <!-- 动态插槽 -->
          <!-- <div :slot="options.item.soltName">
            {{options.item.soltName}}
            <slot></slot>
        </div> -->
      </div>
      <!-- 卡槽 -->
      <div slot="operation" class="operation">
        <Button
          v-for="(oper, index) in operation"
          :key="index"
          v-on="oper.event"
          v-bind="oper.props"
          :style="oper.style"
          >{{oper.props.value}}</Button>
      </div>
    </FormLayout>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import SingDatePicker from "../../singDatePicker/src/index.vue";
import {
  Button,
  FormLayout,
  Checkbox,
  CheckboxGroup,
  Input,
  Select,
  Option,
  DatePicker,
  Options,
} from "@syman/ark-ui";
@Component({
  name: "posFormLayout",
  components: {
    Button,
    FormLayout,
    Checkbox,
    CheckboxGroup,
    Input,
    Select,
    Option,
    DatePicker,
    SingDatePicker,
    Options,
  },
})
export default class posFormLayout extends Vue {
  @Prop() private defaultColumn!: string | number;
  @Prop() private operation!: string[] | number[];
  @Prop({ default: [] })  data!: string[] | number[]
  
  @Watch("data", { immediate: true, deep: true })
  onDataChanged(val: any, oldVal: any) {
    let arr:any[] =[]
    val.map((o:any,i:number)=>{
      o.item.props.index = i
    })
    arr = [...val]
    const addOperation ={
      col: 8,
      item: {
        soltName: "operation"
      },
    }
    arr.push(addOperation)
    this.dataList = arr
  }
  private dataList:any[] = []
  private reset(): void {
    (this.$refs.FormLayout as any).reset();
  }
  private submit(cb:any): void {
    const verifyMessage = (this.$refs.FormLayout as any).verifyMessage();
    // if (verifyMessage.length) {
    //   //校验错误
    // } else {
    //   // 提交
    //   console.log("提交的数据", (this.$refs.FormLayout as any).formData);
    // }
    cb(verifyMessage,(this.$refs.FormLayout as any).formData)
  }
  private onblur(): void {
    return;
  }
  private updataData(v) { //手动更新数据
    this.dataList[v.index].item.props.value = v.data
  }
}
</script>
<style lang="less" scoped>
.formlayout-item {
  display: flex;
  align-items: center;
  width: 100%;
}
.operation{
  Button{
    font-size: 16px;
  }
}
</style>
