<template>
  <view class="page">
    <view class="back_bar">
      <BackBar title="个人简介" />
    </view>
    <view class="card">
      <view class="cell-title"><text class="must">*</text>个人简介</view>
      <wd-textarea
        v-model="personalInformation"
        placeholder="请输入..."
        :maxlength="200"
        show-word-limit
      />
    </view>
    <view class="footer">
      <button class="footer-btn" @click="submit">确定</button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { usepersonalStoreHook } from '@/store/inspector';
const personalInformation = ref('');
function submit() {
  if (!personalInformation.value) {
    uni.showToast({
      title: '请输入个人简介',
    });
    return;
  }
  usepersonalStoreHook().SET_PERSONALINFORMATION(personalInformation.value);
  uni.navigateBack({
    delta: 1,
  });
}
onMounted(() => {
  personalInformation.value = usepersonalStoreHook().form.personalInformation;
});
</script>
<style lang="scss" scoped>
.page {
  padding: 0 30rpx 30rpx 30rpx;
  box-sizing: border-box;
  .back_bar {
    margin-bottom: 30rpx;
  }
  .card {
    border-radius: 20rpx;
    background: #fff;
    padding: 10rpx 0;
    box-sizing: border-box;
    margin-bottom: 30rpx;
    padding: 30rpx;
    box-sizing: border-box;
    .must {
      color: red;
    }
    .wd-textarea {
      background: #f9f9fb;
      border-radius: 10rpx;
      margin-top: 20rpx;
    }
    :deep(.uni-textarea-textarea) {
      background: #f9f9fb;
    }
    :deep(.wd-textarea__value) {
      background: #f9f9fb;
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    height: 122rpx;
    width: 100vw;
    left: 0;
    box-sizing: border-box;
    background: #fff;
    border-top: 1rpx solid #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: center;
    .footer-btn {
      width: 440rpx;
      height: 90rpx;
      background: #615dff;
      font-size: 30rpx;
      line-height: 90rpx;
      color: #fff;
      font-weight: 600;
    }
  }
}
</style>
