<template>
    <div class="content admin-style">
        <div class="admin-page-title  point-font2 mb30">
            <p>IP접근제어</p>
        </div>
        <details open class="form-table-style mb30">
            <summary class="point-font2">
                <p class="summary-style pl10">기본정보</p>
            </summary>
            <div class="pt10 pb10">
                <table class="form-table">
                    <colgroup>
                        <col width="50%" />
                        <col width="50%" />
                    </colgroup>
                    <tr>
                        <td>
                            <div class="gd-12 pl0">
                                <label for="" class="form-title point-font2 mb10">제어 유형</label>
                                <select name="selectType" id="selectType" class="half-select block"
                                    v-model="accesCtrl.cntrlType">
                                    <option value="">전체</option>
                                    <option v-for="(item, idx) in codeList" :key="idx" :value="item.cd">{{ item.cdNm }}
                                    </option>
                                </select>
                            </div>

                        </td>
                        <td>
                            <div class="gd-12 pr0">
                                <label for="" class="form-title point-font2 mb10">제어 IP</label>
                                <input type="text" class="full-input" v-model="accesCtrl.cntrlIp" />
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div class="gd-12 pl0">
                                <label for="" class="form-title point-font2 ">제어 경로</label>
                                <input type="text" class="full-input" v-model="accesCtrl.cntrlCrs" />
                            </div>

                        </td>
                    </tr>
                </table>
            </div>
        </details>
        <div class="flex justify-end align-center no-gutters">
            <div class="gd-1 mr10">
                <button class="large-btn blue-btn" @click="fnInsert">{{ accesCtrl.acsCntrlId == 0 ? '등록' :
                    '수정'}}</button>
            </div>
            <div class="gd-1">
                <button class="large-btn gray-btn" @click="fnCancel">취소</button>
            </div>
        </div>
    </div>
</template>

<script>
import { findByAcces, save, update } from '../../../../../resources/api/accesCtrl'

export default {
    components: {

    },
    data() {
        return {
            codeList: [], // 유형
            accesCtrl: {} // 접근제어 객체
        }
    },
    created() {
        this.fnSelectOne();
    },
    methods: {
        // 목록으로 이동
        fnCancel() {
            if (!confirm('등록을 취소하시겠습니까?')) {
                return;
            }
            if (this.accesCtrl.acsCntrlId == null || this.accesCtrl.acsCntrlId == 0) {
                this.$router.push({
                    name: 'admNetworkAccessControlSelectList', 
                });
            } else {
                this.$router.push({
                    name: 'admNetworkAccessControlSelectListOne',
                    query: {
                        pageId: this.accesCtrl.acsCntrlId
                    },
                });
            }
        },
        // 조회
        async fnSelectOne() {
            try {
                const params = {
                    'acsCntrlId': this.$route.query.pageId
                }
                const res = await findByAcces(params);
                this.accesCtrl = res.data.data.accesCtrl; // 접근제어 객체
                if (this.accesCtrl.acsCntrlId == 0) {
                    this.accesCtrl.cntrlType = ''; // 공백으로 초기화
                }
                this.codeList = res.data.data.codeList; // 유형
            } catch (error) {
                alert('에러가 발생했습니다.\n시스템관리자에게 문의하세요.');
            }
        },

        fnInsert() {
            if (this.accesCtrl.acsCntrlId == null || this.accesCtrl.acsCntrlId == 0) {
                this.fnSave();
            } else {
                this.fnUpdate();
            }
        },
        // 등록
        async fnSave() {
            if (!this.Validation()) {
                return;
            }
            try {
                const res = await save(this.accesCtrl);
                alert(res.data.message);
                const acsCntrlId = res.data.data.acsCntrlId;
                if (res.status == 200) {
                    this.$router.push({
                        name: 'admNetworkAccessControlSelectListOne',
                        query: {
                            pageId: acsCntrlId
                        },
                    });
                }
            } catch (error) {
                alert('에러가 발생했습니다.\n시스템관리자에게 문의하세요.');
            }
        },
        // 수정
        async fnUpdate() {
            if (!this.Validation()) {
                return;
            }
            try {
                const res = await update(this.accesCtrl);
                alert(res.data.message);
                if (res.status == 200) {
                    this.$router.push({
                        name: 'admNetworkAccessControlSelectListOne',
                        query: {
                            pageId: this.accesCtrl.acsCntrlId
                        },
                    });
                }
            } catch (error) {
                alert('에러가 발생했습니다.\n시스템관리자에게 문의하세요.');
            }
        },
        // 유효성 검사
        Validation() {
            // const ipFilter = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
            const ipFilter = /^(\*|[1-9]?[0-9]|1\d\d|2[0-4]\d|25[0-5])(\.(\*|[1-9]?[0-9]|1\d\d|2[0-4]\d|25[0-5])){3}$/;
            if (this.accesCtrl.cntrlType == null || this.accesCtrl.cntrlType == '') {
                alert('제어 유형을 지정해주세요.');
                return false;
            }
            if (this.accesCtrl.cntrlIp == null || this.accesCtrl.cntrlIp == '') {
                alert('제어 IP를 입력해주세요.');
                return false;
            } else if (!ipFilter.test(this.accesCtrl.cntrlIp)) {
                alert('ip 형식이 다릅니다.');
                return false;
            }
            if (this.accesCtrl.cntrlCrs == null || this.accesCtrl.cntrlCrs == '') {
                alert('제어 경로를 입력해주세요.');
                return false;
            }
            return true;
        }
    },
    watch: {

    },
    computed: {

    },
    mounted() {

    }
}
</script>
