<template>
  <u-popup v-model="visible" mode="bottom" border-radius="24" :safe-area-inset-bottom="true">
    <view class="sheet">
      <view class="sheet-header">
        <text class="sheet-title">选择草稿</text>
        <text class="sheet-close" @click="close">关闭</text>
      </view>
      <scroll-view scroll-y class="sheet-scroll">
        <view v-if="!drafts.length" class="empty">暂无本地草稿</view>
        <view
          v-for="item in drafts"
          :key="item.id"
          class="draft-item"
          @click="onSelect(item)"
        >
          <view class="draft-main">
            <text class="draft-name">{{ item.name }}</text>
            <text class="draft-sub">{{ summary(item) }}</text>
            <text class="draft-time">{{ formatTime(item.updatedAt) }}</text>
          </view>
          <text class="draft-del" @click.stop="onDelete(item)">删除</text>
        </view>
      </scroll-view>
    </view>
  </u-popup>
</template>

<script>
import {
  listDrafts,
  removeDraft,
  formatDraftTime,
  draftSummary,
} from '@/subPackages/sub_salesperson/common/inputDraftStorage.js'

export default {
  name: 'InputDraftSheet',
  props: {
    value: { type: Boolean, default: false },
    inputType: { type: String, default: 'store' },
  },
  data() {
    return {
      drafts: [],
    }
  },
  computed: {
    visible: {
      get() { return this.value },
      set(v) { this.$emit('input', v) },
    },
  },
  watch: {
    value(v) {
      if (v) this.refresh()
    },
  },
  methods: {
    refresh() {
      this.drafts = listDrafts(this.inputType)
    },
    formatTime(ts) {
      return formatDraftTime(ts)
    },
    summary(item) {
      return draftSummary(this.inputType, item.form)
    },
    close() {
      this.visible = false
    },
    onSelect(item) {
      this.$emit('select', item)
      this.close()
    },
    onDelete(item) {
      uni.showModal({
        title: '删除草稿',
        content: `确定删除「${item.name}」？`,
        success: (res) => {
          if (!res.confirm) return
          removeDraft(this.inputType, item.id)
          this.refresh()
          this.$emit('deleted', item.id)
        },
      })
    },
  },
}
</script>

<style scoped>
.sheet { background: #fff; max-height: 70vh; display: flex; flex-direction: column; }
.sheet-header { display: flex; justify-content: space-between; align-items: center; padding: 28rpx 32rpx; border-bottom: 1rpx solid #f0f0f0; }
.sheet-title { font-size: 32rpx; font-weight: 600; color: #1d2129; }
.sheet-close { font-size: 28rpx; color: #6acdbb; }
.sheet-scroll { max-height: 60vh; padding: 16rpx 24rpx 40rpx; box-sizing: border-box; }
.empty { text-align: center; color: #86909c; padding: 80rpx 0; font-size: 28rpx; }
.draft-item { display: flex; align-items: center; padding: 24rpx; margin-bottom: 16rpx; background: #f7f8fa; border-radius: 12rpx; }
.draft-main { flex: 1; min-width: 0; }
.draft-name { display: block; font-size: 30rpx; font-weight: 600; color: #1d2129; }
.draft-sub { display: block; font-size: 26rpx; color: #4e5969; margin-top: 8rpx; }
.draft-time { display: block; font-size: 24rpx; color: #86909c; margin-top: 8rpx; }
.draft-del { font-size: 26rpx; color: #f53f3f; padding: 8rpx 16rpx; flex-shrink: 0; }
</style>
