<template>
  <el-dialog
    title="整单备注(提交订单时生效)"
    width="410px"
    :visible.sync="show"
    @close="reset"
  >
    <el-input
    :rows="6"
      type="textarea"
      v-model="note"
      placeholder="请输入备注"
    ></el-input>
    <div>
      <el-tag
        v-for="(tag, index) in tags"
        @click="addNote(tag)"
        size="medium"
        :key="index"
        closable
        @close="delTag(index)"
         type="primary"
      >
        {{ tag }}
      </el-tag>
    </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>
export default {
  data() {
    return {
      show: false,
      tags: [],
      note: "",
    };
  },
  watch:{
    'tags.length'(){
        localStorage.setItem("tags", JSON.stringify(this.tags))
    }
  },
  methods: {
    reset(){
        this.note=''
    },
    delTag(index){
        this.tags.splice(index,1)
    },
    addNote(tag) {
        if(!this.note){
            return  this.note = tag 
        }
      this.note = tag + "," + this.note;
    },
    open(note) {
      this.show = true;
      this.note=note
      const tags = localStorage.getItem("tags");
      console.log(tags)
      this.tags = tags ? JSON.parse(tags) : ["免香菜", "不要辣", "不要葱"];
    },
    close() {
      this.show = false;
    },
    confirm(){
        const originTags = [...this.tags]
        if(this.note){
            if(originTags>=10){
                originTags.shift()
            }
            if(this.note.length<=16){
              const newTags=new Set([this.note,...originTags])
              localStorage.setItem("tags", JSON.stringify([...newTags]));
            }
        }
        this.$emit('confirm',this.note)
        this.close()
    }
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body{
  margin-bottom: 14px;
  margin-top: 14px;
}
::v-deep .el-tag {
    margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 5px;
  cursor: pointer;
  font-size: 15px;
  line-height: 35px;
  height: 35px;
}
</style>