<!-- 
  작성자 : 임재현
	작성일 : 2024.01.17
	내용 : 컬럼분석 페이지
 -->
<template>
    <div class="container">
        <div class="page-titleZone flex justify-between">
            <p class="main-title">진단대상관리 > 컬럼분석</p>
            <PageNavigation />
        </div>
        <div class="content-box flex justify-between">
            <div class="left-content flex40">
                <div class="flex-column justify-between">
                    <div class="host-zone flex20">
                        <div class="content-titleZone">
                            <p class="box-title">검색 조건</p>
                        </div>
                        <div>
                            <div class="table-zone">
                                <table class="form-table">
                                    <colgroup>
                                        <col style="width: 10%" />
                                        <col style="width: 40%" />
                                        <col style="width: 10%" />
                                        <col style="width: 40%" />
                                    </colgroup>
                                    <tbody>
                                        <tr>
                                            <th>DBMS</th>
                                            <td>
                                                <select v-model="searchResultData.dbms_name">
                                                    <option value="전체">전체</option>
                                                    <option v-for="item in dbmsOption" :key="item" :value="item">
                                                        {{ item }}
                                                    </option>
                                                </select>
                                            </td>
                                            <th>스키마명</th>
                                            <td>
                                                <select v-model="searchResultData.schema_name">
                                                    <option value="전체">전체</option>
                                                    <option v-for="item in schemaOption" :key="item" :value="item">
                                                        {{ item }}
                                                    </option>
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>테이블명</th>
                                            <td>
                                                <input type="text" v-model="searchResultData.table_nm" />
                                            </td>
                                            <th>컬럼명</th>
                                            <td>
                                                <input type="text" v-model="searchResultData.column_nm" />
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="justify-start">
                                    <button class="blue-btn small-btn" @click="selectSearchResult()">검색</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="file-zone flex80">
                        <div class="content-titleZone">
                            <p class="box-title">검색 결과</p>
                        </div>
                        <div class="table-zone">
                            <!-- v-for -->
                            <table class="list-table">
                                <colgroup>
                                    <col style="width: 5%" />
                                    <col style="width: " />
                                    <col style="width: " />
                                    <col style="width: " />
                                    <col style="width: " />
                                    <col style="width: " />
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>선택</th>
                                        <th>DBMS명</th>
                                        <th>스키마명</th>
                                        <th>테이블명</th>
                                        <th>테이블 한글명</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr
                                        v-for="(item, index) in searchResultList"
                                        :class="{ 'selected-row': isSelectedRow(item.table_id) }"
                                        :key="index"
                                        @click="tableSelect(item.table_id)"
                                    >
                                        <td>
                                            {{
                                                index +
                                                1 +
                                                (searchResultData.currentPage - 1) * searchResultData.perPage
                                            }}
                                        </td>
                                        <td>
                                            <input type="checkbox" v-model="checkboxList[index]" />
                                        </td>
                                        <td>{{ item.dbms_name }}</td>
                                        <td>{{ item.schema_name }}</td>
                                        <td>{{ item.table_nm }}</td>
                                        <td>{{ item.table_nm_k }}</td>
                                    </tr>
                                </tbody>
                            </table>
                            <PaginationButton
                                v-model:currentPage="searchResultData.currentPage"
                                :perPage="searchResultData.perPage"
                                :totalCount="searchResultCount"
                                :maxRange="5"
                            />
                            <div class="justify-start">
                                <button class="blue-btn small-btn">테이블 내 컬럼 분석 실행</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-content flex60">
                <div class="flex-column">
                    <div class="content-titleZone">
                        <p class="box-title">테이블 컬럼 목록</p>
                    </div>
                    <div class="table-zone">
                        <table class="list-table">
                            <colgroup>
                                <col style="width: 5%" />
                                <col style="width: " />
                                <col style="width: " />
                                <col style="width: " />
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>컬럼명</th>
                                    <th>한글명</th>
                                    <th>DataType</th>
                                    <th>Null여부</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item, index) in tableColumnList" :key="index">
                                    <td>
                                        {{ index + 1 + (tableColumnData.currentPage - 1) * tableColumnData.perPage }}
                                    </td>
                                    <td>{{ item.column_nm }}</td>
                                    <td>{{ item.column_nm_k }}</td>
                                    <td>{{ item.column_type }}</td>
                                    <td>{{ item.column_isnull }}</td>
                                </tr>
                            </tbody>
                        </table>
                        <PaginationButton
                            v-model:currentPage="tableColumnData.currentPage"
                            :perPage="tableColumnData.perPage"
                            :totalCount="tableColumnListCount"
                            :maxRange="5"
                        />
                    </div>
                    <div class="justify-center flex5">
                        <button class="blue-btn small-btn">선택한 컬럼 상세 조회</button>
                    </div>

                    <div class="content-titleZone flex5">
                        <p class="box-title">테이블 내 컬럼 데이터 분석 정보</p>
                    </div>
                    <div class="table-zone">
                        <table class="list-table">
                            <colgroup>
                                <col style="width: 5%" />
                                <col style="width: " />
                                <col style="width: " />
                                <col style="width: " />
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>데이터</th>
                                    <th>COUNT</th>
                                    <th>분포</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>test123</td>
                                    <td>홍길동</td>
                                    <td>1999.01.01</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import PageNavigation from '../../component/PageNavigation.vue';
import PaginationButton from '../../component/PaginationButton.vue';
import FileTree from '../../component/FileTree.vue';
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify } from '@mdi/js';
export default {
    data() {
        return {
            searchPath: mdiMagnify,

            searchResultList: [], //검색결과 리스트
            tableColumnList: [], //컬럼 리스트

            dbmsOption: [], //DBMS 옵션
            schemaOption: [], //스키마 옵션

            checkboxList: [], //체크된 행의 배열상의 인덱스 0,1,2...
            selectedIndex: [], //체크된 행의 DB상의 인덱스 저장 24, 34, 56 ...

            //검색조건
            searchResultData: {
                dbms_name: '전체',
                dbms_id: '',
                schema_name: '전체',
                scheam_id: '',
                table_id: '',
                table_nm: '',
                column_nm: '',
                user_id: $cookies.get('USER_ID'),
                currentPage: 1,
                perPage: 5,
            },

            tableColumnData: {
                table_id: '',
                user_id: $cookies.get('USER_ID'),
                currentPage: 1,
                perPage: 5,
            },

            //검색결과 페이징
            searchResultCount: 0,
            searchResultIdx: 0,
            //테이블 컬럼 페이징
            tableColumnListCount: 0,
            tableColumnListIdx: 0,
        };
    },
    methods: {
        selectDbms: function () {
            const vm = this;
            axios({
                url: 'selectDbms.json',
                method: 'post',
                headers: {
                    'Content-Type': 'application/json; charset=UTF-8',
                },
                data: vm.searchResultData,
            })
                .then(function (response) {
                    vm.dbmsOption = response.data;
                    console.log('searchResultData = ', vm.searchResultData);
                    console.log('selectDbms - response : ', response.data);
                })
                .catch(function (error) {
                    console.log('selectDbms - error : ', error);
                    vm.$showAlert('error', 'selectDbms 오류');
                });
        },

        selectSchema: function () {
            const vm = this;
            console.log('selectScheam 실행');
            axios({
                url: 'selectSchema.json',
                method: 'post',
                headers: {
                    'Content-Type': 'application/json; charset=UTF-8',
                },
                data: vm.searchResultData,
            })
                .then(function (response) {
                    vm.schemaOption = response.data;
                    console.log('selectSchema - response : ', response.data);
                    console.log('searchResultData - response : ', response.data);
                })
                .catch(function (error) {
                    console.log('selectSchema - error : ', error);
                    vm.$showAlert('error', 'selectSchema 오류');
                });
        },

        selectSearchResult: function () {
            const vm = this;
            console.log('selectSearchResult 실행');
            axios({
                url: 'selectSearchResult.json',
                method: 'post',
                headers: {
                    'Content-Type': 'application/json; charset=UTF-8',
                },
                data: vm.searchResultData,
            })
                .then(function (response) {
                    vm.searchResultList = response.data.table;
                    console.log('vm.searchResultList : ', response.data.table);
                    vm.searchResultCount = response.data.count;
                    console.log('vm.searchResultCount : ', response.data.count);
                    vm.searchResultIdx =
                        vm.searchResultCount - (vm.searchResultData.currentPage - 1) * vm.searchResultData.perPage;
                    console.log('selectSearchResult - response : ', response.data);
                })
                .catch(function (error) {
                    console.log('selectSearchResult - error : ', error);
                    vm.$showAlert('error', 'selectSearchResult 오류');
                });
        },

        selectTableColumn: function () {
            const vm = this;
            console.log('selectTableColumn 실행');
            console.log('tableColumnData : ', vm.tableColumnData);
            axios({
                url: 'selectTableColumn.json',
                method: 'post',
                headers: {
                    'Content-Type': 'application/json; charset=UTF-8',
                },
                data: vm.tableColumnData,
            })
                .then(function (response) {
                    vm.tableColumnList = response.data.table1;
                    console.log('tableColumList = ', response.data.table1);
                    vm.tableColumnListCount = response.data.count1;
                    console.log('tableColumnListCount = ', response.data.count1);
                    vm.tableColumnListIdx =
                        vm.tableColumnListCount - (vm.tableColumnData.currentPage - 1) * vm.tableColumnData.perPage;
                    console.log('selectTableColumn - response : ', response.data);
                })
                .catch(function (error) {
                    console.log('selectTableColumn - error : ', error);
                    vm.$showAlert('error', 'selectTableColumn 오류');
                });
        },

        tableSelect: function (table_id) {
            this.tableColumnData.table_id = table_id;
            this.selectTableColumn();
        },

        // table_id 확인
        isSelectedRow(tableId) {
            return tableId === this.tableColumnData.table_id;
        },
    },
    watch: {
        'searchResultData.dbms_name'() {
            console.log('selectScheam 실행');
            this.selectSchema();
        },
        'searchResultData.schema_name'() {
            console.log('searchResultData = ', this.searchResultData);
        },

        'searchResultData.currentPage': function () {
            this.selectSearchResult();
        },

        'tableColumnData.currentPage': function () {
            this.selectTableColumn();
        },
    },
    computed: {
        PaginationButton: PaginationButton,
    },
    components: {
        PageNavigation: PageNavigation,
        FileTree: FileTree,
        SvgIcon: SvgIcon,
        PaginationButton: PaginationButton,
    },
    mounted() {
        console.log('selectSearchResult 실행');
        this.selectSearchResult();
        this.selectDbms();
    },
};
</script>

<style lang="css" scoped>
.content-zone {
    border: 1px solid #eee;
    padding: 10px;
    height: calc(100% - 55px);
    overflow: auto;
}
.list-table tbody .selected-row {
    background-color: #c6feff;
}
</style>
