<template>
  <Page name="select-remark" flank>
    <template #content>
      <u-textarea placeholder="请输入，点击历史备注快捷填写" v-model="remark"></u-textarea>
      <view class="his-title">历史备注</view>
      <view class="his-card">
        <view @click="clickItem(item)" class="his-item" v-for="(item, index) in hisList" :key="index">
          <text>{{ item }}</text>
        </view>
      </view>
    </template>
    <template #footer>
      <u-button type="primary" @click="onSelect">确定</u-button>
    </template>
  </Page>
</template>
<script>
export default {
  name: 'select-remark',
  data() {
    return {
      remark: '',
      hisList: [],
    };
  },
  onLoad(option) {
    this.remark = option.remark || '';
    this.getHis();
  },
  methods: {
    getHis() {
      uni.$u.api.freightGoodsSourceV2.getLatestRemark({}).then(res => {
        this.hisList = res.result || [];
      });
    },
    clickItem(v) {
      this.remark = v;
    },
    onSelect() {
      uni.$emit('select-remark', this.remark);
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss">
.page-select-remark {
  &__content {
    .his-title {
      padding: $padding-xs 0;
    }
    .his-card {
      padding: $padding-md $padding-xs;
      border-radius: $radius-md;
      background: $color-white;
      .his-item {
        padding: $padding-xs 0;
        color: $color-text-minor;
        border-bottom: 1px solid $color-border;
        text {
          overflow-wrap: anywhere;
        }
      }
      .his-item:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>
