<template>
    <view class="page-css">
        <view class="container">
            <view class="question-box">
                <betone-header-top :titleMin="'确认维修是否完成？'" />
                <view class="btn">
                    <view class="uni-px-5 uni-pb-5">
                        <uni-data-checkbox mode="tag" v-model="completeValue"
                            :localdata="completeList"></uni-data-checkbox>
                    </view>
                </view>
            </view>

            <view v-if="completeValue == 1">
                <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">
                        <view class="uni-px-5 uni-pb-5">
                            <uni-data-checkbox mode="tag" v-model="item.type"
                                :localdata="satisfactionList"></uni-data-checkbox>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="sign-box" v-if="completeValue == 1">
            <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" />
        <betone-loading ref="BetLoading"></betone-loading>
    </view>
</template>
<script>
import website from '@/utils/website'
import { Base64 } from '@/uni_modules/js_sdk/js-base64/base64.js';
import { dateFormat } from '@/utils/util.js'
export default {
    data() {
        return {
            id: '',//需求提报id
            userInfo: {},//用户信息
            questionList: [
                {
                    title: '您对本次维修的质量方面满意吗？',
                    type: null,
                },
                {
                    title: '您对本次维修的安全方面满意吗？',
                    type: null,
                },
                {
                    title: '您对本次维修的时效方面满意吗？',
                    type: null,
                }
            ],
            satisfactionList: [
                {
                    text: '满意',
                    value: 1
                },
                {
                    text: '不满意',
                    value: 0
                }
            ],

            image2: '',//图片地址

            completeValue: null,//确认维修是否完成
            completeList: [
                {
                    text: '已完成',
                    value: 1
                },
                {
                    text: '未完成',
                    value: 2
                }
            ],
            istask: null,//是否是巡检维修过来的

        }
    },
    onLoad(options) {
        this.id = options.id
        if (options.istask == true) {
            this.istask = options.istask
        }
    },
    onShow() {
        this.userInfo = uni.getStorageSync('loginInfo')
    },
    methods: {

        submitBreakdown() {
            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: this.userInfo.user_name,		//签名人
                // signatureTime: this.$u.timeFrom(timeNow, 'yyyy-mm-dd hh:MM:ss'),		//签名时间
            }
            this.BetLoading.show()
            if (this.completeValue == 1) {//已完成
                for (let i = 0; i < this.questionList.length; i++) {
                    if (this.questionList[i].type == null) {
                        return false
                    }
                }
                this.uploadFile(this.image2)

            } else {//未完成 evaluateRepairReject
                if (this.istask == true) {
                    this.$u.api.repairRefuseFinish(query_).then(res => {
                        if (res.code == 200) {
                            this.BetLoading.hide()
                            uni.showToast({ title: "提交成功", icon: "none" });

                            // 评价成功  返回上一级
                            uni.navigateBack({
                                delta: 1 // 默认值是1，表示返回的页面层数
                            })
                        }
                    })
                } else {
                    this.$u.api.evaluateRepairReject(query_).then(res => {
                        if (res.code == 200) {
                            this.BetLoading.hide()
                            uni.showToast({ title: "提交成功", icon: "none" });

                            // 评价成功  返回上一级
                            uni.navigateBack({
                                delta: 1 // 默认值是1，表示返回的页面层数
                            })
                        }
                    })
                }

            }

        },

        toPop1() {
            this.$refs.signature1.toPop()
        },

        // 上传图片
        uploadFile(filePath) {
            const token = uni.getStorageSync("token")
            uni.uploadFile({
                url: website.baseUrl + "/blade-resource/oss/endpoint/put-file", // 服务器上传接口
                filePath: filePath,
                name: "file", // 必须填写，后台用来接收文件
                header: {
                    'Blade-Auth': 'bearer ' + token,
                    'Authorization': `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`,
                    'blade-requested-with': 'BladeHttpRequest' //自定义请求头
                },
                formData: {},
                success: (res) => {
                    let info = JSON.parse(res.data);
                    console.log("上传成功", info); // 上传成功后的操作


                    //
                    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: info.data.link,		//签名图片
                        signaturePerson: this.userInfo.user_name,		//签名人
                        signatureTime: dateFormat("yyyy-MM-dd hh:mm:ss", new Date()),		//签名时间
                    }
                    if (this.istask == true) {
                        this.$u.api.repairConfirmFinish(query_).then(res => {
                            if (res.code == 200) {
                                this.BetLoading.hide()
                                uni.showToast({ title: "评价成功", icon: "none" });
                                // 评价成功  返回上一级
                                uni.navigateBack({
                                    delta: 1 // 默认值是1，表示返回的页面层数
                                })
                            }
                        })
                    } else {
                        this.$u.api.evaluateSign(query_).then(res => {
                            if (res.code == 200) {
                                this.BetLoading.hide()
                                uni.showToast({ title: "评价成功", icon: "none" });
                                // 评价成功  返回上一级
                                uni.navigateBack({
                                    delta: 1 // 默认值是1，表示返回的页面层数
                                })
                            }
                        })
                    }

                },
                error: (uploadFileRes) => {
                    console.log("上传失败", uploadFileRes.data); // 上传成功后的操作
                    this.BetLoading.hide()
                },
            });
        }
    }
}
</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>