<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>PointType</label> <br />
            <input type="text" name="PointType" v-model="formData.PointType" placeholder="포인트 유형" /> <br />

            <label>PointGroup</label> <br />
            <input type="text" name="PointGroup" v-model="formData.PointGroup" placeholder="포인트 그룹" /> <br />

            <label>PointTypeValue</label> <br />
            <input type="text" name="PointTypeValue" v-model="formData.PointTypeValue" maxlength="3" placeholder="포인트 유형 값" /> <br />

            <label>ProductCode</label> <br />
            <input type="text" name="ProductCode" v-model="formData.ProductCode" placeholder="상품 코드" /> <br />

            <label>Notice</label> <br />
            <input type="text" name="Notice" v-model="formData.Notice" placeholder="공지사항" /> <br />

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

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

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

            <label>UsePoint</label> <br />
            <input type="text" name="UsePoint" v-model="formData.UsePoint" maxlength="12" placeholder="사용 포인트" /> <br />

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

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

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

            <label>MallUserId</label> <br />
            <input type="text" name="MallUserId" v-model="formData.MallUserId" maxlength="20" placeholder="몰 사용자 ID" /> <br />

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

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

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

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

            <label>UserIp</label> <br />
            <input type="text" name="UserIp" v-model="formData.UserIp" maxlength="20" placeholder="사용자 IP" /> <br />

            <label>EncryptData</label> <br />
            <input type="text" name="EncryptData" v-model="formData.EncryptData" maxlength="100" placeholder="위/변조 방지 데이터" /> <br />

            <label>TransType</label> <br />
            <input type="text" name="TransType" v-model="formData.TransType" maxlength="1" placeholder="거래 유형" /> <br />

            <label>EdiDate</label> <br />
            <input type="text" name="EdiDate" v-model="formData.EdiDate" maxlength="14" 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";

    export default {
        setup() {
            const formData = ref({
                PayMethod: "OTPOINT",
                PointType: "CELLPHONE",
                PointGroup: "OTHER",
                PointTypeValue: "KTF",
                ProductCode: "00000001",
                Notice: "포인트차감",
                GoodsCnt: "1",
                GoodsName: "거래상품명",
                Amt: "1004",
                UsePoint: "300",
                Moid: "Moid_20230724154643",
                Mid: "설정한 Mid",
                ReturnUrl: "가맹점 ReturnUrl",
                MallUserId: "MallUserId",
                BuyerName: "구매자명",
                BuyerTel: "01099991111",
                BuyerEmail: "noname@smartro.co.kr",
                MallIp: "10.0.0.1",
                UserIp: "10.0.0.1",
                EncryptData: "생성된 EncryptData",
                TransType: "0",
                EdiDate: "설정한 EdiDate",
            });

            const goPay = () => {
                window.smartropay.init({
                    mode: "STG", // STG: 테스트, REAL: 운영 (운영서버 전환 시 REAL로 변경)
                    actionUri: "/point/cellphone/reqPay.do",
                });

                window.smartropay.payment({
                    FormId: "tranMgr",
                    Callback: function (res) {
                        var 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://pay.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>