<template>
    <div>
        <form id="tranMgr" name="tranMgr" method="post">
            <label>PayMethod</label><br />
            <input type="text" name="PayMethod" v-model="formData.PayMethod" placeholder="결제 수단" /><br />

            <label>PayType</label><br />
            <input type="text" name="PayType" v-model="formData.PayType" placeholder="결제 타입" /><br />

            <label>GoodsCnt</label><br />
            <input type="text" name="GoodsCnt" v-model="formData.GoodsCnt" placeholder="상품 개수" /><br />

            <label>GoodsName</label><br />
            <input type="text" name="GoodsName" v-model="formData.GoodsName" placeholder="상품명" /><br />

            <label>Amt</label><br />
            <input type="text" name="Amt" v-model="formData.Amt" placeholder="금액" /><br />

            <label>Moid</label><br />
            <input type="text" name="Moid" v-model="formData.Moid" placeholder="Moid" /><br />

            <label>Mid</label><br />
            <input type="text" name="Mid" v-model="formData.Mid" placeholder="Mid" /><br />

            <label>PopCheck</label><br />
            <input type="text" name="PopCheck" v-model="formData.PopCheck" placeholder="Y or N" /><br />

            <label>ReturnUrl</label><br />
            <input type="text" name="ReturnUrl" v-model="formData.ReturnUrl" placeholder="리턴 URL" /><br />

            <label>MallUserId</label><br />
            <input type="text" name="MallUserId" v-model="formData.MallUserId" placeholder="MallUserId" /><br />

            <label>SspMallId</label><br />
            <input type="text" name="SspMallId" v-model="formData.SspMallId" placeholder="SspMallId" /><br />

            <label>BuyerName</label><br />
            <input type="text" name="BuyerName" v-model="formData.BuyerName" placeholder="구매자명" /><br />

            <label>BuyerTel</label><br />
            <input type="text" name="BuyerTel" v-model="formData.BuyerTel" placeholder="구매자 전화번호" /><br />

            <label>BuyerEmail</label><br />
            <input type="text" name="BuyerEmail" v-model="formData.BuyerEmail" placeholder="구매자 이메일" /><br />

            <label>MallIp</label><br />
            <input type="text" name="MallIp" v-model="formData.MallIp" placeholder="Mall IP" /><br />

            <label>UserIp</label><br />
            <input type="text" name="UserIp" v-model="formData.UserIp" placeholder="User IP" /><br />

            <label>EncryptData</label><br />
            <input type="text" name="EncryptData" v-model="formData.EncryptData" placeholder="EncryptData" /><br />

            <label>TransType</label><br />
            <input type="text" name="TransType" v-model="formData.TransType" placeholder="TransType" /><br />

            <label>EncodingType</label><br />
            <input type="text" name="EncodingType" v-model="formData.EncodingType" placeholder="utf-8 or euc-kr" /><br />

            <label>EdiDate</label><br />
            <input type="text" name="EdiDate" v-model="formData.EdiDate" placeholder="EdiDate" /><br />

            <button type="button" @click="goPay">결제하기</button>
        </form>

        <!-- PC 연동의 경우에만 아래 승인폼이 필요합니다. (Mobile은 제외) -->
        <form id="approvalForm" name="approvalForm" method="post">
            <input type="hidden" id="Tid" name="Tid" />
            <input type="hidden" id="TrAuthKey" name="TrAuthKey" />
        </form>
    </div>
</template>

<script>
    import { ref, onMounted, onBeforeUnmount } from "vue";
    import CryptoJS from "crypto-js";

    const merchantKey = "";

    function encodeSHA256Base64(str) {
        const hash = CryptoJS.SHA256(str);
        return CryptoJS.enc.Base64.stringify(hash);
    }

    export default {
        setup() {
            const date = new Date();
            const getyyyyMMddHHmmss = "$❴date.getFullYear()❵$❴String(date.getMonth() + 1).padStart(2, '0')❵$❴String(date.getDate()).padStart(2, '0')❵$❴String(date.getHours()).padStart(2, '0')❵$❴String(date.getMinutes()).padStart(2, '0')❵$❴String(date.getSeconds()).padStart(2, '0')❵";

            const formData = ref({
                PayMethod: "TOSS",
                PayType: "CARD",
                GoodsCnt: "1",
                GoodsName: "거래 상품명",
                Amt: "1000", // example amount
                Moid: "Moid_20230724154643",
                Mid: "설정한 Mid",
                PopCheck: "N",
                ReturnUrl: "가맹점 ReturnUrl",
                MallUserId: "MallUserId",
                SspMallId: "",
                BuyerName: "구매자명",
                BuyerTel: "01099991111",
                BuyerEmail: "noname@smartro.co.kr",
                MallIp: "10.0.0.1",
                UserIp: "10.0.0.1",
                EncryptData: encodeSHA256Base64(ediDate + "설정한 Mid" + "1000" + merchantKey),
                TransType: "0",
                EncodingType: "utf-8",
                EdiDate: ediDate,
            });

            const goPay = () => {
                window.smartropay.init({
                    mode: "STG", // Test 환경, 운영 적용 시 'REAL' 변경 필요
                });

                window.smartropay.payment({
                    FormId: "tranMgr",
                    Callback: function (res) {
                        const approvalForm = document.approvalForm;
                        approvalForm.Tid.value = res.Tid;
                        approvalForm.TrAuthKey.value = res.TrAuthKey;
                        approvalForm.action = formData.value.ReturnUrl;
                        approvalForm.submit();
                    },
                });
            };

            onMounted(() => {
                const today = new Date().toISOString().slice(0, 10).replace(/-/g, "");
                const script = document.createElement("script");
                script.src = `https://tpay.smartropay.co.kr/asset/js/SmartroPAY-1.0.min.js?version=$❴today❵`; // 테스트
                // script.src = `https://tpay.smartropay.co.kr/asset/js/SmartroPAY-1.0.min.js?version=$❴today❵`; //운영
                script.type = "text/javascript";
                document.head.appendChild(script);

                onBeforeUnmount(() => {
                    document.head.removeChild(script);
                });
            });

            return {
                formData,
                goPay,
            };
        },
    };
</script>

<style>

</style>