<!--
 * @Description: 医典落地页评价组件
 * @Author: yumingzhi
 -->
<template>
    <view>
        <view class="evaluate" v-if="!showAsk">
            <view class="evaluate-title c-gap-bottom">
                {{ userQuestion[chooseIndex].question }}({{ chooseIndex + 1 }}/{{ userQuestion.length }})
            </view>
            <view class="evaluate-icons">
                <view
                    class="evaluate-icon"
                    v-for="(item, index) in userQuestion[chooseIndex].content"
                    :key="'evaluate' + index"
                    @tap="checkIcon(index)"
                >
                    <image
                        :src="chooseIconIndex === index ? item.iconActive : item.iconNormal"
                        class="evaluate-smile"
                    ></image>
                    <view class="evaluate-name c-gap-top-small">{{ item.level }}</view>
                </view>
            </view>
            <view v-if="chooseIconIndex >= 0">
                <view class="evaluate-title c-gap-top-large">
                    {{ userQuestion[chooseIndex].content[chooseIconIndex].optionTitle }}
                </view>
                <view class="evaluate-btns">
                    <view
                        class="evaluate-btn"
                        v-for="(item, index) in userQuestion[chooseIndex].content[chooseIconIndex].option"
                        :key="'option' + index"
                        :class="chooseType[index] === 1 ? 'evaluate-btn-active' : ''"
                        @tap="checkOptions(index)"
                    >
                        {{ item.title }}
                        <image
                            src="https://medical-cms.cdn.bcebos.com/pic/pic_1590568095540cQd2dXAC.png"
                            class="evaluate-btn-check"
                            v-if="chooseType[index] === 1"
                        ></image>
                    </view>
                </view>
                <view class="evaluate-sure" v-if="chooseIndex < userQuestion.length" @tap="goNext">
                    {{ chooseIndex < userQuestion.length - 1 ? '下一题' : '继续' }}
                </view>
            </view>
        </view>
        <view class="evaluate" v-else>
            <view v-if="!showLast">
                <view class="evaluate-title c-gap-bottom">
                    有其他建议也请告诉我们吧！
                </view>
                <view class="evaluate-put">
                    <textarea
                        class="evaluate-text c-font-normal"
                        :maxlength="maxNumber"
                        cursor="-1"
                        placeholder="请留下您宝贵的建议，我们很关注您的感受～"
                        placeholder-class="evaluate-text-plc"
                        :show-confirm-bar="false"
                        v-model="textInput"
                        @input="inputText"
                    ></textarea>
                    <view class="last-time">{{ number }}/{{ maxNumber }}</view>
                </view>
                <view class="evaluate-sure" v-if="chooseIndex < userQuestion.length" @tap="goComplete">
                    提交
                </view>
            </view>
            <view v-else>
                <image
                    src="https://medical-cms.cdn.bcebos.com/pic/pic_1590576401659fTzlnXdC.png"
                    class="evaluate-yes-icon"
                ></image>
                <view class="evaluate-tips c-font-normal c-color-link c-gap-top">感谢评价，我们会努力做的更好</view>
                <view class="evaluate-time c-font-tiny">{{ lastTime }}s</view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @author yumingzhi
 * @file 医典落地页评价
 */
let timeStr;
export default {
    config: {
        component: true
    },
    props: {
        userQuestion: {
            type: Array,
            default: () => []
        },
        cardType: {
            type: Number,
            default: 1
        }
    },
    data() {
        return {
            chooseIconIndex: -1,
            chooseIndex: 0,
            showAsk: false,
            showLast: false,
            lastTime: 3,
            chooseType: [],
            textInput: '',
            number: 0,
            maxNumber: 100
        };
    },
    created() {},
    onHide() {
        clearInterval(timeStr);
    },
    components: {},
    methods: {
        inputText(e) {
            let len = e.detail.value.length;
            this.number = len;
        },
        goNext() {
            this.chooseType.forEach((item, index) => {
                this.userQuestion[this.chooseIndex].content[this.chooseIconIndex].option[
                    index
                ].isChoose = item.toString();
            });
            if (this.chooseIndex < this.userQuestion.length - 1) {
                this.chooseIndex++;
                this.chooseIconIndex = -1;
            } else {
                this.showAsk = true;
            }
        },
        goComplete() {
            this.showLast = true;
            let userQuestionArray = [];
            let putObj = {};
            // 处理数据满足rd
            this.userQuestion.forEach(item => {
                let obj = {};
                obj.chooseIconIndex = item.chooseIconIndex;
                obj.questionCode = item.questionCode;
                let dataArray = [];
                item.content[item.chooseIconIndex].option.forEach(item => {
                    if (item.isChoose === '1') {
                        dataArray.push(item.key);
                    }
                });
                obj.isChooseOption = dataArray;
                userQuestionArray.push(obj);
            });
            if (this.textInput) {
                Object.assign(putObj, {userFeedBack: this.textInput});
            } else {
                Object.assign(putObj, {userFeedBack: '无文字反馈'});
            }
            Object.assign(putObj, {userQuestion: JSON.stringify(userQuestionArray)});
            this.$emit('setEvaluate', putObj);
            timeStr = setInterval(() => {
                this.lastTime--;
                if (this.lastTime <= 0) {
                    clearTimeout(timeStr);
                    this.$emit('closeEvaluate', true);
                }
            }, 1000);
        },
        checkIcon(index) {
            if (this.chooseIconIndex !== index) {
                this.chooseIconIndex = index;
                this.chooseType = [];
                this.userQuestion[this.chooseIndex].chooseIconIndex = index;
                this.getTypeArray(this.userQuestion[this.chooseIndex].content[this.chooseIconIndex].option.length);
            }
        },
        checkOptions(index) {
            if (this.chooseType[index] === 1) {
                this.$set(this.chooseType, index, 0);
            } else {
                this.$set(this.chooseType, index, 1);
            }
        },
        getTypeArray(len) {
            for (let i = 0; i < len; i++) {
                this.chooseType.push(0);
            }
        }
    }
};
</script>

<style lang="less" scoped>
.evaluate {
    border-radius: 5px;
    background: #f5f5f5;
    padding: 15px 0;
    font-size: 13px;
    color: #666666;
    position: relative;
    .evaluate-btns-enter-active,
    .evaluate-btns-leave-active {
        transition: all 0.5s linear;
        height: auto;
    }
    .evaluate-btns-enter,
    .evaluate-btns-leave-to {
        height: 0;
    }
    .evaluate-title {
        font-size: 16px;
        font-weight: 400;
        color: #000000;
        padding: 0 17px;
    }
    .evaluate-icons {
        display: flex;
        align-items: center;
        justify-content: space-around;
        .evaluate-icon {
            flex: 1;
            text-align: center;
            .evaluate-smile {
                width: 36px;
                height: 36px;
                margin: 0 auto;
                display: block;
            }
        }
    }
    .evaluate-btns {
        padding: 0 17px;
        display: flex;
        flex-wrap: wrap;
        .evaluate-btn {
            width: calc((100% - 8px) / 2);
            box-sizing: border-box;
            margin-left: 8px;
            margin-top: 8px;
            height: 28px;
            border: 1px solid #999999;
            text-align: center;
            line-height: 28px;
            border-radius: 5px;
            color: #666666;
            font-size: 13px;
            position: relative;
            &:nth-child(2n + 1) {
                margin-left: 0;
            }
            .evaluate-btn-check {
                width: 17px;
                height: 15px;
                position: absolute;
                right: -1px;
                bottom: -1px;
            }
        }
        .evaluate-btn-active {
            color: #00c8c8;
            border: 1px solid #00c8c8;
        }
    }
    .evaluate-put {
        padding: 0 17px;
        position: relative;
        .evaluate-text {
            padding: 9px 8px 16px;
            width: 100%;
            box-sizing: border-box;
            height: 86px;
            border-radius: 5px;
            background: rgba(230, 230, 230, 0.6);
            border: none;
            resize: none;
            outline-offset: none;
            outline: none;
            color: #000000;
            position: relative;
            &:focus {
                outline-offset: none;
                outline: none;
            }
        }
        .last-time {
            position: absolute;
            right: 22px;
            bottom: 0;
            color: #999999;
            font-size: 12px;
            font-weight: 300;
            z-index: 1;
        }
        .evaluate-text-plc {
            color: #999999;
            font-size: 14px;
        }
    }
    .evaluate-sure {
        margin: 16px auto 0;
        width: 109px;
        height: 36px;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        border: 1px solid #bbbbbb;
        color: #000;
        font-size: 14px;
        font-weight: 400;
    }
    .evaluate-yes-icon {
        width: 40px;
        height: 40px;
        display: block;
        margin: 0 auto;
    }
    .evaluate-tips {
        text-align: center;
    }
    .evaluate-time {
        position: absolute;
        right: 9px;
        top: 9px;
        width: 30px;
        height: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        background: rgba(230, 230, 230, 0.6);
        color: #999999;
    }
}
</style>
