<template>
  <el-dialog :visible.sync="newIntegral.show" width="800px" center :title="newIntegral.id ? '修改兑换码' : '生成兑换码'">
    <el-form label-width="150px" :model="newIntegral" ref="newIntegral">
      <el-form-item label="名称"
                    prop="name"
                    :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
        <el-row :gutter="20">
          <el-col :span="20">
        <el-input v-model="newIntegral.name"/>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="商品"
                    prop="goods_id"
                    :rules="[{ required: true, message: '请选择商品', trigger: 'change' }]">
        <el-row :gutter="20">
          <el-col :span="20">
        <el-select v-model="newIntegral.goods_id">
          <el-option v-for="data in goodsList" :key="data.id" :label="`【${data.id}】${data.name}`" :value="data.id"/>
        </el-select>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="数量"
                    prop="num"
                    :rules="[{ required: true, message: '请输入数量', trigger: 'blur' }]">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-input-number v-model="newIntegral.num"/>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="失效时间"
                    prop="expire_at"
                    :rules="[{ required: true, message: '请选择失效时间', trigger: 'change' }]">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-date-picker
              v-model="newIntegral.expire_at"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions0"
              placeholder="选择日期">
            </el-date-picker>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="备注"
                    prop="desc"
                    :rules="[{ required: true, message: '请填写备注信息', trigger: 'blur' }]">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-input v-model="newIntegral.desc"/>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="newIntegral.show = false">取 消</el-button>
        <el-button type="primary" @click="onAdd">确 定</el-button>
      </span>
  </el-dialog>
</template>

<script>
  export default {
    name: "add",
    data(){
      return {
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
      }
    },
    props:[
      'newIntegral',
      "goodsList"
    ],
    methods:{
      reSetForm(){
        this.$refs.newIntegral.resetFields()
      },
      onAdd(){
        this.$refs.newIntegral.validate(ref =>{
          if(ref){
            if(this.newIntegral.id){
              this.$emit('subEdit')
            }else{
              this.$emit('subAdd')
            }
          }
        });
      }
    },
    watch:{
      'newIntegral.show'(value){
        if(value && !this.newIntegral.id){
          this.$nextTick(()=>{
            this.reSetForm()
          })
        }
      }
    }
  }
</script>

<style scoped>

</style>
