<template>
  <el-dialog class="dialog-common" v-bind="$attrs" :visible.sync="visible" @closed="clear"
             :width="width" :destroy-on-close="true" :close-on-click-modal="false" :model="value" :append-to-body="true" @open="opened">
    <div v-loading="loading" v-if="visible">
      <slot name="request"/>
      <slot name="pay"/>
      <Form ref="form" :value="value" :rules="rules" :disabled="disabled" :label-width="labelWidth"  v-if="visible">
        <slot name="other"/>
        <slot name="default"/>
      </Form>
      <slot name="subTable"/>
    </div>
    <slot name="footer">
      <div slot="footer" v-show="showFooter">
        <el-button  v-if="delAction" :loading="submiting" type="danger" @click="handleDel">删 除</el-button>
        <el-button @click="close">取 消</el-button>
        <el-button v-show="!disabled || showSave" :disabled="loading" :loading="submiting" type="primary" @click="handleConfirm">保 存</el-button>
      </div>
    </slot>
  </el-dialog>
</template>

<script>
/**
 * 模态框
 */

export default {
  name: 'CustomDialog',
  props:{
    saveAction:{
      type: Function,
      default: null
    },
    inline: {
      type: Boolean,
      default: true,
    },
    value: {
      type: Object,
      required: true,
    },
    labelWidth: {
      type: String,
      default: '100px',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    width:{
      type: String,
      default :'1200px'
    },
    showSave:{
      type: Boolean,
      default : false
    },
    rules:{
      type: Object,
      default:() => {}
    },
    successMsg:{
      type: String,
      default:'保存成功'
    },
    warningMsg: {
      type: String
    },
    extraParam: {
    },
    extraParamName:{
      type:String,
      default:''
    },
    showFooter:{
      type: Boolean,
      default: true
    },
    submitCheckFunction:{
      type: Function,
    },
    delAction:{
      type: Function,
      default: null
    },
  },
  data() {
    return {
      action: null,
      visible: false,
      loading: false,
      submiting: false,
      reject:false,
    }
  },
  methods: {
    async open() {
      this.visible = true
    },
    close() {
      this.visible = false
      this.delAction = null
      this.$emit('close')
    },
    clear() {
      this.action = null
      this.delAction = null
      this.loading = false
      this.submiting = false
      this.close()
    },
    rejectSubmit(){
      this.reject = true
    },

    async handleDel() {
      await this.$confirm("是否确认删除选中的数据项？","提示");
      const { code } = await this.delAction(this.value);
      if (code === 0) {
        this.$message.success("删除成功");
        this.close();
        this.$emit("success");
      }
    },

    async handleConfirm() {
      try {
        await this.$refs.form.validate()
        if(this.submitCheckFunction){
          await this.submitCheckFunction()
        }
        this.submiting = true

        this.reject = false
        await this.beforeSubmit((isRejected) => {
          this.reject = isRejected;
        });
        if(this.reject){
          this.submiting = false
          return;
        }
        if(this.extraParamName != ''){
          this.$set(this.value,this.extraParamName,this.extraParam)
        }
        if(this.saveAction){
          const res = await this.saveAction(this.value)
          const { code, msg,showSuccessMsg = true,message } = res
          if (code === 200 || code === 0) {
            if(showSuccessMsg){
              this.$message.success(this.successMsg + '')
            }

            this.close()
            this.$emit('success')
          } else if (code === 301){
            this.submiting = false
            this.$message.error(this.warningMsg  || msg)

            this.close()
            this.$emit('success')
          }
          else {
            this.submiting = false
            this.$message.error(this.warningMsg  || msg)
          }
        }else{
          this.close()
          this.$emit('handleConfirm')
        }

      } catch (error) {
        this.$emit('error',error.selections)
        this.submiting = false
      }
    },
    beforeSubmit(callback) {
      this.$emit('beforeSubmit', this.value, callback);
    },
    opened(){
      this.$emit('opened')
    }
  },
}
</script>

<style scoped>
.dialog-common .card-container {
  min-height: 700px;
}
</style>
