<template>
  <div class="add-note">
    <div class="wrapper">
      <textarea
        class="text-area"
        v-model.trim="text"
        placeholder="请输入备注，最多50个字哦"
        placeholder-class="placeholder"
        maxlength="50"
        @input="handleInput"
      ></textarea>
      <!-- #ifdef MP-WEIXIN -->
      <div class="word-count">{{wordCount}} / 50</div>
      <!-- #endif -->
    </div>
    <div
      class="btn-finish"
      @click="handleClick"
    >完成</div>
  </div>
</template>

<script>
import { toast } from '@/utils/uniapi.js'
import { mapMutations, mapGetters } from 'vuex'
export default {
  data() {
    return {
      wordCount: 0,
      text: ''
    }
  },
  computed: {
    ...mapGetters({
      buyerNote: 'cartPage/buyerNote'
    })
  },
  onLoad({ value }) {
    // this.text = decodeURIComponent(value)
    // this.wordCount = value.length
    // console.log(this.text)
    this.text = this.buyerNote
  },
  methods: {
    ...mapMutations({
      updateBuyerNote: 'cartPage/updateBuyerNote'
    }),
    handleInput(e) {
      let value = e.target.value
      let l = value.length
      if (l === 50) {
        toast('备注最多输入50字哦')
      }
      this.wordCount = l
    },
    handleClick() {
      console.log(this.text)
      // let pages = getCurrentPages()
      // let prevPage = pages[pages.length - 2]
      // prevPage.setData({
      //   note: this.text
      // })
      this.updateBuyerNote(this.text)
      uni.navigateBack();
    }
  }
}
</script>

<style lang="scss">
@import "./add-node.scss";
page {
  background: #f4f4f4;
}
</style>