<script setup>
  import { reactive } from 'vue'
  import { addUserMoments } from '@/api/my-index'
  import { useUI } from '@/utils/use-ui'
  import { navigateBack } from '@/utils/router'

  const placeholderStyle = `font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #999999;
line-height: 40rpx;
font-style: normal;
text-transform: none;`

  const { showToast } = useUI()

  const formData = reactive({
    txt: '',
    listImg: []
  })

  const onUpData = async () => {
    if (!formData.txt) {
      showToast('请输入内容')
      return
    }

    await addUserMoments({
      content: formData.txt,
      privacy: 0,
      images: formData.listImg.map(v => {
        return {
          imageUrl: v
        }
      })
    })
    await showToast('发布成功', 'success')

    navigateBack()
  }
</script>

<template>
  <view class="release-box">
    <nav-bar isPlaceholder>
      <template #right>
        <text class="public-navbar__right-btn" @click="onUpData">
          发布
        </text>
      </template>
    </nav-bar>

    <view class="content">
      <textarea
        v-model="formData.txt"
        focus
        :placeholder-style="placeholderStyle"
        placeholder="请输入朋友圈文字..."
        class="textarea"
      ></textarea>
      <view class="upload-box">
        <cb-file-picker
          v-model="formData.listImg"
          limit="9"
        ></cb-file-picker>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .content {
    padding: 32rpx 58rpx;
    .textarea {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
      line-height: 40rpx;
      font-style: normal;
      text-transform: none;
    }

    .upload-box {
      margin-top: 20rpx;
    }
  }
</style>
