<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>
                                <h3>配送中心：{{minfo.name_center}}&nbsp;&nbsp;套餐名：{{minfo.name_meal}}</h3>
                            </Form-item>
                            <Form-item prop="week" label="星期">
                                <Row>
                                    <Col span="10">
                                        <Select v-model="fromdata.week" placeholder="星期">
                                            <Option value="1">周一</Option>
                                            <Option value="2">周二</Option>
                                            <Option value="3">周三</Option>
                                            <Option value="4">周四</Option>
                                            <Option value="5">周五</Option>
                                            <Option value="6">周六</Option>
                                            <Option value="7">周日</Option>
                                        </Select>
                                    </Col>
                                </Row>
                            </Form-item>
                            <Form-item
                                v-for="(item, index) in fromdata.items"
                                :key="item"
                                :label="'菜品' + (index + 1)"
                                :rules="{required: true, message: '菜品' + (index + 1) +'不能为空', trigger: 'blur'}">
                                <Row>
                                    <Col span="10">
                                        <Select v-model="item.cook_id" placeholder="菜品" filterable>
                                            <Option v-for="ci in cooklist" :value="ci.id"  :key="ci.id">
                                                {{ ci.name_cook }}
                                            </Option>
                                        </Select>
                                    </Col>
                                    <Col span="4" offset="1">
                                        <Button type="warning" @click="handleRemove(index)">删除</Button>
                                    </Col>
                                </Row>
                            </Form-item>
                            <Form-item>
                                <Row>
                                    <Col span="10">
                                        <Button type="dashed" long @click="handleAdd" icon="plus-round">新增</Button>
                                    </Col>
                                </Row>
                            </Form-item>
                            <Form-item>
                              <Button type="primary"  @click="handleSubmit('editfrom')">提交</Button>
                            </Form-item>
                        </Row>
                    </Col>
                </Form>
            </Col>
        </Row>
    </div>
</template>
<script>
import { getcooks, savemealcooks } from '@/api/data'
// 按周添加
export default {
  name: 'editmeal',
  data () {
    var self = this
    return {
      minfo: {},
      cooklist: [],
      fromdata: {
        week: 0,
        items: [
          {
            cook_id: 0
          }
        ]
      }
    }
  },
  computed: {
    onQuery: function () {
      return this.$route.query
    }
  },
  watch: {
    'onQuery' (old, newValue) {
      if (old.minfo) {
        this.minfo = old.minfo
      }
    }
  },
  methods: {
    getcooklist () {
      var center_id = this.minfo.center_id
      getcooks({ center_id }).then(res => {
        const data = res.data
        if (data.code !== 200) {
          this.$Message.error(data.msg)
        } else {
          this.cooklist = data.data
        }
      })
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          var data = {
            center_id: this.minfo.center_id,
            meal_id: this.minfo.id,
            week: this.fromdata.week,
            items: this.fromdata.items
          }
          savemealcooks(data).then(res => {
            const data = res.data
            if (data.code !== 200) {
              this.$Message.error(data.msg)
            } else {
              this.$Message.success(data.msg)
            }
          })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    handleAdd () {
      this.fromdata.items.push({
        cook_id: 0
      })
    },
    handleRemove (index) {
      this.fromdata.items.splice(index, 1)
    }
  },
  mounted () {
    if (this.$route.query.id) {
      this.minfo = this.$route.query
      this.getcooklist()
    }
  }
}
</script>
