<template>
    <div class="content-zone sch-full">
        <div class="content">
            <div class="scroll">
                <div class="form-box">
                    <div class="form-box-title">
                        <p>기본정보</p>
                        <p><span>*</span>필수입력</p>
                    </div>
                    <div class="form-content">
                            <div class="layout">
                                <label for="" class="form-title"><span>*</span> 제어 유형</label>
                                <select name="selectType" id="selectType" class="form-select sm"
                                    v-model="accesCtrl.cntrlType">
                                    <option value="">전체</option>
                                    <option v-for="(item, idx) in codeList" :key="idx" :value="item.cd">{{ item.cdNm }}
                                    </option>
                                </select>
                            </div>
                            <div class="layout border-bottom">
                                <label for="" class="form-title"><span>*</span> 제어 IP</label>
                                <div class="form-group">
                                    <input type="text" class="form-control sm" v-model="accesCtrl.cntrlIp"  placeholder="1~255 범위의 숫자로 구성하여 형식에 맞게 작성해주세요." />
                                    <span>ex) 192.168.0.1 / 192.168.0.*</span>
                                </div>
                            </div>
                            <div class="layout">
                                <label for="" class="form-title"><span>*</span> 제어 경로</label>
                                <input type="text"  class="form-control sm"  v-model="accesCtrl.cntrlCrs" placeholder="제어할 경로 URL을 입력하세요."/>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="btn-wrap">
        <button class="btn sm main" @click="fnInsert">{{ accesCtrl.acsCntrlId == 0 ? '등록' :
            '수정'}}</button>
        <button class="btn sm tertiary" @click="fnCancel">취소</button>
    </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>