<template>
    <!-- pages/oneselfCenter/page/comprehensiveScore/comprehensiveScore.wxml -->
    <!-- <text>pages/oneselfCenter/page/comprehensiveScore/comprehensiveScore.wxml</text> -->
    <view class="page">
        <view class="default">
            <view class="row whole_title">
                <view :class="'col-3 ' + (code == 'A' ? 'click' : '')" @tap="queryScore" data-code="A" data-score="">全部</view>
                <view :class="'col-3 ' + (code == 'B' ? 'click' : '')" @tap="queryScore" data-code="B" data-score="0-2">0~2分</view>
                <view :class="'col-3 ' + (code == 'C' ? 'click' : '')" @tap="queryScore" data-code="C" data-score="3-4">3~4分</view>
                <view :class="'col-3 ' + (code == 'D' ? 'click' : '')" @tap="queryScore" data-code="D" data-score="5-5">5分</view>
            </view>
        </view>
        <view class="body">
            <view class="section" v-for="(item, index) in evaluateList" :key="index">
                <view class="title">
                    <view class="staricon">
                        <van-rate
                            size="22"
                            color="#FA541C"
                            void-icon="star"
                            void-color="#eee"
                            :allow-half="true"
                            :value="item.grade"
                            :readonly="true"
                            style="vertical-align: middle"
                        />
                        <text style="font-weight: 700; color: #fa541c; margin-left: 10rpx">{{ item.grade }} 分</text>
                    </view>
                    <view class="auditicon">
                        <image v-if="item.statusCode == '02'" src="https://chis.e24health.com/images/icon/doctor/audit.png"></image>
                        <image v-if="item.statusCode == '03'" src="https://chis.e24health.com/images/icon/doctor/auditunpass.png"></image>
                        <image v-if="item.statusCode == '01'" src="https://chis.e24health.com/images/icon/doctor/unaudit.png"></image>
                    </view>
                </view>

                <view class="positionbox">
                    <view class="content">
                        <view class="content-inner">
                            <view :class="'textFour_box ' + (item.seeMore ? 'three' : '')">{{ item.appraiseNote }}</view>
                            <view class="text_toggle_box" v-if="item.seeMore" :data-index="index" @tap.stop.prevent="toggleHandler">
                                <text class="text_toggle_text">查看更多</text>
                            </view>
                            <view class="text_toggle_box" v-if="item && !item.seeMore && item.auto" :data-index="index" @tap.stop.prevent="toggleContent">
                                <text class="text_toggle_text">收起</text>
                            </view>
                        </view>
                    </view>
                    <view class="info">
                        <view class="info-item info-item1">
                            <text class="type">{{ item.type }}</text>
                            <text class="name">{{ item.patName }}</text>
                            <text class="time" style="color: #999999">{{ item.createDate }}</text>
                        </view>
                        <view class="info-item info-item2" @tap="treatRecord" :data-item="item">咨询记录</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import Cache from '../../../../utils/cache';
// pages/oneselfCenter/page/comprehensiveScore/comprehensiveScore.js
import { $http } from '../../../../config/https.js';
var index;
export default {
    data() {
        return {
            code: 'A',
            evaluateList: [] //评价信息
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.getScoreDetail('');
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        initData: function () {
            var that = this;
            const query = uni.createSelectorQuery();
            query
                .selectAll('.textFour_box')
                .fields({
                    size: true
                })
                .exec(function (res) {
                    console.log(res[0], '所有节点信息');
                    let lineHeight = 26; //固定高度值 单位：PX
                    for (var i = 0; i < res[0].length; i++) {
                        if (res[0][i].height / lineHeight > 3) {
                            that.evaluateList[i].auto = true;
                            that.evaluateList[i].seeMore = true;
                        }
                    }
                    that.setData({
                        evaluateList: that.evaluateList
                    });
                });
        },

        toggleHandler: function (e) {
            var that = this;
            index = e.currentTarget.dataset.index;
            for (var i = 0; i < that.evaluateList.length; i++) {
                if (index == i) {
                    that.evaluateList[index].auto = true;
                    that.evaluateList[index].seeMore = false;
                }
            }
            that.setData({
                evaluateList: that.evaluateList
            });
        },

        //收起更多
        toggleContent: function (e) {
            var that = this;
            index = e.currentTarget.dataset.index;
            for (var i = 0; i < that.evaluateList.length; i++) {
                if (index == i) {
                    that.evaluateList[index].auto = true;
                    that.evaluateList[index].seeMore = true;
                }
            }
            that.setData({
                evaluateList: that.evaluateList
            });
        },

        getScoreDetail: function (grade) {
            let userData = Cache.get('userData');
            let { hospID } = userData;
            let data = {
                params: [
                    {
                        docName: userData.userName,
                        doctorID: userData.userID,
                        locID: userData.locID,
                        statusID: '',
                        patName: '',
                        startDate: '',
                        endDate: '',
                        grade: grade
                    }
                ]
            };
            $http.post('urlDeault', this, {
                code: '03100030',
                data: data,
                success: function (res) {
                    if (res.errorCode == '0') {
                        let newArray = res.result.map((item) => {
                            item.auto = false;
                            item.seeMore = false;
                            // item.appraiseNote = "fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffggggggggggggggggggggggggggggggggggggggggggggggggggggggggffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff";
                            return item;
                        });
                        this.setData(
                            {
                                evaluateList: newArray
                            },
                            () => {
                                this.initData();
                            }
                        );
                    }
                }
            });
        },

        treatRecord: function (event) {
            let item = event.currentTarget.dataset.item;
            uni.setStorage({
                key: 'patientData',
                data: item,
                success: function () {
                    if (item.typeCode == 'VIDEO') {
                        uni.navigateTo({
                            url: '/pages/myConsultRoom/page/treatment/treatment?admtype=video&record=1'
                        });
                    } else {
                        uni.navigateTo({
                            url: '/pages/myConsultRoom/page/treatmentrecord/treatmentrecord'
                        });
                    }
                }
            });
        },

        queryScore: function (event) {
            let code = event.currentTarget.dataset.code;
            let score = event.currentTarget.dataset.score;
            this.setData(
                {
                    code: code
                },
                () => {
                    this.getScoreDetail(score);
                }
            );
        }
    }
};
</script>
<style>
/* pages/oneselfCenter/page/comprehensiveScore/comprehensiveScore.wxss */

page {
    overflow: hidden;
    height: 100%;
    background: #f4f7fb;
}

.page {
    width: 100%;
    box-sizing: border-box;
    background-color: #f4f7fb;
    color: #333;
    font-size: 28rpx;
    height: 100%;
}

.ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    padding: 10rpx 0;
    /* overflow: hidden; */
}

/* 展示全部 */

.unellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 0;
    padding: 10rpx 0;
}

.ellipsisbtn {
    color: #1890ff;
}

.default {
    background-color: #fff;
    /* border-bottom: 1px solid var(--weui-FG-3);
  border-top: 1px solid var(--weui-FG-3); */
    height: 92rpx;
    margin-top: 0;
    padding: 14rpx 20rpx;
    box-sizing: border-box;
    box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.04);
}

.body {
    height: calc(100% - 92rpx);
    width: 100%;
    padding: 14rpx 20rpx 30rpx;
    box-sizing: border-box;
    overflow: auto;
}

.list {
    overflow-y: auto;
}

.click {
    padding: 0 20rpx !important;
    border: 1px solid #1687ff;
    height: 54rpx !important;
    line-height: 54rpx !important;
    width: auto !important;
    min-width: 104rpx;
    margin: 0 !important;
    border-radius: 999rpx;
    color: #1890ff !important;
    font-size: 28rpx;
    font-weight: 600;
    background-color: #eaf4ff !important;
    box-shadow: 0 8rpx 18rpx rgba(24, 144, 255, 0.12);
}

.whole_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64rpx;
    line-height: normal;
    /* padding: 0px 10px;
  line-height: 100px; */
}

.whole_title .col-3 {
    text-align: center;
    height: 54rpx;
    min-width: 104rpx;
    width: auto;
    margin: 0;
    line-height: 54rpx;
    padding: 0 20rpx;
    border-radius: 999rpx;
    background-color: #f2f5f9;
    color: #5f6b7a;
    box-sizing: border-box;
    font-size: 28rpx;
}

.wholeyue_title {
    color: #333;
}

.item_temp {
    color: #333;
}

.section {
    padding: 0 22rpx;
    margin-top: 0;
    margin-bottom: 14rpx;
    background-color: #fff;
    /* width: calc(100% - 92rpx);
  margin-left: 26rpx;
  margin-right: 26rpx; */
    border-radius: 16rpx;
    box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.section .title {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    min-height: 76rpx;
    border-bottom: 1px solid #edf1f6;
}

.section .title .staricon {
    min-height: 66rpx;
    height: auto;
    line-height: 66rpx;
    text-align: center;
    border-bottom: 0;
    flex: 1 1 1%;
    padding-top: 0;
}

.section .title .auditicon {
    flex: 0 0 96rpx;
    padding: 12rpx 0 12rpx 12rpx;
    text-align: right;
}

.section .title .auditicon image {
    width: 84rpx;
    height: 70rpx;
    /* border: 1px dashed #444; */
}

.section .content {
    padding-top: 14rpx;
    padding-bottom: 14rpx;
    border-bottom: 1px solid #edf1f6;
    font-size: 30rpx;
}

.section .positionbox {
    position: relative;
    margin-top: 0;
}

.section .content .content-inner {
    padding-right: 0;
    min-height: 86rpx;
}

.section .info {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: #5f6b7a;
    box-sizing: border-box;
    min-height: 74rpx;
    font-size: 26rpx;
}

.section .info .info-item {
    line-height: 36rpx;
}

.section .info .info-item1 {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 14rpx 0;
}

.section .info .info-item1 .type {
    font-weight: 500;
    padding-right: 10px;
    border-right: 1px solid #d8dee8;
    flex: 0 0 auto;
    max-width: 132rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section .info .info-item1 .name {
    margin-right: 14rpx;
    margin-left: 14rpx;
    flex: 0 0 auto;
    max-width: 118rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section .info .info-item1 .time {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section .info .info-item2 {
    flex: 0 0 116rpx;
    text-align: center;
    color: #1890ff;
    padding-right: 0;
    font-weight: 600;
}

.box {
    margin: 40rpx 32rpx;
}
.text_box {
    width: 100%;
    font-size: 30rpx;
    font-weight: 400;
    color: rgba(87, 105, 123, 1);
    line-height: 48rpx;
}
.textFour_box {
    width: 100%;
    font-size: 30rpx;
    font-weight: 400;
    color: #334155;
    line-height: 42rpx;
    text-align: justify;
    padding: 6rpx 0;
    word-wrap: break-word;
}

.text_toggle_box {
    display: -webkit-box;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    margin: 10rpx 0;
}
.text_toggle_text {
    font-size: 28rpx;
    color: #1890ff;
    line-height: 32rpx;
    margin-right: 10rpx;
}
.three {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>
