<template>
    <view>
        <view class="sealBox">
            <view style="height: 70rpx"></view>
            <view class="name">签名</view>
            <view v-if="src" class="sealContent">
                <image class="img" mode="aspectFit" :src="src"></image>
            </view>
            <view v-else class="sealContent" @click="go">
                <view class="contentFont">点击输入手写签名</view>
            </view>
            <view class="list" v-if="src">
                <view class="listLeft">
                    <view class="listTitle">签名密码</view>
                </view>
                <view class="listRight">
                    <view class="rightContent nochoose">
                        <view v-if="src" class="uni-input">已设置</view>
                        <view v-else class="uni-input">未设置</view>
                    </view>
                    <image src="@/static/img/right.svg" mode=""></image>
                </view>
            </view>
        </view>
        <view v-if="!src" class="sealAgreement">
            <checkbox :checked="status" @click="checkClick" />
            <view>我已阅读并同意</view>
            <view class="agreement" @click="goAgreement('/pages/user/sealAgreement')">《申请证书协议》</view>
        </view>
        <view class="btn">
            <view v-if="src" @click="next" class="bottombtn">完成</view>
            <view v-if="!src" class="bottombtn nocheck">完成</view>
        </view>
    </view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    data() {
        return {
            status: false,
        };
    },
    mounted() {
        // this.$store.dispatch('setAutograph')
    },
    methods: {
        goAgreement(url) {
            uni.navigateTo({
                url,
            });
        },
        checkClick() {
            this.status = !this.status;
        },
        next() {
            uni.navigateBack();
            // uni.switchTab({
            // 	url: '/pages/index/index'
            // })
        },
        go(url) {
            if (!this.status) {
                uni.showToast({
                    title: '请先阅读并同意《申请证书协议》',
                    icon: 'none',
                });
                return;
            }
            uni.navigateTo({
                url: `/pageMy/setUserBase/seal/sealCanvas?path=/pageMy/setUserBase/seal/sealCanvas`,
            });
        },
        getInpCode: function (e) {
            console.log(e);
        },
    },
    computed: {
        ...mapGetters(['autograph']),
        src() {
            if (this.autograph.data && this.autograph.data.signSrcUrl) {
                return this.autograph.data.signSrcUrl;
            }
        },
    },
};
</script>
<style lang="scss">
.sealAgreement {
    display: flex;
    align-items: center;
    margin: 30rpx;
    font-size: 32rpx;
    .agreement {
        color: #007aff;
    }
    ::v-deep .uni-checkbox-input {
        border-radius: 22px !important;
    }
}
.nocheck {
    opacity: 0.3;
}
.bottombtn {
    background-color: #1b66ff;
    color: #fff;
    text-align: center;
    border-radius: 10rpx;
    font-family: PingFangSC-Medium;
    font-size: 32rpx;
    height: 90rpx;
    line-height: 90rpx;
}

.btn {
    background-color: #fefefe;
    padding: 70rpx 80rpx;
}
.sealBox {
    background-color: #ffffff;
    padding: 0 15px 0 15px;
    .name {
        font-size: 32rpx;
        font-weight: 400;
        color: #333333;
        line-height: 45rpx;
    }
    .listRight {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: PingFangSC-Regular;
        font-size: 28rpx;
        color: #999999;
    }

    .listRight image {
        width: 40rpx;
        height: 40rpx;
        margin-left: 15rpx;
    }
    .list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: PingFangSC-Regular;
        font-size: 32rpx;
        color: #333333;
        height: 88rpx;
    }
    .sealContent {
        background: #f6f6f6;
        padding: 16rpx;
        margin-top: 14rpx;
        position: relative;
        .img {
            width: 100%;
            height: 312rpx;
            background-color: #ffffff;
        }
        .contentFont {
            height: 312rpx;
            line-height: 312rpx;
            font-size: 30rpx;
            color: #999999;
            background: #ffffff;
            text-align: center;
        }
    }
}
</style>
