<template>
  <!-- 表单弹出框 -->
  <div>
    <dialog-edit ref="dialogEdit" :visible.sync="dialogVisible" :form="queryParas" :autoSave="autoSave" :formRules="formRules" :saveLabel="saveLabel" :editModel="editModel" :api="xhr"
      :appendToBody="appendToBody" :title="headerTitle" @onSaved="handleSubmit" v-bind="attr">
        <dym-form :formValue.sync="queryParas" :componentList="componentList" @selectChanged="selectRowChange"></dym-form>
        <slot></slot>
    </dialog-edit>
  </div>
</template>

<script>
import BaseEdit from '@/pages/baseEditPage'
// import * as format from '@/filters/index.js'
import {
  DialogEdit,
  dymForm
} from 'newepoch-components'
export default {
  extends: new BaseEdit(),
  name: 'dialogForm',
  components: {
    DialogEdit,
    dymForm
  },
  props: {
    attr: {
      type: [Object],
      default () {
        return null
      }
    },
    // 是否自动保存
    autoSave: {
      type: [Boolean],
      default: false
    },
    // 表单组件
    componentList: {
      type: [Array],
      default () {
        return []
      }
    },
    // 表单校验规则
    rules: {
      type: [Array],
      default () {
        return []
      }
    },
    // 保存按钮
    saveLabel: {
      type: [String],
      default () {
        return '保存'
      }
    },
    // 标题
    headerTitle: {
      type: [String],
      default () {
        return ''
      }
    },
    xhr: {
      type: [Object],
      required: false
    }
  },
  data () {
    return {
      appendToBody: true,
      toolMenuFlag: false,
      queryParas: {},
      selectRows: [], // 选中项
      forms: {}
    }
  },
  methods: {
    // 选中行
    selectRowChange (selectRows) {
      this.$emit('selectRowChange', selectRows)
    },
    // 提交回调
    handleSubmit (e) {
      // 提交表单
      this.$emit('onSaved', e)
    }
  },
  watch: {
    visible (val) {
      if (val) {
        let $this = this
        $this.clearParam()
      }
    }
  }
}
</script>

<style scoped>
  @import '~@/styles/assetpkgmgr/common.scss';
</style>
