<template>
  <div class="avoid_certain_food_com_wrapper">
    <el-popover
      placement="right"
      trigger="click"
      width="600"
      title="忌口"
      @hide="handleOnHide"
    >
      <SimpleIngredientListView @onSelect="handleOnSelect" />
      <span slot="reference" class="trigger">忌口： </span>
    </el-popover>
    <div class="content">
      <el-tag
        v-for="item in data"
        :key="item.id"
        closable
        size="mini"
        type="danger"
        @close="handleOnClose(item)"
      >
        {{ item.name }}
      </el-tag>
    </div>
  </div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const { mapMutations } = createNamespacedHelpers("recipes");
import SimpleIngredientListViewT from "./SimpleIngredientListViewT";
import { editPhysicalSigns } from "@/api/custom/healthy";

export default {
  name: "ACFComT",
  props: ["value", "id"],
  components: {
    SimpleIngredientListViewT,
  },
  data() {
    return {
      data: [],
    };
  },
  watch: {
    value(val) {
      this.data = val;
    },
  },
  methods: {
    handleOnSelect(data) {
      // console.log(data);
      if (!this.data.some((obj) => obj.id === data.id)) {
        this.data.push({
          id: data.id,
          name: data.name,
        });
        // console.log(this.data);
        this.$emit("update:value", this.data);
        this.updateAvoidFoodIds({
          avoidFoodIds: this.data.map((obj) => obj.id),
        });
      }
    },
    handleOnClose(data) {
      // console.log(data);
      this.data = this.data.filter((obj) => data.id !== obj.id);
      this.$emit("update:value", this.data);
      this.updateAvoidFoodIds({ avoidFoodIds: this.data.map((obj) => obj.id) });
      // 删除后更新
      this.handleOnHide();
    },
    handleOnHide() {
      editPhysicalSigns({ id: this.id, avoidFood: this.data }).then((res) => {
        if (res.code === 200) {
          this.$message.success("忌口修改成功");
        }
      });
    },
    ...mapMutations(["updateAvoidFoodIds"]),
  },
};
</script>
<style lang="scss" scoped>
.avoid_certain_food_com_wrapper {
  display: flex;
  margin-bottom: 8px;

  .trigger {
    font-size: 14px;
    width: 42px;
    color: #8c8c8c;
    cursor: pointer;
  }

  .content {
    flex: 1;

    & > span {
      margin: 0 4px 4px 4px;
    }
  }
}
</style>
