<template>
  <div>
    <xy-dialog
      ref="dialog"
      :is-show.sync="isShow"
      type="form"
      :title="type === 'add' ? '新增' : '编辑'"
      :form="form"
      :rules="rules"
      @submit="submit">
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>名称：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.name" clearable placeholder="请输入分类名称" style="width: 300px;"></el-input>
          </div>
        </div>
      </template>

    </xy-dialog>
  </div>
</template>

<script>
import {save,getForm} from '@/api/collectMoney'
export default {
  data() {
    return {
      isShow:false,
      id:'',
      type:'',

      form:{
        name:'',
      },
      rules:{
        name:[
          {required:true,message:'请填写名称'}
        ]
      }
    }
  },
  methods: {
    async getDetail(){
      const res = await getForm(this.id)
      this.$integrateData(this.form,res)
    },

    submit(){
      if(this.type === 'editor'){
        Object.defineProperty(this.form,'id',{
          value:this.id,
          enumerable:true,
          configurable:true,
          writable:true
        })
      }
      save(this.form).then(res => {
        this.$successMessage(this.type,'')
        this.isShow = false
        this.$emit('refresh')
      })
    }
  },
  watch:{
    isShow(val){
      if(val){
        if(this.type === 'editor'){
          this.getDetail()
        }
      }else{
        this.id = ''
        this.type = ''
        this.$refs['dialog'].reset()
        delete this.form.id
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-input__inner{
  text-align: left;
}
</style>
