<template>
    <!-- 密钥管理 -->
    <div class="terminalListBox flex-col">
        <s-header name="密钥管理" :noback="false"></s-header>
        <div class="outer flex-col justify-center ">
            <div class="l-flex-RC">
                <div class="outer1 flex-col"></div>
                <div class="TextGroup flex-col">
                    <span class="txt">参数信息</span>
                </div>
            </div>
        </div>
        <van-cell-group inset>
            <van-field v-model="merichantInfo.id" label="sys_id"
                :placeholder="merichantInfo.id == null ? '未生成' : merichantInfo.id" :readonly=true >
                <template v-if="merichantInfo.id != null" #button>
                    <van-button size="small" type="primary" style="padding: 5px;" @click="copyText(merichantInfo.id)">复制</van-button>
                </template>
            </van-field>
        </van-cell-group>
        <div class="outer flex-col justify-center ">
            <div class="l-flex-RC">
                <div class="outer1 flex-col"></div>
                <div class="TextGroup flex-col">
                    <span class="txt">密钥信息</span>
                </div>
            </div>
        </div>
        <van-cell-group inset>
            <van-field v-model="merichantInfo.publicKey" rows="5" label="商户公钥" type="textarea" :autosize="{ maxHeight: 150 }"
                :placeholder="merichantInfo.publicKey == null ? '未生成' : merichantInfo.publicKey" :readonly=true>
                <template v-if="merichantInfo.publicKey != null" #button>
                    <van-button size="small" type="primary" style="padding: 5px;" @click="copyText(merichantInfo.publicKey)">复制</van-button>
                </template></van-field>
            <van-field v-model="merichantInfo.privateKey" rows="5" label="商户私钥" type="textarea" :autosize="{ maxHeight: 150 }"
                :placeholder="merichantInfo.privateKey == null ? '未生成' : merichantInfo.privateKey" :readonly=true>
                <template v-if="merichantInfo.privateKey != null" #button>
                    <van-button size="small" type="primary" style="padding: 5px;" @click="copyText(merichantInfo.privateKey)">复制</van-button>
                </template>
            </van-field>
            <br>
        </van-cell-group>
        <div style="margin: 10px 100px;" v-if="merichantInfo.id == null">
            <van-button round block type="primary" native-type="submit" @click="generateMerchantSecretkey">
                生成
            </van-button>
        </div>
    </div>
</template>
<script>
import { ref } from "vue";
import sHeader from "../../../components/SimpleHeader.vue";
import { getSecretKey, generateSecretKey } from "../../../service/terminal";
import { getLoginUser } from "@/common/js/utils";
import { onMounted } from "vue";
import { useRouter } from "vue-router";
import { showSuccessToast } from "vant";


export default {
    components: { sHeader },
    setup() {
        const user = getLoginUser();
        const router = useRouter();
        const merichantInfo = ref({});
        // 获取密钥
        const getMerchantSecretkey = async () => {
            const { data } = await getSecretKey({
                adminId: user.id,
            });
            if (data.code === "00000") {
                if (data.data !== null) {
                    merichantInfo.value = data.data;
                }
            }
        };
        // 生成密钥
        const generateMerchantSecretkey = async () => {
            const { data } = await generateSecretKey({
                adminId: user.id,
            });
            if (data.code === "00000") {
                showSuccessToast("生成成功");
                setTimeout(() => {
                    router.go(0);
                }, 1000);
            }
        };
        // 复制密钥
        const copyText = (text) => {
            navigator.clipboard.writeText(text);
            showSuccessToast("复制成功");
        };

        onMounted(async () => {
            getMerchantSecretkey();
        });

        return {
            merichantInfo,
            copyText,
            generateMerchantSecretkey
        };
    },
};
</script>
<style lang="less" scoped>
@import "../../../common/style/common.less";

.outer {
    background: rgba(255, 255, 255, 1) url("../../../assets/home/line.png") bottom center no-repeat;
    background-size: 100% auto;
    padding: 20px 20px;

    .outer1 {
        position: relative;
        width: 15px;
        height: 15px;
        margin-right: 5px;
        background: url("../../../assets/home/machineSales.png") center no-repeat;
        background-size: 100%;
    }

    .TextGroup {

        .txt {
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 0.4rem;
            font-family: PingFangSC-Semibold;
            text-align: left;
            white-space: nowrap;
            line-height: 0.4rem;
            display: block;
        }

    }
}
</style>