<template>
    <view>
        <view class="header">
            <!-- <image class="header-bg" src="/static/images/work/bg.png" mode="widthFix" /> -->
            <image src="/static/images/back.png" class="back" @tap="back" :style="' top: ' + statusHeight + 'px;width: 50rpx;height: 50rpx;'" mode="" />
            <view class="navigation" :style="'height: ' + navigationHeight + 'px; top: ' + statusHeight + 'px;'">社区满意度自查</view>
            <view class="content">
                <view class="h2" :style="'font-size: ' + fontSize + ';'">{{ agencyName }}{{ monthName }}月份满意度自查</view>
                <view class="tag">
                    <image src="/static/images/tag.png" mode="" />
                    {{ status == 1 ? '进行中' : '已结束' }}
                </view>
            </view>
        </view>

        <view class="body">
            <view class="top">
                <image src="/static/images/work/messageBg.png" class="bg" mode="" />
                <view class="top_box">
                    <view>
                        <view class="tagB">提交人数</view>
                        <view class="blue">
                            <b>{{ personQty }}</b>
                            人
                        </view>
                    </view>
                    <view>
                        <view class="tagR">目前得分</view>
                        <view class="red">
                            <b>{{ synthesisScore }}</b>
                            分
                        </view>
                    </view>
                </view>
            </view>
            <view class="bto">
                <view class="th">
                    <view class="tr">
                        <view class="td">类型</view>
                        <view class="td">满意</view>
                        <view class="td">基本满意</view>
                        <view class="td">不满意</view>
                    </view>
                </view>
                <view :class="'tr ' + (index % 2 == 0 ? 'tr_bg' : '')" v-for="(item, index) in tableData" :key="index">
                    <view class="td">
                        {{ item.satisfactionCategoryName }}
                    </view>

                    <view class="td">
                        {{ item.veryGoodQty }}
                    </view>

                    <view class="td">
                        {{ item.goodQty }}
                    </view>

                    <view class="td" style="color: #ff502e" :data-item="item" @tap="toDissatisfactionDetails">
                        {{ item.badQty }}
                        <image src="/static/images/work/rightCri.png" mode="" />
                    </view>
                </view>
            </view>
        </view>
        <view class="bto_btn" v-if="shareFlag">
            <button hover-class="btn-hover" class="btn_blue" open-type="share">分享给好友参与测评</button>
            <button @tap="showCodeImg" class="btn_yellow">满意度自查二维码</button>
        </view>
        <view class="mask" v-if="maskStatus">
            <view class="bg-box">
                <image src="/static/images/cancle.png" class="cancle" mode="" @tap="hideCodeImg" />
                <image :src="qrCodeImgUrl" style="width: 100%" mode="" class="qrCodeImg" :show-menu-by-longpress="true" />
                <view class="top20 font32">{{ agencyName }}</view>
                <view class="gray top20">2023年{{ monthName }}月份满意度自查二维码</view>
                <view class="mask_btn" @tap="downImage">下载二维码</view>
            </view>
        </view>
    </view>
</template>

<script>
// subpages/communitySelfInsp/pages/synthesis/synthesis.js
const app = getApp();
import { getSynthesis } from '../../../../utils/api';
export default {
    data() {
        return {
            agencyName: '',

            //组织名称
            tableData: [],

            monthName: '',

            //月份
            personQty: '',

            //提交人数
            synthesisScore: '',

            //综合得分
            inspRecordId: '',

            //自查表Id
            fontSize: '',

            maskStatus: false,
            shareFlag: false,
            status: 0,
            statusHeight: '',
            navigationHeight: '',
            qrCodeImgUrl: '',
            questionnaireUrl: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        // 获取参数
        this.setData({
            statusHeight: app.globalData.deviceInfo.statusHeight,
            navigationHeight: app.globalData.deviceInfo.navigationHeight,
            inspRecordId: decodeURIComponent(options.inspRecordId),
            agencyName: decodeURIComponent(options.agencyName),
            monthName: decodeURIComponent(options.monthName),
            qrCodeImgUrl: decodeURIComponent(options.qrCodeImgUrl),
            questionnaireUrl: decodeURIComponent(options.questionnaireUrl),
            status: decodeURIComponent(options.status)
        });
        console.log(this.status);
        // 获取当前日期
        const currentDate = new Date();
        const currentMonth = currentDate.getMonth() + 1;
        if (currentMonth == options.monthName) {
            this.setData({
                shareFlag: true
            });
        } else {
            this.setData({
                shareFlag: false
            });
        }
        this.getSynthesis();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {
        return {
            title: `${this.agencyName}${this.monthName}月份满意度调查`,
            path: '/pages/webView/webView?url=' + encodeURIComponent(this.questionnaireUrl),
            imageUrl: '/static/images/work/shareBg.png'
        };
    },
    methods: {
        getSynthesis() {
            let parm = {
                period: '',
                inspRecordId: this.inspRecordId
            };
            getSynthesis(parm)
                .then((res) => {
                    this.setData({
                        tableData: res.data.categoryDatas,
                        // monthName:res.data.monthName,
                        synthesisScore: res.data.synthesisScore,
                        personQty: res.data.personQty,
                        agencyName: res.data.agencyName,
                        inspRecordId: res.data.inspRecordId
                    });
                    const textContent = res.data.agencyName; // 替换为你实际的内容
                    if (textContent.length > 5) {
                        // 选择一个合适的长度作为调整字体大小的标准
                        this.setData({
                            fontSize: '38rpx' // 选择一个适当的较小字体大小
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        toDissatisfactionDetails(e) {
            console.log(e);
            let category = e.currentTarget.dataset.item.satisfactionCategory;
            uni.navigateTo({
                url: `/subpages/communitySelfInsp/pages/dissatisfactionDetails/dissatisfactionDetails?inspRecordId=${this.inspRecordId}&category=${category}`
            });
        },

        showCodeImg() {
            this.setData({
                maskStatus: true
            });
        },

        hideCodeImg() {
            this.setData({
                maskStatus: false
            });
        },

        downImage() {
            let imageUrl = this.qrCodeImgUrl; // 替换为您要下载的图片的URL
            // 下载图片
            uni.downloadFile({
                url: imageUrl,
                success: function (res) {
                    console.log(res);
                    let imagePath = res.tempFilePath;

                    // 请求保存到相册的权限
                    uni.getSetting({
                        success(res) {
                            if (!res.authSetting['scope.writePhotosAlbum']) {
                                uni.authorize({
                                    scope: 'scope.writePhotosAlbum',
                                    success() {
                                        saveImage(imagePath);
                                    }
                                });
                            } else {
                                saveImage(imagePath);
                            }
                        }
                    });
                },
                fail: function () {
                    uni.showToast({
                        title: '下载失败',
                        icon: 'none'
                    });
                }
            });
            function saveImage(imagePath) {
                // 保存图片到相册
                uni.saveImageToPhotosAlbum({
                    filePath: imagePath,
                    success: function () {
                        uni.showToast({
                            title: '保存成功',
                            icon: 'success'
                        });
                    },
                    fail: function () {
                        uni.showToast({
                            title: '保存失败',
                            icon: 'none'
                        });
                    }
                });
            }
        },

        back() {
            uni.navigateBack({
                delta: 1
            });
        }
    }
};
</script>
<style>
/* subpages/communitySelfInsp/pages/synthesis/synthesis.wxss */
page {
    width: 100%;
    min-height: 100vh;
    overflow-y: scroll;
    background-color: #f7f7f7;
}
.top20 {
    margin-top: 20rpx;
}
.header {
    width: 100%;
    height: 464rpx;
    background-image: url('/static/images/work/bg.png');
    background-size: 100% 100%;
    overflow: hidden;
}
.blue {
    color: #3a80e7;
}
.red {
    color: #ff502e;
}
.header .header-bg {
    width: 100%;
    height: 444rpx;
    position: absolute;
    height: 100%;
    z-index: -997;
}
.header .navigation {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
    font-size: 32rpx;
    position: relative;
    z-index: 100;
}
.gray {
    color: #999;
    font-size: 28rpx;
}
.font32 {
    font-size: 32rpx;
}
.back {
    width: 30rpx;
    height: 30rpx;
    margin-left: 20rpx;
    position: absolute;
    margin-top: 20rpx;
    border-radius: 0rpx;
    z-index: 101;
}
.header .content {
    margin: 140rpx 0 0 69rpx;
}
.header .content .h2 {
    font-size: 44rpx;
    font-family: PingFang SC;
    font-weight: 800;
    color: #333333;
    margin-bottom: 40rpx;
    width: 330rpx;
}
.header .content .tag {
    width: 170rpx;
    height: 50rpx;
    position: relative;
    line-height: 48rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    padding-left: 35rpx;
}
.header .content .tag image {
    width: 170rpx;
    height: 50rpx;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -888;
}
.body {
    padding: 0 20rpx;
    box-sizing: border-box;
    position: relative;
    top: -30rpx;
    overflow: hidden;
}
.body .top .bg {
    position: absolute;
    top: 0;
    width: 100%;
    height: 200rpx;
    z-index: -996;
}
.body .top .top_box {
    display: flex;
    justify-content: space-around;
}
.body .top .top_box > view {
    width: 50%;
    height: 200rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 20rpx;
    color: #666666;
}
.body .top .top_box > view b {
    font-size: 50rpx;
}
.body .top .top_box > view .tagB,
.body .top .top_box > view .tagR {
    position: relative;
}
.body .top .top_box > view .tagB::after {
    display: inline-block;
    content: '';
    width: 18rpx;
    height: 18rpx;
    background-color: #3a80e7;
    position: absolute;
    left: -30rpx;
    top: 10rpx;
}
.body .top .top_box > view .tagR::after {
    display: inline-block;
    content: '';
    width: 18rpx;
    height: 18rpx;
    background-color: #ff502e;
    position: absolute;
    left: -30rpx;
    top: 10rpx;
}
.body .bto {
    border-radius: 10rpx;
    background-color: #fff;
    padding: 30rpx;
    margin-top: 20rpx;
}
.body .bto .th .tr {
    color: #333333;
}
.body .bto .tr {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 90rpx;
    color: #666666;
}
.body .bto .tr_bg {
    background-color: #f0f5fd;
}
.body .bto .tr .td {
    width: 25%;
    text-align: center;
}
.body .bto .tr .td image {
    width: 24rpx;
    height: 24rpx;
}

.mask {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0 70rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mask .bg-box {
    position: relative;
    width: 100%;
    min-height: 400rpx;
    display: flex;
    background-image: url('https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20231007/e094eeeeb2e6406daa18530b648d973d.png');
    background-size: 100% 100%;
    background-position: center;
    padding: 90rpx 90rpx 60rpx;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.bg-box .cancle {
    position: absolute;
    right: -20rpx;
    top: -20rpx;
    width: 26rpx;
    height: 26rpx;
}
.bg-box .mask_btn {
    padding: 23rpx 60rpx;
    text-align: center;
    color: #fff;
    background: linear-gradient(87deg, #81b5fb 0%, #3e92ff 100%);
    border-radius: 43rpx;
    margin-top: 40rpx;
}
.bg-box .qrCodeImg {
    border-radius: 20rpx;
}
.bto_btn {
    display: flex;
    padding: 0 20rpx 30rpx;
}
.btn_blue,
.btn_yellow {
    border-radius: 40rpx;
    color: #fff;
    width: fit-content;
    padding: 20rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
}
.btn_blue {
    background: linear-gradient(87deg, #81b5fb 0%, #3e92ff 100%);
}
.btn_yellow {
    margin-left: 20rpx !important;
    background: linear-gradient(87deg, #ff793c 0%, #fb9d5b 100%);
}
</style>
