<template>
    <div class="ui--content-wrapper">
        <sdl-breadcrumb></sdl-breadcrumb>
        <div class="ui--form-container">
            <form class="needs-validation" novalidate="">

               <!-- <div class="mb-2">
                    <label>Division</label>
                    <select v-model="kpi.code" class="form-select d-block w-100">
                        <option :value="item.code" v-for="item in divisionList" :key="item.code">
                            {{ item.name }}
                        </option>
                    </select>
                </div>

                <div class="mb-2">
                    <label>Group</label>
                    <select v-model="kpi.groupCode" class="form-select d-block w-100">
                        <option :value="item.code" v-for="item in groupList" :key="item.code">
                            {{ item.name }}
                        </option>
                    </select>
                </div>-->

                <div class="mb-2">
                    <label>Employee <span class="ui--text-required">&#42;</span></label>
                    <select v-model="kpi.userId" class="form-select d-block w-100">
                        <option :value="item.userId" v-for="item in groupMemberList" :key="item.knoxId">
                            {{ item.knoxId }}
                        </option>
                    </select>
                </div>


                <div class="mb-2">
                    <label>type</label>
                    <select v-model="kpi.kpiType" class="form-select d-block w-100" :disabled=true>
                        <option :value="kpiType.code" v-for="kpiType in kpiTypeList" :key="kpiType.codeId">
                            {{ getLabel(kpiType) }}
                        </option>
                    </select>
                </div>

                <div class="accordion">
                    <div class="card" v-for="target in kpi.targets" :key="target.targetId">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <button class="btn btn-link" type="button" @click="toggleCollapse(target)">
                                    KPI #1
                                </button>
                            </h5>
                        </div>
                        <transition name="collapse">
                            <div v-show="target.isCollapsed">
                                <div class="card-body" >

                                    <div class="mb-2">
                                        <label>period type</label>
                                        <select v-model="target.periodType" class="form-select d-block w-100">
                                            <option :value="periodType.code" v-for="periodType in periodTypeList"
                                                :key="periodType.codeId">
                                                {{ getLabel(periodType) }}
                                            </option>
                                        </select>
                                    </div>

                                    <div class="mb-2">
                                        <label>objective name<span class="ui--text-required">&#42;</span></label>
                                        <input v-model="target.targetName" type="text" class="form-control" />
                                    </div>

                                    <div class="mb-2">
                                        <label>description </label>
                                        <textarea style="width: 100%; overflow: scroll; height: 80px; max-height: 250px"
                                            class="form-control" v-model="target.targetDesc"></textarea>
                                    </div>

                                    <div class="mb-2">
                                        <label>source <span class="ui--text-required">&#42;</span></label>
                                        <select v-model="target.kpiId" class="form-select d-block w-100">
                                            <option :value="item.kpiId" v-for="item in kpiList"
                                                :key="item.kpiId">
                                                {{ item.kpiName }}
                                            </option>
                                        </select>
                                    </div>

                                    <div class="mb-2">
                                        <label>target type</label>
                                        <select v-model="target.targetTypeId" class="form-select d-block w-100">
                                            <option :value="item.code" v-for="item in targetTypeList"
                                                :key="item.codeId">
                                                {{ getLabel(item) }}
                                            </option>
                                        </select>
                                    </div>


                                    <div class="mb-2">
                                        <label>weight<span class="ui--text-required">&#42;</span></label>
                                        <input v-model="target.weight" type="text" class="form-control" />
                                    </div>

                                    <div class="mb-2">
                                        <label>target<span class="ui--text-required">&#42;</span></label>
                                        <input v-model="target.target" type="text" class="form-control" />
                                    </div>

                                    
                                </div>
                            </div>
                        </transition>

                    </div>

                </div>



                <button class="btn btn-secondary btn-lg" type="button" @click="addKpi()">
                    Add KPI
                </button>
            </form>
        </div>
    </div>
    <pre>{{ kpi.targets }}
  </pre>
</template>
<script>
import axios from 'axios';
import _ from 'lodash';
import SDLLocale from '@/mixin/SDLLocale';
import { SDLUtil, DateUtil } from '@/utils';
export default {

    name: "kpis/setKPIs",// keep-alive를 위해 필수!
    mixins: [SDLLocale],
    data() {
        return {
            currentUser: SDLUtil.getLoginedUserInfo(),
            roleList: [],
            roleName: null,
            divisionList: [],
            groupList: [],
            groupMemberList: [],
            periodTypeList: SDLUtil.getCommCodeList({ commCodeTypeId: 'EMBO_PERIOD_TYPE' }),
            kpiTypeList: SDLUtil.getCommCodeList({ commCodeTypeId: 'EMBO_KPI_TYPE' }),
            targetTypeList: SDLUtil.getCommCodeList({ commCodeTypeId: 'EMBO_TARGET_TYPE' }),
            
            kpi: {
                userId: null,
                divisionCode: null,
                kpiType: 'FLEX',//FIXED
                targets: [],

            },
            
            targetDefault: {
                isCollapsed: false,
                targetName: '',
                periodType: 'Q',                
                period: null,  
                targetDesc: '',
                kpiId: null,//source
                targetTypeId : 'QUANTITATIVE',
                weight:'30',
                target:'40',
            }
        };
    },
    methods: {
        async getModuleInfo() {
            SDLUtil.showLoadingBar(true);           
            axios
                .get(`${SDLUtil.API_URL}/embo/kpi/main.do?method=getKpiList`)
                .then(({ data }) => {
                    this.kpiList = data;
                    SDLUtil.showLoadingBar(false);
                })
                .catch(error => {
                    SDLUtil.showLoadingBar(false);
                    SDLUtil.errorAlert(error);
                    console.log(error);
                });
        },
        getUserRole() {
            axios
                .get(`${SDLUtil.API_URL}/embo/util/roles`)
                .then(({ data }) => {
                    this.roleList = data;

                    //DIVISION_HEADS > SUPERVISOR
                    const roleNames = this.roleList.map(role => role.roleName);
                    const higherRole = roleNames.includes('DIVISION_HEADS') ? 'DIVISION_HEADS' :
                        roleNames.includes('SUPERVISOR') ? 'SUPERVISOR' : '';
                    this.roleName = higherRole;

                    //SUPERVISOR 면 kpiType:fixed 고정
                    if ('SUPERVISOR' === this.roleName) {
                        this.kpi.kpiType = 'FLEX';
                    }

                    if ('DIVISION_HEADS' === this.roleName) {
                        this.kpi.kpiType = 'FIXED';
                    }


                })
                .catch(err => {
                    SDLUtil.errorAlert(err);
                });
        },
        getDivision() {
            axios
                .get(`${SDLUtil.API_URL}/embo/util/division`)
                .then(({ data }) => {
                    this.divisionList = data;
                })
                .catch(err => {
                    SDLUtil.errorAlert(err);
                });
        },
        getGroup() {
            axios
                .get(`${SDLUtil.API_URL}/embo/util/group`)
                .then(({ data }) => {
                    this.groupList = data;
                })
                .catch(err => {
                    SDLUtil.errorAlert(err);
                });
        },
        getGroupMember() {
            axios
                .get(`${SDLUtil.API_URL}/embo/util/myGroupMember`)
                .then(({ data }) => {
                    this.groupMemberList = data;
                })
                .catch(err => {
                    SDLUtil.errorAlert(err);
                });
        }, toggleCollapse(target) {
            target.isCollapsed = !target.isCollapsed;
        },
        getTarget() {
            axios
                .get(`${SDLUtil.API_URL}/embo/kpi/main.do?method=getTargetList`)
                .then(({ data }) => {
                    if(_.isEmpty()){

                        this.kpi.targets.push(_.clone(this.targetDefault));
                    }else{
                        this.kpi.targets = data;
                    } 
                })
                .catch(err => {
                    SDLUtil.errorAlert(err);
                });
        },addKpi(){
            this.kpi.targets.push(_.clone(this.targetDefault));
        }
    },//method
    created() {
        this.getModuleInfo();
        this.getUserRole();//SUPERVISOR
        this.getDivision();
        //this.getGroup();
        this.getGroupMember();
        this.getTarget();
        //groupMemberList
        //DIVISION_HEADS

    },
    mounted() {
        this.$nextTick(() => {
            console.info('initialize setKPIs Page');

        });
    },
}
</script>
<style scoped>
.collapse-enter-active, .collapse-leave-active {
  transition: all 0.5s ease;
}
.collapse-enter, .collapse-leave-to /* .collapse-leave-active in <2.1.8 */ {
  height: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
}
</style>
