<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="flex justify-between align-center">
                    <div class="count-zone">
                        <p>총 <span>{{this.jobItem.itm.dataCheckItems.length}}</span>건 중 <span>{{selectCount}}</span>건 선택</p>
                    </div>
                    <div class="cunt-selectZone">
                        <p>중복알람 주기설정</p>
                        <select v-model="jobItm.itm_option_string">
                            <option value="1">1분</option>
                            <option value="5">5분</option>
                        </select>
                    </div>
                </div>
                <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 v-for="(item, indx) in jobItem.itm.dataCheckItems" :key="indx">
                                <td>{{item.column_display}}</td>
                                <td><input type="text" class="full-input" v-model="item.column_origin"/></td>
                                <td><input type="text" class="full-input"  v-model="item.min_value"/></td>
                                <td><input type="text" class="full-input"  v-model="item.max_value"/></td>
                                <td><input type="checkbox" v-model="item.use_at"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-end flex justify-end">
                <button class="orange-btn small-btn" @click="closeModal">닫기</button>
                <button class="blue-btn small-btn" @click="closeModal">확인</button>
            </div>
        </div>
    </div>
</template>

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

export default {
    name: 'data-check',
    props: {
        openPopup: {
            type: Boolean,
            default: false
        },
        jobItem: {
            type: Boolean,
            default: null
        }
    },
    data() {
        return {
            isModalOpen: this.openPopup
            , jobItm: this.jobItem
            , closePath:mdiClose
        }
    },
    methods: {
        // 모달 닫기
        closeModal: function () {
            this.isModalOpen = false;
            this.$emit("closePopup", this.jobItm.indx);
        },

        dataSetting : function(){
            if(this.jobItm.itm.dataCheckItems.length == 0 ){
                for(let i = 0 ; i < this.jobItm.front_dataTable.columnDatas.length ; i++){
                    if(this.jobItm.front_dataTable.columnDatas[i].dataTy == 'INT' ||
                        this.jobItm.front_dataTable.columnDatas[i].dataTy  ==  'LONG' ||
                        this.jobItm.front_dataTable.columnDatas[i].dataTy == 'FLOAT' ||
                        this.jobItm.front_dataTable.columnDatas[i].dataTy == 'DOUBLE'){
                        let DataCheckItem = {};
                        DataCheckItem.order = i;
                        DataCheckItem.column_origin = this.jobItm.front_dataTable.columnDatas[i].columnNm;
                        DataCheckItem.column_display = this.jobItm.front_dataTable.columnDatas[i].displyColumnNm;
                        DataCheckItem.min_value = 0.0;
                        DataCheckItem.max_value = 1.0;
                        DataCheckItem.use_at = true;
                        this.jobItem.itm.dataCheckItems.push(DataCheckItem)
                    }
                }
            }
        },

        resetData : function(){
            this.jobItm.front_dataTable.columnDatas = [];
            this.dataSetting();
        }
    },
    watch: {
        openPopup: function (v) {
            this.isModalOpen = v;
        },

        jobItem: function (v) {
            this.jobItm = v;
            this.dataSetting();
        },
    },
    computed: {
        selectCount: function () {
            let count = 0;
            for(let i = 0 ; i < this.jobItem.itm.dataCheckItems.length ; i++){
                if(this.jobItem.itm.dataCheckItems[i].use_at){
                    count++;
                }
            }
            return count;
        }
    },
    components: {
        'SvgIcon':SvgIcon
    },
    mounted() {
        this.dataSetting();

    }
}
</script>