<template>
    <view class="box">
        <view class="meauList">
            <view class="menu-item">
                <view class="meanLeft">
                    <text>设备名称</text>
                </view>
                <view class="meanRight">
                    <text>{{ shareDetail.devName }}</text></view
                >
            </view>
            <view class="menu-item">
                <view class="meanLeft">
                    <text>设备序列号</text>
                </view>
                <view class="meanRight">
                    <text>{{ shareDetail.clientId }}</text></view
                >
            </view>
            <view class="menu-item">
                <view class="meanLeft">
                    <text>分享人手机号</text>
                </view>
                <view class="meanRight">
                    <text>{{ shareDetail.sharerPhone }}</text></view
                >
            </view>
            <!-- <view class="menu-item">
                <view class="meanLeft">
                    <text>被分享人手机号</text>
                </view>
                <view class="meanRight">
                    <text>{{ shareDetail.sharedPhone }}</text></view
                >
            </view> -->
            <view class="menu-item">
                <view class="meanLeft">
                    <text>分享时间</text>
                </view>
                <view class="meanRight">
                    <text>{{ shareDetail.shareTime }}</text></view
                >
            </view>
            <view class="menu-item">
                <view class="meanLeft">
                    <text>分享状态</text>
                </view>
                <view class="meanRight">
                    <text v-show="shareDetail.state == 0"> 待确认 </text>
                    <text v-show="shareDetail.state == 1"> 已确认 </text>
                    <text v-show="shareDetail.state == 2"> 已拒绝 </text>
                </view>
            </view>
            <view class="menu-item">
                <label class="simple-radio" @click="smChange()">
                    <radio
                        :value="messageFlag"
                        color="#7c5345"
                        :checked="messageFlag == true"
                        class="hide-original"
                    />
                    <text>短信权限</text>
                </label>
            </view>
            <view class="menu-item">
                <label class="simple-radio" @click="snChange()">
                    <radio
                        :value="serviceNumberFlag"
                        color="#7c5345"
                        :checked="serviceNumberFlag == true"
                        class="hide-original"
                    />
                    <text>服务号通知</text>
                </label>
            </view>
            <view class="menu-item">
                <label class="simple-radio" @click="vfChange()">
                    <radio
                        :value="voipFlag"
                        color="#7c5345"
                        :checked="voipFlag == true"
                        class="hide-original"
                    />
                    <text>语音通话</text>
                </label>
            </view>
        </view>

        <view class="boxButton">
            <view class="handle-btn">
                <view class="closeBreath" @click="cancleShare()">撤销分享</view>
                <view class="btn2" @click="changeAuthor()"> 修改权限 </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            shareDetail: "",
            shareList: [],
            messageFlag: false,
            serviceNumberFlag: false,
            voipFlag: false,
        };
    },
    methods: {
        goShareDetail(item) {
            uni.navigateTo({
                url:
                    "/pagesA/shareDetail/shareDetail?shareDetail=" +
                    JSON.stringify(item),
            });
        },
        cancleShare() {
            uni.showModal({
                title: "提示",
                content: "确定要撤销该条分享？",
                success: (res) => {
                    if (res.confirm) {
                        this.$http
                            .post(
                                "wap/share/cancelShare",
                                {
                                    shareId: this.shareDetail.shareId,
                                },
                                {
                                    header: {
                                        "Content-Type":
                                            "application/x-www-form-urlencoded",
                                    },
                                }
                            )
                            .then((res) => {
                                if (res.data.code == 200) {
                                    uni.showToast({
                                        title: "撤销成功",
                                        icon: "success",
                                        duration: 1500,
                                    });
                                    setTimeout(() => {
                                        uni.navigateBack({
                                            delta: 1,
                                        });
                                    }, 1000);
                                } else {
                                    uni.showToast({
                                        title: "撤销失败",
                                        icon: "none",
                                        duration: 1500,
                                    });
                                }
                            });
                    }
                },
            });
        },
        getShareDetail() {
            this.$http
                .post(
                    "wap/share/queryDetails",
                    {
                        shareId: this.shareDetail.shareId,
                    },
                    {
                        header: {
                            "Content-Type": "application/x-www-form-urlencoded",
                        },
                    }
                )
                .then((res) => {
                    this.messageFlag =
                        res.data.data.messageFlag == 0 ? true : false;
                    this.serviceNumberFlag =
                        res.data.data.serviceNumberFlag == 0 ? true : false;
                    this.voipFlag = res.data.data.voipFlag == 0 ? true : false;
                });
        },
        changeAuthor() {
            uni.showModal({
                title: "提示",
                content: "确定修改权限？",
                success: (res) => {
                    if (res.confirm) {
                        this.$http
                            .post(
                                "wap/share/updateDeviceShare",
                                {
                                    shareId: this.shareDetail.shareId,
                                    messageFlag:
                                        this.messageFlag == true ? 0 : 1,
                                    serviceNumberFlag:
                                        this.serviceNumberFlag == true ? 0 : 1,
                                    voipFlag: this.voipFlag == true ? 0 : 1,
                                },
                                {
                                    header: {
                                        "Content-Type": "application/json",
                                    },
                                }
                            )
                            .then((res) => {
                                if (res.data.code == 200) {
                                    uni.showToast({
                                        title: "修改成功",
                                        icon: "success",
                                        duration: 1500,
                                    });
                                    setTimeout(() => {
                                        uni.navigateBack({
                                            delta: 1,
                                        });
                                    }, 1000);
                                } else {
                                    uni.showToast({
                                        title: "修改失败",
                                        icon: "none",
                                        duration: 1500,
                                    });
                                }
                            });
                    }
                },
            });
        },
        smChange() {
            this.messageFlag = !this.messageFlag;
        },
        snChange() {
            this.serviceNumberFlag = !this.serviceNumberFlag;
        },
        vfChange() {
            this.voipFlag = !this.voipFlag;
        },
    },
    onLoad(options) {
        this.shareDetail = JSON.parse(options.shareDetail);
    },
    onShow() {
        this.getShareDetail();
    },
};
</script>

<style lang="less" scoped>
// Main Styles
.box {
    padding: 10rpx 18rpx;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
    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;
                }
            }

            .meanLeft {
                background: #7b5245;
                color: white;
                margin-right: 16rpx;
            }

            .meanRight {
                background: fade(#ff4d4f, 10%);
                color: #ff4d4f;
                border: 1rpx solid fade(#ff4d4f, 30%);
            }
        }
    }
    .menu-bottom {
        display: flex;
        border-top: 1rpx solid #f0f0f0;
        margin-top: 30rpx;
        .meanLeft {
            width: 700rpx;
            height: 80rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30rpx;
            border-radius: 35rpx;
            font-weight: 500;
        }

        .meanLeft {
            background: #7b5245;
            color: white;
            margin-right: 16rpx;
        }
    }

    .boxButton {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        height: 168rpx;
        padding: 0 37rpx;
        background: #ffffff;
        box-sizing: border-box;

        .handle-btn {
            margin-top: 40rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .btn1 {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 155rpx;
                height: 94rpx;
                background: #ffebe4;
                border-radius: 28rpx;
                font-weight: 500;
                color: #111111;
                font-size: 32rpx;
                text-align: center;
            }

            .btn2 {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 328rpx;
                height: 94rpx;
                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;
            }
            .closeBreath {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 328rpx;
                height: 94rpx;
                background: #ffebe4;
                border-radius: 28rpx;
                font-weight: 500;
                color: #111111;
                font-size: 32rpx;
                text-align: center;
            }
        }
    }
}
</style>
