<template>
  <el-dialog title="修改礼品名称" :visible.sync="dialogVisible" width="600px" @close="cancelSubmit('editInfoModal')">
    <el-form :model="editInfoModal" ref="editInfoModal" :rules="modalRules" :label-position="labelPosition" v-loading="loading">
      <el-form-item label="礼品名称" label-width="80px" prop="giftName" style="width:560px">
        <dm-input type="text" v-model="editInfoModal.giftName" :byte-type="1" :maxlength="30"> </dm-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelSubmit('editInfoModal')">取消</el-button>
      <el-button type="primary" @click="submitProNanme('editInfoModal')">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import api from '@/api/gift.js';
const { updateName } = api;
export default {
  props: {
    updateNameForm: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      editInfoModal: {
        giftName: '',
        giftId: ''
      },
      labelPosition: 'top',
      modalRules: {
        giftName: [ { required: true, message: '名称不能为空', trigger: 'blur' } ]
      },
      loading: false
    };
  },
  mounted() {
    this.dialogVisible = true;
  },
  methods: {
    submitProNanme() {
      if(this.loading) return;
      let params = {
        giftId: this.updateNameForm.id,
        name: this.editInfoModal.giftName
      };
      this.loading = true;
      updateName(params).then(res => {
        if(res.code === '0000'){
          this.dialogVisible = false;
          this.$emit('closeUpdateName');
          this.$message.success('修改成功');
        }else{
          this.$message.error(res.message);
        }
      }).finally(() => this.loading = false);
    },
    // 取消修改
    cancelSubmit(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false;
      setInterval(() => {
        this.$emit('closeUpdateName');
      }, 10);
    }
  }
};
</script>
<style scoped></style>
