<template>
  <el-dialog
    title="添加临时菜"
    width="410px"
    :visible.sync="show"
    @close="reset"
  >
    <div>
      <div>将临时菜添加至购物车，不会影响总商品库</div>
      <div class="u-m-t-16">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="菜品名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="菜品分类">
            <el-select v-model="form.category" filterable placeholder="选择分类">
              <el-option
                v-for="item in category"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="form.price" placeholder="请输入价格" type="number">
                <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="单位">
            <el-select v-model="form.unit" filterable placeholder="选择单位">
              <el-option
                v-for="item in units"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="下单数量">
            <el-input v-model="form.num" placeholder="请输入下单数量" type="number">
            </el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.note" placeholder="请输入备注" >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div slot="footer">
      <el-button size="medium" @click="close"> 取消 </el-button>
      <el-button size="medium" type="primary" @click="confirm">确定</el-button>
    </div>
  </el-dialog>
</template>
  <script>
import { tbShopCategoryGet,tbShopUnit } from "@/api/shop";

export default {
  data() {
    return {
      show: false,
      form: {
        name: "",
        category:'',
        price: "",
        unit:'',
        num:1,
        note:''
      },
      category:[],
      units:[]
    };
  },

  methods: {
    async getCategory() {
      const { content } = await tbShopCategoryGet({
        page: 0,
        size: 300,
        sort: "id",
        shopId: localStorage.getItem("shopId"),
      });
      this.category = content.reduce((prve, cur) => {
        prve.push(cur);
        return [...prve, ...cur.childrenList];
      }, []);
    },
    async getUnit() {
      const { content } = await tbShopUnit({
        page: 0,
        size: 300,
        sort: "id",
        shopId: localStorage.getItem("shopId"),
      });
      this.units = content
    },
    reset() {},

    open() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
    confirm() {
      this.$emit("confirm", this.form);
      this.close();
    },
  },
  mounted() {
    this.getCategory()
    this.getUnit()
  },
};
</script>
  
  <style lang="scss" scoped>
::v-deep .el-dialog__body {
  margin-bottom: 14px;
  margin-top: 14px;
}
::v-deep .el-form-item__label {
  text-align: left;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
::v-deep  .el-input__inner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
::v-deep .el-input__inner::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>