<template>
  <div class="remark">
    <div class="remark-content">
      <textarea
        placeholder="填写额外对商家备注的信息"
        v-model="remark"
      ></textarea>
    </div>

    <div class="comfirm-btn" @click="goOrder">确定</div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";

export default {
  data() {
    return {
      remark: "",
    };
  },
  computed: {
    ...mapGetters({
      orderRemark: "orderRemark",
    }),
  },
  methods: {
    ...mapMutations({
      setRemark: "orderRemark",
    }),
    goOrder() {
      this.setRemark(this.remark);
      uni.navigateBack({
        delta: 1,
      });
    },
  },
  onLoad() {
    this.remark = this.orderRemark;
  },
};
</script>

<style lang="stylus" scoped>
bodyColor = #CAA97F;

.remark {
  box-sizing: border-box;
  margin-top: 20rpx;

  .remark-content {
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    padding: 30rpx;
    margin-bottom: 30rpx;

    textarea {
      border-radius: 10rpx;
      font-size: 26rpx;
      border: 1rpx solid #cccccc;
      box-sizing: border-box;
      width: 98%;
      height: 200rpx;
      margin: 0 auto;
      padding: 16rpx;
      color: #444;
      background: #f8f8f8;
    }
  }

  .comfirm-btn {
    border-radius: 4rpx;
    height: 96rpx;
    width: 90%;
    margin: 0 auto;
    line-height: 96rpx;
    background: #333;
    color: bodyColor;
    text-align: center;
    font-size: 30rpx;
  }
}
</style>
