<template>
    <div class="ht-page-operate-modal">
        <ht-base-modal
                v-model="showStatus"
                :width="width"
                >
            <template v-slot:header>
                <slot name="header"></slot>
            </template>
            <div slot="footer">
                <ht-block-buttons-operator
                                          :dataInfo="formData.dataInfo"
                                          :buttons="footerButton"
                                          @on-reset-click="resetClick"
                                          @on-submit-click="submitClick">
                </ht-block-buttons-operator>
            </div>
            <ht-block-form
                    v-bind="formData"
                    ref="blockForm"
                    >
            </ht-block-form>
        </ht-base-modal>
    </div>
</template>

<script>
  export default {
      name: 'HtPageOperateModal',
      model: {
          prop: "show",
          event: "change"
      },
      props:{
          //note 控制弹窗的显示与隐藏
          show:{
              type:Boolean
          },
          //note 弹窗的宽度
          width:{
              type:[String, Number]
          },
          //note 表单的数据
          formData:{
              type:Object,
              default(){
                  return {}
              }
          },
          //note 页角的数据
          footerButton:{
              type:Array,
              default(){
                  return []
              }
          }
      },
      computed: {
          showStatus: {
            get () {
                return this.show;
            },
            set (value) {
                this.$emit('change', value);
            }
          }
      },
      methods:{
          //note 重置表单事件
          resetClick(){
              this.$refs.blockForm.resetClick();
          },
          //note 提交表单事件
          submitClick(dataInfo,callback){
              this.$refs.blockForm.submitClick(dataInfo,callback)
          }
      }
  }
</script>
<style>
    .ht-page-operate-modal {

    }
</style>

