<template>
    <div v-show="isModalOpen" class="modal-wrapper">
        <div class="modal-container">
            <div class="modal-title">
                <div class="flex justify-between align-center">
                    <h2>센서 알람 설정</h2>
                    <button class="close-btn" @click="closeModal"><svg-icon type="mdi" :width="20" :height="20" :path="closePath"></svg-icon></button>
                </div>
            </div>
            <div class="modal-content-monthly">
                <div class="table-zone">
                    <table class="list-table">
                        <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
                        <colgroup>
                            <col style="width: 22.5%;">
                            <col style="width: 22.5%;">
                            <col style="width: 22.5%;">
                            <col style="width: 22.5%;">
                            <col style="width: 10%;">
                        </colgroup>
                        <thead>
                            <tr>
                                <th>컬럼명</th>
                                <th>한글명</th>
                                <th>MIN</th>
                                <th>MAX</th>
                                <th>사용여부</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>SENS1</td>
                                <td><input type="text" name="" id="" class="full-input" value="벨브1"/></td>
                                <td><input type="text" name="" id="" class="full-input"/></td>
                                <td><input type="text" name="" id="" class="full-input"/></td>
                                <td><input type="checkbox" name="" id=""></td>
                            </tr>
                            <tr>
                                <td>SENS2</td>
                                <td><input type="text" name="" id="" class="full-input" value="벨브2"/></td>
                                <td><input type="text" name="" id="" class="full-input"/></td>
                                <td><input type="text" name="" id="" class="full-input"/></td>
                                <td><input type="checkbox" name="" id=""></td>
                            </tr>
                            <tr>
                                <td>SENS3</td>
                                <td><input type="text" name="" id="" class="full-input" value="벨브3"/></td>
                                <td><input type="text" name="" id="" class="full-input"/></td>
                                <td><input type="text" name="" id="" class="full-input"/></td>
                                <td><input type="checkbox" name="" id=""></td>
                            </tr>
                            <tr>
                                <td>SENS4</td>
                                <td><input type="text" name="" id="" class="full-input" value="벨브4"/></td>
                                <td><input type="text" name="" id="" class="full-input"/></td>
                                <td><input type="text" name="" id="" class="full-input"/></td>
                                <td><input type="checkbox" name="" id=""></td>
                            </tr>
                            <tr>
                                <td>SENS5</td>
                                <td><input type="text" name="" id="" class="full-input" value="벨브5"/></td>
                                <td><input type="text" name="" id="" class="full-input"/></td>
                                <td><input type="text" name="" id="" class="full-input"/></td>
                                <td><input type="checkbox" name="" id=""></td>
                            </tr>
                            <tr>
                                <td>SENS6</td>
                                <td><input type="text" name="" id="" class="full-input" value="벨브6"/></td>
                                <td><input type="text" name="" id="" class="full-input"/></td>
                                <td><input type="text" name="" id="" class="full-input"/></td>
                                <td><input type="checkbox" name="" id=""></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-end flex justify-end">
                <button v-show="modalType === 'form-modal'" class="orange-btn small-btn">접속</button>
                <button v-show="modalType === 'tab-modal'" class="blue-btn small-btn">확인</button>
            </div>
        </div>
    </div>
</template>

<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiClose } from '@mdi/js';

export default {
    data() {
        return {
            isModalOpen: true,
            activeTab: 'tab1',
            modalType: 'tab-modal',
            closePath:mdiClose
        }
    },
    methods: {
        // 탭 변경
        showTab: function (tabName) {
            this.activeTab = tabName;
        },
        closeModal: function () {
            this.isModalOpen = false;
        }
    },
    watch: {

    },
    computed: {

    },
    components: {
        'SvgIcon':SvgIcon
    },
}
</script>