<script setup>
  import { reactive } from 'vue'

  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 formData = reactive({
    txt: '',
    listImg: []
  })

  const onUpData = () => {
    console.log(formData)
  }
</script>

<template>
  <view class="release-box">
    <nav-bar isPlaceholder>
      <template #right>
        <text class="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>
  .right-btn {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #ffffff;
    font-style: normal;
    text-transform: none;
    background: linear-gradient(0deg, #00d993 0%, #00d9c5 100%);
    padding: 12rpx 36rpx;
    border-radius: 8rpx;
  }

  .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>
