<template>
  <div id="root">
    <el-form ref="ruleForm" :model="ruleForm"  label-width="100px" class="demo-ruleForm">
      <el-form-item label="房型名称" >
        <el-input v-model="ruleForm.roomName" placeholder="房型名称"/>
      </el-form-item>
      <!-- <el-form-item label="房型号" >
        <el-input v-model="ruleForm.roomNo" placeholder="房型号"/>
      </el-form-item> -->
     <el-form-item class="filter-item" label="房型短描述" prop="remark" >
        <el-input v-model.trim="ruleForm.remark" placeholder="房型推荐语等"/>
      </el-form-item>
      <el-form-item label="房型价格">
        <el-input v-model="ruleForm.price" placeholder="单位元" onkeyup="this.value=this.value.replace(/\D/g,'')"/>
      </el-form-item>
      <el-form-item class="filter-item"  label="上架状态">
        <el-select v-model="ruleForm.roomStatus" placeholder="上架">
         <el-option label="上架" value="1"/>
         <el-option label="下架" value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="权重" prop="sort">
        <el-input v-model="ruleForm.sort" placeholder="不小于0的整数" onkeyup="this.value=this.value.replace(/\D/g,'')"/>
      </el-form-item>  
      <el-form-item>
        <el-button type="primary" @click="submitForm()">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
            id:'',
            price: '',
           remark: '',
         roomName: '',
       roomStatus: '',
             sort: '',
           roomNo: ''
      }
      // rules: {
      //   userName: [
      //     { required: true, message: '请输入姓名', trigger: 'blur' }
      //   ],
      //   price: [
      //     { required: true, message: '请输入价格', trigger: 'blur' }
      //   ],
      //   menuArray: [
      //     { required: true, message: '请选择角色', trigger: 'blur' }
      //   ],       
      // }
    }
  },
  mounted() {
    this.getRoom(this.$route.query.id)
  },
  methods: {
    submitForm(){
      // if(this.ruleForm.roomNo ===''){
      //   this.$message.error('请输入房型号');
      //   return
      // }
      if(this.ruleForm.roomName ===''){
        this.$message.error('请输入房型名称');
        return
      }
      if(this.ruleForm.price ===''){
        this.$message.error('房型价格');
        return
      }
    
      this.$store.dispatch('HotelRoomEdit', this.ruleForm).then((res) => {
        if(res.code === '1'){
          this.$message.error(res.message);
        }else{
        this.$router.push({ name: 'grogshop-grogshopRoom' })
         this.$message({
          message: '修改房型成功',
          type: 'success'
         })
        }
      }).catch(() => {
        console.log('error HotelRoom')
      })
    },
    getRoom(id){
      console.log('id',id)
      this.ruleForm.id = id
      console.log('this.ruleForm.id',this.ruleForm.id)
      this.$store.dispatch('GetRoomId', this.ruleForm).then((res) => {
      this.ruleForm.roomName = res.data.roomName
      this.ruleForm.roomNo = res.data.roomNo
      this.ruleForm.roomStatus = res.data.roomStatus
      this.ruleForm.sort = res.data.sort
      this.ruleForm.remark = res.data.remark
      this.ruleForm.price = res.data.price
      }).catch(() => {
        console.log('error GetRoomId')
      })
    }
   }
  }
</script>

<style scoped>
.demo-ruleForm {
  width: 500px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}
</style>
