<template>
  <dialog-view
    ref="dialogView"
    v-bind="$attrs"
    v-on="$listeners"
    :before-close="beforeClose"
    :visible.sync="visible"
    :width="width"
    @button-click="buttonClick"
  >
    <template #dialogBody>
      <slot name="header"></slot>
      <div class="content" v-if="Object.keys(formItems).length">
        <slot name="contentHeader"></slot>
        <formView
          ref="formView"
          v-bind="$attrs"
          v-on="$listeners"
          :formItems="editFormItem"
          :setFormItemFlex="setFormItemFlex"
          @update-form="dialogUpdateForm"
        >
          <template #columns>
            <slot name="columns"></slot>
          </template>
          <template
            v-for="i in editFormItem &&
            editFormItem.form &&
            editFormItem.form.find(p => p.type === 'choiceSku') &&
            editFormItem.form.find(p => p.type === 'choiceSku').choiceSkuColumns
              ? editFormItem.form.find(p => p.type === 'choiceSku')
                  .choiceSkuColumns
              : []"
            v-slot:[i.customSlot]="slotProps"
          >
            <slot
              :name="i.customSlot"
              v-bind:customSlotData="slotProps.customSlotData"
            ></slot>
          </template>
          <template v-slot:expandSlot="slotProps">
            <slot
              name="expandSlot"
              v-bind:customSlotData="slotProps.customSlotData"
            ></slot>
          </template>
          <template
            v-for="item in editFormItem && editFormItem.form
              ? editFormItem.form.filter(p => p.customSlot)
              : []"
            v-slot:[item.customSlot]="slotProps"
          >
            <slot
              :name="item.customSlot"
              v-bind:customSlotData="slotProps.customSlotData"
            ></slot>
          </template>
        </formView>
        <slot name="contentFooter"></slot>
      </div>
      <slot name="footer"></slot>
    </template>
  </dialog-view>
</template>
<script>
import dialogView from './baseView/dialog.vue'
import formView from './form.vue'
export default {
  name: 'base-form-dialog',
  components: { dialogView, formView },
  props: {
    // 	表单数据对象
    formItems: {
      type: [Object, Array],
      default: () => ({} || [])
    },
    setFormItemFlex: {
      type: Boolean,
      default: true
    },
    width: {
      type: String,
      default: '420px'
    }
  },
  data() {
    return {
      visible: false,
      editFormItem: {},
      queryform: {}
    }
  },
  methods: {
    open() {
      this.editFormItem = this.formItems
      this.visible = true
      this.$nextTick(() => {
        this.$refs.formView.updateForm()
      })
    },
    dialogUpdateForm(arg, val, item) {
      this.queryform = arg
      // this.$emit('dialog-update-form',arg,val,item)
    },
    beforeClose() {
      // 清除表单的数据验证等
      this.$refs.formView.$refs.ruleForm.resetFields()
      // 清除上传组件的数据
      if (this.$refs.formView && this.$refs.formView.$refs.upload) {
        if (this.$refs.formView.$refs.upload.length) {
          this.$refs.formView.$refs.upload.forEach(item => {
            item.resetData()
          })
        }
      }
      // 清除数据
      if (this.editFormItem.form) {
        this.editFormItem.form.forEach(p => {
          if (typeof p.value === 'string') p.value = ''
          if (Array.isArray(p.value)) p.value = []
          if (p.type === 'upload' && p.files) p.files = []
          if (p.type === 'upload' && p.singleUpload) p.value = ''
        })
      }
      this.visible = false
      this.$emit('before-close')
    },
    buttonClick({ id }) {
      switch (id) {
        case 'cancel':
          this.beforeClose()
          break
        case 'save':
          this.onSave()
          break
        default:
          break
      }
    },
    onSave() {
      this.$refs.formView.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$emit('on-save', this.queryform)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.content {
  padding: 16px 16px 0 16px;
}
</style>