<!-- 图文咨询评价 -->
<template>
    <nav-bar :navbar-data="navbarData" />
    <view :style="{ marginTop: height + 'px' }">
        <view class="itdc-head-content">
            <view class="itdc-head-content-top">
                <view class="itdc-head-portrait"
                    :style="{ background: 'url(' + (doctorData.image ? doctorData.image : 'https://api.daidr.me/apis/imgholder/74x95.png') + ') no-repeat', backgroundSize: '100%', float: 'left', marginBottom: '50rpx' }" />
                <view>
                    <view class="itdc-head-content-top-text">
                        <text>{{ doctorData.name }}</text>
                        <text>{{ doctorData.titleDesc }}</text>
                        <text>{{ doctorData.locDesc }}</text>
                    </view>
                    <uni-rate :value="doctorData.gradeGvg" :size="14" allow-half readonly color="#ececec" disabled-color="#ececec" active-color="#F65C2C" />
                    <view>
                        咨询量：<text style="color:#13C2C2FF;">{{ doctorData.inquiries }}</text>
                        <text v-if="doctorData.resTime"><text style="color:#13C2C2FF;">{{ doctorData.resTime
                        }}</text>响应</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="cont-style">
            <text class="ith-text3">对本次在线诊疗服务的满意度：</text>
            <view class="cont-start">
                <uni-rate v-model="evaluateDate" @change="onRateChange" color="#ececec" disabled-color="#ececec" active-color="#F65C2C" gutter="25px" size="24" />
            </view>
            <view style="border: 1rpx solid #E1E1E1; padding : 10rpx;border-radius:4rpx;" :style="{backgroundColor: evaluateFlag == 'false' ? '#f7f7f7':'transparent'}">
                <textarea v-if="evaluateFlag == 'true'" placeholder-class="place-holder"
                    style="margin-top: 10rpx; width: 100%; position: relative;" placeholder="说说您对本次在线诊疗服务的具体感受吧!"
                    fixed="true" :value="appraise" :maxlength="100" @input="onChangeAppraise" name="content"></textarea>
                    <text class="currentWordNumber">{{ current }} / {{ noteMaxLen }} （最多可写100字）</text>
                <view v-if="evaluateFlag == 'false'" style="height:300rpx; ">
                    <text class="text-overfollow">{{appraise }}</text>
                </view>
            </view>
        </view>
    </view>
    <view class='add_btn'>
        <van-button type="info" size="large" @tap="saveEvaluate" :disabled="evaluateFlag == 'false'">{{ buttonText }}</van-button>
    </view>
</template>

<script>
import $http from "@/utils/https";
import Util from '@/utils/utils';
import httpConfig from '@/utils/httpConfig'
import navBar from '@/components/navBar/index'
import VanDivider from '@/components/divider/index'
import VanButton from '@/components/button/index'
const app = getApp()
export default {
    components: {
        'nav-bar': navBar,
        'van-divider': VanDivider,
        'van-button': VanButton
    },
    data() {
        return {
            height: app.globalData.height,
            windowHost: httpConfig && httpConfig.ipDeault,
            navbarData: {
                isGoHome: true,
                isGoBack: true,
                title: "图文咨询评价",
            },
            visible: false,
            admID: '',
            doctorID: '',
            lodID: '',
            doctorData: '',
            doctorname: '',
            evaluateDate: 0,
            appraise: '',
            grade: '',
            // 字数限制
            current: 0,
            noteMaxLen: 100,
            msgID: '',
            evaluateFlag: '',   //评价标志
            buttonText: ''    //按钮显示
        }
    },
    onLoad: function (options) {
        console.log('1111', options)
        let admID = options.admID
        let doctorname = options.doctorname
        let doctorID = options.doctorID
        let locID = options.locID
        let grade = options.garde
        let msgID = options.id || ''
        this.setData({
            admID: admID,
            doctorname: doctorname,
            doctorID: doctorID,
            locID: locID,
            grade: grade,
            msgID
        })
        this.getdoctorData()
        this.getEvaluateData()
    },
    onShow: function () {
        let pages = getCurrentPages();
        let currentPage = pages[pages.length - 1];
        let homeMsgData = this.$cache.get('homeMsgData');
        let mesIndex = '';
        homeMsgData && homeMsgData.forEach(function (item, index) {
            if (homeMsgData && (homeMsgData.type === 'F' || !homeMsgData.type) && item.timetamp == currentPage.options) {
                mesIndex = index
            }
        })
        if (mesIndex != '') {
            homeMsgData && homeMsgData.remove(mesIndex)
            this.$cache.set('homeMsgData', homeMsgData);
        }
    },
    methods: {
        onRateChange(e) {
            console.log('onRateChange',e)
            this.setData({
                evaluateDate: e.value
            });
        },

        onChangeAppraise(event) {
            var value = event.detail.value;
            console.log('onChangeAppraise', 12312)
            var length = parseInt(value.length);
            if (length > this.noteMaxLen) {
                return;
            }
            this.setData({
                current: length
            });
            // event.detail 为当前输入的值
            console.log(event.detail);
            this.setData({
                appraise: event.detail.value
            });
            console.log('appraise', this.appraise);

        },

        /**
       * 保存评价 
       */
        saveEvaluate: function () {
            if(this.evaluateFlag == 'false') return
            var appraise = this.appraise
            if (!appraise) {
                var appraise = '该用户未填写评价内容'
            } else {
                var appraise = this.appraise
            }
            if (!this.evaluateDate) {
                Util.showToast('满意度不能为空','none')
                return
            }
            let data = {
                params: [{
                    admID: this.admID,
                    appraiseNote: appraise,
                    grade: this.evaluateDate,
                    userCode: '',
                    messageID: this.msgID, // 消息记录ID，评价成功之后后台直接将这条消息状态置为已处理
                }]
            }
            $http.post("urlS", this, {
                namespace: "Y",
                code: "03100029",
                data: data,
                success: function (res) {
                    console.log("成功", res)
                    if (+res.errorCode === 0) {
                        // this.updateMsgStatus();
                        Util.showToast(res.errorMessage,'success')
                        uni.navigateTo({
                            url: "../../mine/myConsultation/myConsultation"
                        })
                    } else {
                        Util.showToast(res.errorMessage,'error')
                    }
                }
            });
        },

        // 更新消息状态
        // updateMsgStatus() {
        //   let { msgID } = this.data; 
        //   let data = {
        //     params: [{
        //       data: [msgID],
        //       userID: "P",
        //       statusID: 'H'
        //     }]
        //   }
        //   $http.post("urlS", this, {
        //     namespace: "Y",
        //     code: "03100098",
        //     data: data,
        //     namespace: "Y",
        //     success: function (res) {
        //       if (+res.errorCode === 0) {
        //         console.log(res)
        //       }
        //     }
        //   })
        // },

        /**
       * 获取医生信息
       */
        getdoctorData: function () {
            let userData = this.$cache.get('userData');
            console.log('666', userData)
            let userID = userData.openID
            let hospID = userData.hospID
            let data = {
                params: [{
                    docID: this.doctorID ? this.doctorID : "",
                    admID: this.admID,
                }]
            }
            $http.post("urlS", this, {
                namespace: "Y",
                code: "03100046",
                data: data,
                success: function (res) {
                    console.log("成功", res)
                    if (+res.errorCode === 0) {
                        let doctorData = res && res.result ? {
                            ...res.result
                        } : {};
                        doctorData.image = doctorData && doctorData.image.indexOf("http") !== -1 ? doctorData.image : this.windowHost + doctorData.image;
                        this.setData({ doctorData });
                    } else {
                        Util.showToast(res.errorMessage,'error')
                    }
                }
            });
        },

        // 获取评价信息
        getEvaluateData: function () {
            let userData = this.$cache.get('userData');
            console.log('666', userData)
            let data = {
                params: [{
                    admID: this.admID,
                }]
            }
            $http.post("urlS", this, {
                namespace: "Y",
                code: "03100144",
                data: data,
                success: function (res) {
                    console.log("获取评价信息数据", res)
                    if (+res.errorCode === 0) {
                        this.setData({
                            evaluateFlag: res.result.flag,
                            evaluateDate: res.result.flag == "true" ? 5 : res.result.grade,
                            appraise: res.result.appraiseNote,
                            buttonText: res.result.flag == "true" ? "提交" : "您已提交评价"
                        });
                    } else {
                        Util.showToast(res.errorMessage,'error')
                    }
                }
            });
        },
    }
}
</script>

<style>
.text-overfollow {
    margin-top: 10rpx;
    width: 90%;
    cursor:auto;
    text-overflow:ellipsis;
    position: absolute;
    word-wrap:break-word
}
/* pages/mine//evaluate/evaluate.wxss */
.itdc-head-content {
  max-height: 380rpx;
  background: #fff;
  overflow: hidden;
  border-radius: 10rpx;
}

.itdc-head-content-top {
  width: 100%;
  padding: 32rpx;
  padding-bottom: 24rpx;
  box-sizing: border-box;
}

.itdc-head-portrait {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 24rpx;
}

.itdc-head-content-top-text {
  font-size: 28rpx;
  color: #666;
}

.itdc-head-content-top-text text:nth-child(1) {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.itdc-head-content-top-text text:nth-child(2) {
  margin: 0 16rpx;
}

.itdc-head-content-top .van-rate {
  border-radius: 10rpx;
  width: 240rpx;
  height: 40rpx;
  margin: 16rpx 0;
  line-height: 40rpx;
  background: #feeee8;
  display: flex;
  justify-content: space-between;
  padding: 0 12rpx;
  padding-bottom: 4rpx;
  align-items: center;
  box-sizing: border-box;
}

.cont-style {
  margin-top: 10rpx;
  padding: 32rpx 24rpx;
  padding-bottom: 66rpx;
  background-color: #fff;
}

.con-image {
  margin-left: 20rpx;
}

.ith-text3 {
  font-size: 32rpx;
  color: #666;
}

.ith-text4 {
  margin-left: 10rpx;
  font-weight: 400;
  font-style: normal;
  font-size: 28px;
  color: rgb(204, 204, 204);
}

.card {
  background: rgba(255, 255, 255, 1);
  margin-top: 10rpx;
}

.bottom_line {
  width: 750rpx;
  height: 1rpx;
  background: rgba(245, 244, 244, 1);
}

.currentWordNumber {
  position: absolute;
  bottom: 10rpx;
  right: 4rpx;
  color: #E1E1E1;
  font-size: 28rpx;
}

.cont-start {
  width: 100%;
  text-align: center;
  margin: 24rpx 0;
}

.add_btn {
  width: 100%;
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 0px);
}

.place-holder {
  color: #CCCCCC;
  font-size: 28rpx !important;
}
</style>