<template>
    <NavBar :showIcon="true" :showTitle="true" title="个人优势" backgroundBox="#ffffff"></NavBar>
    <view class="container">
        <view class="title">我的优势</view>
        <view class="desc text-color">一句话介绍自己，突出自己的核心优势</view>
        <view class="content">
            <textarea class="input-style" v-model="inputvalue" placeholder="" maxlength="140"></textarea>
            <view class="count-wrapper">
                <view class="count">{{ inputvalue.length }}/140</view>
            </view>
        </view>
        <view class="btn-wrapper">
            <button :disabled="!inputvalue.length" class="save-btn" @tap="save">保存</button>
        </view>
    </view>
</template>

<script setup>
import { ref } from "vue";
import { saveAdvantageApi } from "@/api/user.js";
const inputvalue = ref("");

onLoad(options => {
    if (options.data === 'null') return
    inputvalue.value = options.data;
});
const save = () => {
    saveAdvantageApi({ personalAdvantage: inputvalue.value }).then(res => {
        console.log(res);
        if (res.code == 200) {
            uni.showToast({
                title: "保存成功",
                icon: "success"
            });
            uni.navigateBack();
        } else {
            uni.showToast({
                title: res.message,
                icon: "none"
            });
        }
    });
};
</script>

<style lang="scss" scoped>
.container {
    height: 100vh;
    padding: 0 32rpx;
    background-color: #ffffff;
}

/* 标题 */
.container .title {
    padding: 20rpx 0;
    font-size: 32rpx;
    font-weight: 600;
    color: #213452;
}
.desc {
    margin-bottom: 32rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #5c7396;
}

/* 内容 */
.content {
    padding-bottom: 38rpx;
    border-bottom: 1rpx solid #e9e9e9;
}
.content .input-style {
    width: 100%;
    height: 216rpx;
}
.content .count-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.content .count-wrapper .look {
    display: flex;
    align-items: center;
    color: #213452;
}
.content .count-wrapper .look .xiaoyanjing {
    width: 48rpx;
    height: 48rpx;
}
.content .count-wrapper .count {
    color: #888888;
}

/* 推荐 */
.recommend {
    position: relative;
    padding: 53rpx 0 0;
}
.recommend .triangle {
    position: absolute;
    top: 33rpx;
    left: 120rpx;
    width: 40rpx;
    height: 40rpx;
    background-color: #f3f3f3;
    transform: rotate(45deg);
}
.recommend .recommend-info {
    padding: 34rpx 20rpx;
    background-color: #f3f3f3;
}
.recommend-info .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.recommend-info .header .info {
    display: flex;
    align-items: center;
}
.recommend-info .header .change {
    color: #0578ff;
}

/* 保存按钮 */
.btn-wrapper {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 12rpx 0;
    border-top: 1rpx solid #ebebeb;
}
.btn-wrapper .save-btn {
    width: 600rpx;
    height: 72rpx;
    font-size: 32rpx;
    line-height: 72rpx;
    color: #ffffff;
    background: #1892ff;
    border-radius: 8rpx;
}

/* 公共样式 */
.container view,
.container text {
    font-size: 24rpx;
}
.text-color {
    color: #213452;
}
.small-avatar {
    width: 60rpx;
    height: 60rpx;
}
.mr20 {
    margin-right: 20rpx;
}
.mt20 {
    margin-top: 20rpx;
}
.font-w600 {
    font-weight: 600;
}
.mr60 {
    margin-right: 60rpx;
}
</style>
