<template>
    <view>
        <view v-if="!showLast" class="evaluate">
            <view class="evaluate-title c-gap-bottom">
                {{ uerQuestion[chooseIndex].question }} ({{ chooseIndex + 1 }}/{{ uerQuestion.length }})
            </view>
            <view class="evaluate-icons">
                <view
                    v-for="(item, index) in uerQuestion[chooseIndex].content"
                    :key="'evaluate' + index"
                    class="evaluate-icon"
                    @tap="checkIcon(index)">
                    <image
                        :src="chooseIconIndex === index ? item.iconActive : item.iconNormal"
                        class="evaluate-smile"/>
                    <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">
                    {{ uerQuestion[chooseIndex].content[chooseIconIndex].optionTitle }}
                </view>
                <view class="evaluate-btns">
                    <view
                        v-for="(item, index) in uerQuestion[chooseIndex].content[chooseIconIndex].option"
                        :key="'option' + index"
                        :class="['evaluate-btn', chooseType[index] === 1 ? 'evaluate-btn-active' : '', item.row === 2 ? 'evaluate-btn-cover' : '']"
                        @tap="checkOptions(index)">
                        {{ item.title }}
                        <image
                            v-if="chooseType[index] === 1"
                            src="https://medical-cms.cdn.bcebos.com/pic/pic_1590568095540cQd2dXAC.png"
                            class="evaluate-btn-check"/>
                    </view>
                </view>
                 <view v-if="showElse">
                    <!-- <view class="evaluate-title c-gap-top-large c-gap-bottom">
                        有其他建议也请告诉我们吧！
                    </view> -->
                    <view class="evaluate-put c-gap-top-large">
                        <textarea
                            v-model="textInput"
                            :show-confirm-bar="false"
                            :maxlength="maxNumber"
                            cursor="-1"
                            placeholder="请留下您宝贵的建议，我们很关注您的感受～"
                            placeholder-class="evaluate-text-plc"
                            class="evaluate-text c-font-normal"
                            @input="inputText"
                        ></textarea>
                        <view class="last-time">{{ number }}/{{ maxNumber }}</view>
                    </view>
                </view>
                <view v-if="chooseIndex < uerQuestion.length - 1" class="evaluate-sure" @tap="goNext">
                    下一题
                </view>
                <view v-if="chooseIndex === uerQuestion.length - 1" class="evaluate-sure"  @tap="goComplete">
                    提交
                </view>
            </view>
        </view>
        <view v-else class="evaluate">
            <image
                src="https://medical-cms.cdn.bcebos.com/pic/pic_1590576401659fTzlnXdC.png"
                class="evaluate-yes-icon"/>
            <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>
</template>

<script>
/**
* @file 反馈组件
* @author lixue25
* @categories
* @tags
*/
// let timeStr;
export default {
    config: {
        component: true
    },
    props: {
        // question 数组list
        uerQuestion: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            chooseIconIndex: -1,
            chooseIndex: 0,
            showElse: false,
            showLast: false,
            // lastTime: 3,
            chooseType: [],
            inputArray: [],
            textInput: '',
            number: 0,
            maxNumber: 100
        };
    },
    created() {},
    // onHide() {
    //     clearInterval(timeStr);
    // },
    components: {},
    methods: {
        inputText(e) {
            let len = e.detail.value.length;
            this.number = len;
            this.inputArray[this.chooseIndex] = {
                questionCode: this.uerQuestion[this.chooseIndex].questionCode,
                text: e.detail.value
            };
        },
        goNext() {
            this.chooseType.forEach((item, index) => {
                this.uerQuestion[this.chooseIndex].content[this.chooseIconIndex].option[
                    index
                ].isChoose = item.toString();
            });
            if (this.chooseIndex < this.uerQuestion.length - 1) {
                this.chooseIndex++;
                this.chooseIconIndex = -1;
            }
            this.textInput = '';
            this.showElse = false;
        },
        goComplete() {
            this.goNext();
            this.showLast = true;
            let uerQuestionArray = [];
            let putObj = {};
            // 处理数据满足rd
            // console.log(this.uerQuestion);
            this.uerQuestion.forEach(item => {
                let obj = {};
                obj.chooseIconIndex = item.chooseIconIndex + 1;
                obj.questionCode = item.questionCode;
                let dataArray = [];
                item.content[item.chooseIconIndex].option.forEach(item => {
                    if (item.isChoose === '1') {
                        dataArray.push(item.key);
                    }
                });
                obj.isChooseOption = dataArray;
                uerQuestionArray.push(obj);
            });

            // console.log(this.inputArray);
            // console.log(uerQuestionArray);
            Object.assign(putObj, {uerFeedBack: JSON.stringify(this.inputArray)});
            Object.assign(putObj, {uerQuestion: JSON.stringify(uerQuestionArray)});
            // 提交数据
            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.uerQuestion[this.chooseIndex].chooseIconIndex = index;
                this.getTypeArray(this.uerQuestion[this.chooseIndex].content[this.chooseIconIndex].option.length);
            }
        },
        checkOptions(index) {
            if (this.chooseType[index] === 1) {
                this.$set(this.chooseType, index, 0);
                if (this.uerQuestion[this.chooseIndex].content[this.chooseIconIndex].option[index].key.indexOf('e')
                    !== -1) {
                    this.showElse = false;
                }
            } else {
                this.$set(this.chooseType, index, 1);
                if (this.uerQuestion[this.chooseIndex].content[this.chooseIconIndex].option[index].key.indexOf('e')
                    !== -1) {
                    this.showElse = true;
                }
            }
            // console.log(this.chooseType);
        },
        getTypeArray(len) {
            for (let i = 0; i < len; i++) {
                this.chooseType.push(0);
            }
        }
    }
};
</script>

<style lang="stylus" scoped>
.evaluate 
    border-radius 5px
    background #f5f5f5
    padding 15px 0
    font-size 13px
    color #666666
    position relative

    &-btns-enter-active,
    &-btns-leave-active 
        transition all 0.5s linear
        height: auto

    &-btns-enter,
    &-btns-leave-to
        height 0

    &-btns
        padding 0 17px
        display flex
        flex-wrap wrap
    &-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
    &-btn-check
        width 17px
        height 15px
        position absolute
        right -1px
        bottom -1px
 
    &-btn-active
        color #00c8c8
        border 1px solid #00c8c8

    &-btn-cover
        width 100%
    
    &-title
        font-size 16px
        font-weight 400
        color #000000
        padding 0 17px

    &-icons
        display flex
        align-items center
        justify-content space-around

    &-icon
        flex 1
        text-align center

    &-smile
        width 36px
        height 36px
        margin 0 auto
        display block

    &-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

    &-put 
        padding 0 17px
        position relative
    &-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
        
    &-text-plc
        color: #999999
        font-size: 14px

    &-yes-icon 
        width 40px
        height 40px
        display block
        margin 0 auto
    
    &-tips 
        text-align center
    
    &-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>