<!-- @desc:保存按钮组件  @auth:周兴  @time:2022/11/15 12:57 -->
<template>
  <div>
    <div style="height: 60px"></div>
    <div class="foot-class">
      <card ref="footInfo" class="card-class" >
        <slot></slot>
        <DkButton v-if="!approvalFlag && !viewFlag" ref="save" type="primary" :disabled="disabled ||loading"
                  style="margin-right: 10px;" @click="save"
                  :loading="loading">{{ vm.$t('save') }}
        </DkButton>
        <DkButton v-if="approvalFlag" ref="approve" type="primary" :disabled="disabled || loading" @click="approve"
                  style="margin-right: 10px;"
                  :loading="loading">{{ vm.$t('approve') }}
        </DkButton>
        <DkButton ref="close" :disabled="loading" @click="close">{{ vm.$t('close') }}</DkButton>
      </card>
    </div>
  </div>
</template>

<script>
export default {
  name: "dk-save-button",
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    //是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否是审批
    approvalFlag: {
      type: Boolean,
      default: false
    },
    // 查看标识
    viewFlag: {
      type: Boolean,
      default: false
    },
    // 是否进行表单校验
    validFlag: {
      type: Boolean,
      default: true
    },
    // 校验form的ref名称
    validFormRef: {
      type: String,
      default: 'formInline'
    }
  },
  data() {
    const vm = window.vm
    return {
      vm: vm
    }
  },
  methods: {
    /**
     * @desc   : 聚焦事件
     * @author : 周兴
     * @date   : 2022/5/3 18:27
     */
    focus() {
      if( this.$refs.save){
        this.$refs.save.$el.focus();
      }
    },
    /**
     * @desc   : 正常保存
     * @author : 周兴
     * @date   : 2022/4/10 9:15
     */
    save() {
      //保存时先聚焦
      this.focus();
      //如果校验开启，需要进行校验
      if (this.$parent && this.$parent.$refs[this.validFormRef]) {
        this.$parent.$refs[this.validFormRef].validate().then(valid => {
          if (!valid) {
            return;
          }
          this.$emit('save');
        })
      } else {
        this.$emit('save');
      }
    },
    /**
     * @desc   : 审批
     * @author : 周兴
     * @date   : 2022/8/9 16:48
     */
    approve() {
      //保存时先聚焦
      this.$refs.approve.$el.focus();
      this.$emit('approve');
    },
    /**
     * @desc   : 保存临时文件
     * @author : 周兴
     * @date   : 2022/4/10 9:20
     */
    close() {
      this.$emit('close');
    },
  },
}
</script>

<style scoped>

.foot-class{
  width: 100%;
  height: 60px;
  position: fixed ;
  bottom: 0;
  right: -5px;
  z-index: 900;
}

.card-class{
  margin-bottom: 1%;
  padding: 0;
  height: 60px;
  display: flex;
  justify-content: right;
  width: 100%;
}

</style>
