<template>
  <el-dialog v-bind="$attrs" :title="`${typeName}${title}`" :visible.sync="visible" @closed="clear" :width="width" :close-on-click-modal="false"
    :destroy-on-close="true">
    <slot name="otherForm" />
    <Form v-bind="$attrs" v-if="showForm" ref="form" v-model="form" :disabled="this.type === 'detail'"
      labelPosition="top" v-loading="loading" :labelWidth="labelWidth">
      <slot name="default" :type="type" :form="form" :visible="visible" :disabled="this.type === 'detail'" />
    </Form>
    <slot name="footer">
      <div slot="footer">
        <el-button v-show="this.action" :disabled="loading" icon="el-icon-circle-check" :loading="submiting" type="primary" @click="handleConfirm">确认</el-button>
        <el-button @click="close" icon="el-icon-remove-outline">取消</el-button>
      </div>
    </slot>
  </el-dialog>
</template>

<script>

export default {
  name: 'DialogPage',
  props: {
    width: {
      type: String,
      default: '710px'
    },
    labelWidth: {
      type: String,
      default: '128px'
    },
    needClose: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    },
    showTypeName: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      form: {},
      action: null,
      visible: false,
      showForm: false, // 解决组件未销毁导致的显示异常
      loading: false,
      submiting: false,
      type: 'create',
      forceType: null,
    }
  },
  computed:{
    typeName() {
      if (this.forceType) {
        return this.forceType
      }
      if (!this.showTypeName) {
        return ''
      }
      switch (this.type) {
        case 'create':
          return this.$t('common.add')
        case'modify':
          return this.$t('common.edit')
        case 'detail':
          return this.$t('common.view')
        default:
          return ''
      }
    }
  },
  methods: {
    async open(action, get, forceType) {
      this.visible = true
      this.showForm = true
      this.action = action
      this.forceType = forceType
      this.type = 'create'
      if (!get) return
      if (typeof get === 'function') {
        this.loading = true
        const { data } = await get()
        this.loading = false
        this.type = action ? 'modify' : 'detail'
        this.$nextTick(() => {
          // 防止空值在el-input-number组件中显示为0
          for(let key in data) {
            if (data[key] === null) {
              data[key] = undefined
            }
          }
          this.form = JSON.parse(JSON.stringify(data || {}))
        })
      } else {
        this.$nextTick(() => {
          this.form = { ...this.form, ...JSON.parse(JSON.stringify(get)) }
        })
      }
    },
    close() {
      this.visible = false
    },
    clear() {
      this.form = {}
      this.action = null
      this.showForm = false
      this.loading = false
      this.submiting = false
    },
    async handleConfirm() {
      try {
        await this.$refs.form.validate()
        this.submiting = true
        const { code, msg } = await this.action(this.form)
        if (code === 200 || code === 0) {
          this.$message.success(this.typeName +'成功')
          if (this.needClose) {
            this.close()
          } else {
            this.submiting = false
          }
          this.$emit('success')
        } else {
          this.submiting = false
          this.$message.error(msg)
        }
      } catch (error) {
        this.submiting = false
        console.log(error)
      }
    },
  },
}
</script>
