<template>
    <view class="body">
        <view class="body_content">
            <view class="answer_input">
                <view class="answer_input_box">
                    <textarea @input="remarkInput" class="input" type="text" maxlength="300" placeholder="评论的内容（最多300字）"></textarea>
                    <view class="textarea_msg"><text v-text="remarkLen">0</text>/300</view>
                </view>
            </view>
            <view class="content_btn_con" @click="subMitData">
                <view class="main_content_btn">发布评论</view>
            </view>
        </view>
    </view>
</template>


<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
    mixins: [MescrollMixin],
    components: {
        
    },
    data() {
        return {
            indicatorDots:false,
            autoplay:true,
            interval:5000,
            duration:1000,
            mescroll: null,
            downOption: {
                use: false, //是否启用下拉刷新
                auto: false //是否自动加载
            },
            upOption: {
                use: false, //是否启用上拉加载更多
                auto: false //是否自动加载
            },
            id:"",
            remarkLen:0,
            remark:""
        };
    },
    onLoad(options) {
        let that = this;
        that.id = options.id;
    },
    onReady() {
        
    },
    onShow() {
         
    },
    methods: {
        subMitData(){
            let that = this;
            if(!this.remark){
                this.$util.showToast("评论的内容不能为空");
                return;
            }
            that.$doPost('Server.aspx', {
               mod: 'addPL',
               cgid: that.id,
               content:that.remark
            })
            .then(res => {
               if (res.data.resultcode != 0) {
                   that.$util.showToast(res.data.msg);
                   return;
               }
               that.$util.showToast(res.data.msg);
               setTimeout(function(){
                   uni.navigateBack()
               },1500)
            })
            .catch(err => {
               console.log('request fail', err);
            });
        },
        remarkInput(e){
            this.remark = e.detail.value;
            this.remarkLen = e.detail.value.length;
        }
    }
};
</script>

<style lang="scss">
    page,.body{
        background: #fff;
    }
    .answer_input{
        background: #fff;
        padding: 0 30upx 30upx 30upx;
        overflow: hidden;
        margin-top: 20upx;
    }
    .answer_input .answer_input_box{
        height: 370upx;
        background: #f7f7f8;
        padding:0 30upx;
        position: relative;
        border-radius: 20upx;
    }
    .answer_input .answer_input_box .input{
        padding:30upx 0 110upx 0;
        font-size: 28upx;
        height: 250upx;
        line-height: 36upx;
        width: 100%;
    }
    .answer_input .answer_input_box .textarea_msg{
        position: absolute;
        right: 30upx;
        bottom: 30upx;
        z-index: 100;
        font-size: 28upx;
        color:#797979;
    }
</style>
