<template>
    <view class="content">
        <view class="meauList">
            <view class="menu-item">
                <view class="meanLeft">
                    <text>分享人号码</text>
                </view>
                <view class="meanRight">
                    <text>{{ phone }}</text></view
                >
            </view>
            <view class="menu-item">
                <view class="meanLeft">
                    <text>设备名称</text>
                </view>
                <view class="meanRight">
                    <text>{{ devInfo.devName }}</text></view
                >
            </view>
            <view class="menu-item">
                <view class="meanLeft">
                    <text>设备序列号</text>
                </view>
                <view class="meanRight">
                    <text>{{ devInfo.clientId }}</text></view
                >
            </view>
            <view class="menu-item">
                <view class="meanLeft">
                    <text>设备Id</text>
                </view>
                <view class="meanRight">
                    <text>{{ devInfo.devId }}</text></view
                >
            </view>
            <view class="funChoice">
                <view class="funItem" @click="smChange()">
                    <label class="simple-radio"
                        ><radio
                            :disabled="generateFlag == true"
                            :value="messageFlag"
                            color="#7c5345"
                            :checked="messageFlag == true"
                            class="hide-original"
                        />
                        <text>短信权限</text></label
                    >
                </view>
                <view class="funItem">
                    <label class="simple-radio" @click="snChange()"
                        ><radio
                            :disabled="generateFlag == true"
                            :value="serviceNumberFlag"
                            color="#7c5345"
                            :checked="serviceNumberFlag == true"
                            class="hide-original"
                        />
                        <text>服务号通知</text></label
                    >
                </view>
                <view class="funItem">
                    <label class="simple-radio" @click="vfChange()"
                        ><radio
                            :disabled="generateFlag == true"
                            :value="voipFlag"
                            color="#7c5345"
                            :checked="voipFlag == true"
                            class="hide-original"
                        />
                        <text>语音通话</text></label
                    ></view
                >
            </view>
        </view>
        <button class="btn1" @click="shareUserLink()" v-if="!generateFlag">
            生成分享链接
        </button>
        <button class="btn1" open-type="share" v-else>确认分享</button>
    </view>
</template>
<script>
export default {
    data() {
        return {
            devInfo: "",
            phone: uni.getStorageSync("phone"),
            messageFlag: false,
            serviceNumberFlag: false,
            voipFlag: false,
            shareFlag: false,
            shareId: "",
            generateFlag: false,
        };
    },
    methods: {
        // 切换短信分享
        smChange() {
            this.messageFlag = !this.messageFlag;
        },

        // 切换服务号分享
        snChange() {
            this.serviceNumberFlag = !this.serviceNumberFlag;
        },

        // 切换语音分享
        vfChange() {
            this.voipFlag = !this.voipFlag;
        },
        onShareAppMessage() {
            return {
                title: "好友向您分享了一台设备",
                path:
                    "/pagesA/sharePages/sharePages?phone=" +
                    uni.getStorageSync("phone") +
                    "&devInfo=" +
                    JSON.stringify(this.devInfo) +
                    "&shareId=" +
                    this.shareId,
            };
        },

        // 调用后端接口生成分享链接
        shareUserLink() {
            return new Promise((resolve, reject) => {
                const shareParam = {
                    devId: this.devInfo.devId,
                    sharerUserId: uni.getStorageSync("userId"),
                    sharerPhone: uni.getStorageSync("phone"),
                    sharedUserId: "",
                    sharedPhone: "",
                    messageFlag: this.messageFlag ? 0 : 1,
                    serviceNumberFlag: this.serviceNumberFlag ? 0 : 1,
                    voipFlag: this.voipFlag ? 0 : 1,
                };

                this.$http
                    .post("wap/share/shareByUrl", shareParam, {
                        header: {
                            "Content-Type": "application/json;charset=UTF-8",
                        },
                    })
                    .then((res) => {
                        const { code, data, message } = res.data;
                        if (code == 200 && data.shareId) {
                            this.shareId = data.shareId;
                            this.generateFlag = true;
                        } else {
                            uni.showToast({
                                title: message || "生成分享链接失败",
                                icon: "none",
                            });
                            this.generateFlag = false;
                        }
                    })
                    .catch((err) => {
                        uni.showToast({
                            title: "网络异常，请稍后再试",
                            icon: "none",
                        });
                        reject();
                    });
            });
        },
        unShare() {
            uni.showToast({
                title: "当前用户暂不可分享",
                icon: "none",
            });
        },
    },
    onLoad(options) {
        this.devInfo = JSON.parse(options.devInfo);
        // setTimeout(() => {
        //     this.shareUserLink();
        // }, 500);
    },
};
</script>
<style lang="less" scoped>
.content {
    height: 100vh;
    background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
    box-sizing: border-box;
    padding-top: 20rpx;
    box-sizing: border-box;
    .meauList {
        width: 710rpx;
        margin: 18rpx auto;
        background: #fff;
        border-radius: 16rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
        overflow: hidden;
        transition: all 0.3s ease;

        .menu-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 0 32rpx;
            padding: 32rpx 0;
            border-bottom: 1rpx solid #f0f0f0;

            &:last-of-type {
                border-bottom: none;
            }

            .meanLeft {
                flex: 1;
                color: #666;
                font-size: 28rpx;
                font-weight: 400;
            }

            .meanRight {
                flex: 1;
                text-align: right;
                color: #333;
                font-size: 28rpx;
                font-weight: 500;
                padding-left: 20rpx;
            }
        }

        .menu-bottom {
            display: flex;
            padding: 24rpx 32rpx;
            border-top: 1rpx solid #f0f0f0;

            .meanLeft,
            .meanRight {
                flex: 1;
                height: 80rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 8rpx;
                font-size: 30rpx;
                font-weight: 500;
                transition: all 0.2s;

                &:active {
                    opacity: 0.8;
                }
            }
        }
    }
    .funChoice {
        padding-left: 30rpx;
        padding-top: 20rpx;
        .funItem {
            .simple-radio {
                display: flex;
                align-items: center;
                padding: 20rpx 0;
            }
        }
    }
    .btn1 {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 710rpx;
        height: 94rpx;
        margin-top: 60rpx;
        background: linear-gradient(105.95deg, #a27867 0%, #74483d 100%);
        border-radius: 28rpx;
        box-shadow: 0rpx 4.69rpx 18.75rpx rgba(72, 41, 29, 0.15),
            0rpx 9.38rpx 9.38rpx rgba(154, 132, 89, 0.2),
            0rpx -4.69rpx 28.13rpx 4.69rpx #a16647 inset;
        font-family: MiSans;
        font-weight: 500;
        color: #ffffff;
        font-size: 32rpx;
    }
}
</style>
