<template>
    <div>
        <Row type="flex" justify="center" align="middle">
            <Col span="24">
                <Form ref="editfrom" :model="fromdata" :label-width="100">
                    <Col span="20">
                        <Row>
                            <Form-item prop="name_meal" label="套餐名">
                                <Input type="text" v-model="fromdata.name_meal" placeholder="套餐名">
                                </Input>
                            </Form-item>
                            <Form-item prop="center_id" label="配送中心">
                                <Select v-model="fromdata.center_id" placeholder="配送中心">
                                    <Option v-for="item in centerlist" :value="item.id"  :key="item.id">
                                        {{ item.name_center }}
                                    </Option>
                                </Select>
                            </Form-item>
                            <Form-item prop="name_meal" label="价格">
                                <Input type="number" v-model="fromdata.price" placeholder="价格">
                                </Input>
                            </Form-item>
                            <Form-item>
                              <Button type="primary"  @click="handleSubmit('editfrom')">提交</Button>
                            </Form-item>
                        </Row>
                    </Col>
                </Form>
            </Col>
        </Row>
    </div>
</template>
<script>
import { getcenterlist, editmeal, getmealinfo } from '@/api/data'
export default {
  name: 'editmeal',
  data () {
    var self = this
    return {
      centerlist: [],
      fromdata: {
        id: 0,
        name_meal: '',
        price: '',
        center_id: 0
      }
    }
  },
  computed: {
    onQuery: function () {
      return this.$route.query
    }
  },
  watch: {
    'onQuery' (old, newValue) {
      if (old.id) {
        this.getinfo(old.id)
      }
    }
  },
  methods: {
    getcenterlist () {
      var where = {
        page: 1,
        size: 0,
        is_active: 1
      }
      getcenterlist(where).then(res => {
        const data = res.data
        if (data.code !== 200) {
          this.$Message.error(data.msg)
        } else {
          const usedata = data.data
          this.centerlist = usedata.list
        }
      })
    },
    handleSubmit (name) {
      this.$refs[name].validate(
        (valid) => {
          if (valid) {
            editmeal(this.fromdata).then(res => {
              const data = res.data
              if (data.code === 200) {
                this.$Message.success(data.msg)
              } else {
                this.$Message.error(data.msg)
              }
            })
          } else {
            this.$Message.destroy()
            this.$Message.error('表单验证失败!')
          }
        }
      )
    },
    getinfo (id) {
      getmealinfo({ id }).then(res => {
        const data = res.data
        if (data.code !== 200) {
          this.$Message.error(data.msg)
        } else {
          this.fromdata = data.data
        }
      })
    }
  },
  mounted () {
    this.getcenterlist()
    if (this.$route.query.id) {
      const id = this.$route.query.id
      this.getinfo(id)
    }
  }
}
</script>
