<template>
    <view class="page-css">
        <view class="container">
            <betone-header-top :titleMin="'您对本次维修的满意度如何？'" />
            <view v-for="(item, index) in questionList" :key="index" class="question-box">
                <view class="title">{{ index + 1 }}.{{ item.title }}</view>
                <view class="btn">
                    <text :class="'btn' + index" v-for="(v, sIndex) in satisfactionList" :key="sIndex"
                        @click="satisfactionFn(item, index, sIndex)">{{ v.name }}</text>
                </view>
            </view>
        </view>
        <view class="sign-box">
            <betone-header-top :titleMin="'请签字确认'" />
            <image v-if="image2 == ''" src='@/static/images/submit/sign_icon.png' mode="aspectFit" @click="toPop1()" />
            <image v-else :src="image2" style="width: 200px;" mode="widthFix" @click="toPop1()"></image>
        </view>
        <view class="sub-btn">
            <u-button type="primary" @click="submitBreakdown()">提交</u-button>
        </view>

        <jp-signature-popup ref="signature1" popup v-model="image2" />

    </view>
</template>
<script>
export default {
    data() {
        return {
            id: '',//需求提报id
            questionList: [
                {
                    title: '您对本次维修的质量方面满意吗？',
                    type: null,
                },
                {
                    title: '您对本次维修的安全方面满意吗？',
                    type: null,
                },
                {
                    title: '您对本次维修的时效方面满意吗？',
                    type: null,
                }
            ],
            satisfactionList: [
                {
                    name: '满意',
                    value: 1
                },
                {
                    name: '不满意',
                    value: 0
                }
            ],
            image2: '',//图片地址
        }
    },
    onLoad(options) {
        this.id = options.id
    },
    methods: {
        satisfactionFn(row, index, sIndex) {
            // 获取btn的classname  并且根据sindex给class添加active   同时删除他的兄弟节点的active
            let btns = document.querySelector(`.btn${index}`)
            var siblings = Array.prototype.slice.call(btns.parentNode.children).filter(function (child) {
                return child;
            });
            this.questionList[index].type = this.satisfactionList[sIndex].value
            siblings.forEach((i, h) => {
                if (sIndex == h) {

                    i.classList.add("active");
                } else {
                    i.classList.remove("active");
                }
            })
        },
        submitBreakdown() {
            for (let i = 0; i < this.questionList.length; i++) {
                if (this.questionList[i].type == null) {

                    return false
                }
            }
            let timeNow = new Date().toLocaleDateString()
            let userInfo = uni.getStorageSync('loginInfo')
            let query_ = {
                id: this.id,				//需求id
                isOkQuality: this.questionList[0].type,		//质量是否满意 0-不满意 1-满意
                isOkSecure: this.questionList[1].type,			//安全是否满意 0-不满意 1-满意
                isOkValidity: this.questionList[2].type,		//时效是否满意 0-不满意  1-满意
                signatureUrl: this.image2,		//签名图片
                signaturePerson: userInfo.user_name,		//签名人
                signatureTime: this.$u.timeFrom(timeNow, 'yyyy-mm-dd'),		//签名时间
            }
            this.$u.api.evaluateSign(query_).then(res => {
                if (res.code == 200) {
                    uni.showToast({ title: "评价成功", icon: "none" });
                    // 评价成功  返回上一级
                    uni.navigateBack({
                        delta: 1 // 默认值是1，表示返回的页面层数
                    })
                }
            })
        },

        toPop1() {
            this.$refs.signature1.toPop()
        },
    }
}
</script>
<style lang="scss" scoped>
.page-css {
    padding: 0;
    overflow: hidden;

    .container {
        border-radius: 20rpx;
        background: #fff;
        margin: 32rpx 32rpx 0;
        padding: 40rpx;

        .question-box {
            margin-bottom: 32rpx;

            .title {
                line-height: 60rpx;
                color: rgba(108, 108, 108, 1);
                font-size: 28rpx;
                padding-bottom: 16rpx;
            }

            .btn {
                display: flex;
                justify-content: space-between;

                text {
                    width: 48%;
                    line-height: 60rpx;
                    border-radius: 8rpx;
                    background-color: rgba(239, 239, 239, 1);
                    color: rgba(79, 79, 79, 1);
                    font-size: 28rpx;
                    text-align: center;
                }

                .active {
                    background-color: #4f4f4f;
                    opacity: 0.5;
                    color: #fff;
                }
            }
        }
    }

    .sign-box {
        border-radius: 20rpx;
        background: #fff;
        margin: 32rpx 32rpx 0;
        padding: 40rpx;

        image {
            width: 100%;
            height: 240rpx;
        }
    }

    .sub-btn {
        margin: 64rpx 32rpx 32rpx;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
}
</style>