<template>
  <view class="d-flex flex-col">
    <text v-if="modelValue">已编写内容，总字数 {{ modelValue.length }} 字</text>
    <text v-else>未编写内容，点击编写</text>
    <view class="d-flex flex-row align-center gap-s mt-3">
      <u-button @click="preview">预览内容</u-button>
      <u-button @click="edit" type="primary">编辑内容</u-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { navTo } from '@/common/utils/PageAction';
import { onPageShow } from '@dcloudio/uni-app';

const props = defineProps({	
  modelValue: { 
    type: String,
    default: null 
  },
})
const emit = defineEmits(['update:modelValue'])
let editorOpened = false;

function preview() {
  uni.setStorage({
    key: 'editorContent',
    data: props.modelValue,
    success: () => navTo('/pages/article/editor/preview'),
  })
}
function edit() {
  editorOpened = true;
  uni.setStorage({
    key: 'editorContent',
    data: props.modelValue,
    success: () => navTo('/pages/article/editor/editor'),
  })
}

onPageShow(() => {
  if (editorOpened) {
    editorOpened = false;
    uni.getStorage({
      key: 'editorContent',
      success: (success) => emit('update:modelValue', success.data),
    })
  }
})
</script>