<template>
  <swiper class="swiper" :options="swiperOption">
    <swiper-slide>
        <v-row> 
          <v-col cols="12" sm="12" md="6" lg="6">
            <component
            v-if="widgetCnt >= 1"
            :is="card0Loader"
            :widgetPrgmId="prgmId0"
            :widgetPopFg="true"
            :widgetId="widgetId0"
            :widgetReflashMm="widgetReflashMm0"
            :parentPrgmId="myPrgmId"/>
          </v-col>
          <v-col cols="12" sm="12" md="6" lg="6">
            <component
            v-if="widgetCnt >= 2"
            :is="card1Loader"
            :widgetPrgmId="prgmId1"
            :widgetPopFg="true"
            :widgetId="widgetId1"
            :widgetReflashMm="widgetReflashMm1"
            :parentPrgmId="myPrgmId"/>
          </v-col>
        </v-row>
        <v-row>
          <v-col xs="12" sm="12" md="6" lg="6">
            <component
            v-if="widgetCnt >= 3"
            :is="card2Loader"
            :widgetPrgmId="prgmId2"
            :widgetPopFg="true"
            :widgetId="widgetId2"
            :widgetReflashMm="widgetReflashMm2"
            :parentPrgmId="myPrgmId"/>
          </v-col>
          <v-col cols="12" sm="12" md="6" lg="6">
            <component
            v-if="widgetCnt >= 4"
            :is="card3Loader"
            :widgetPrgmId="prgmId3"
            :widgetPopFg="true"
            :widgetId="widgetId3"
            :widgetReflashMm="widgetReflashMm3"
            :parentPrgmId="myPrgmId"/>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12" sm="12" md="6" lg="6">
            <component
            v-if="widgetCnt >= 5"
            :is="card4Loader"
            :widgetPrgmId="prgmId4"
            :widgetPopFg="true"
            :widgetId="widgetId4"
            :widgetReflashMm="widgetReflashMm4"
            :parentPrgmId="myPrgmId"/>
          </v-col>
          <v-col cols="12" sm="12" md="6" lg="6">
            <component
            v-if="widgetCnt >= 6"
            :is="card5Loader"
            :widgetPrgmId="prgmId5"
            :widgetPopFg="true"
            :widgetId="widgetId5"
            :widgetReflashMm="widgetReflashMm5"
            :parentPrgmId="myPrgmId"/>
          </v-col>
        </v-row>
    </swiper-slide>
    <swiper-slide v-if="widgetCnt > 6">
        <v-row> 
          <v-col cols="12" sm="12" md="6" lg="6">
            <component
            v-if="widgetCnt >= 7"
            :is="card6Loader"
            :widgetPrgmId="prgmId6"
            :widgetPopFg="true"
            :widgetId="widgetId6"
            :widgetReflashMm="widgetReflashMm6"
            :parentPrgmId="myPrgmId"/>
          </v-col>
          <v-col cols="12" sm="12" md="6" lg="6">
            <component
            v-if="widgetCnt >= 8"
            :is="card7Loader"
            :widgetPrgmId="prgmId7"
            :widgetPopFg="true"
            :widgetId="widgetId7"
            :widgetReflashMm="widgetReflashMm7"
            :parentPrgmId="myPrgmId"/>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12" sm="12" md="6" lg="6">
            <component
            v-if="widgetCnt >= 9"
            :is="card8Loader"
            :widgetPrgmId="prgmId8"
            :widgetPopFg="true"
            :widgetId="widgetId8"
            :widgetReflashMm="widgetReflashMm8"
            :parentPrgmId="myPrgmId"/>
          </v-col>
          <v-col cols="12" sm="12" md="6" lg="6">
            <component
            v-if="widgetCnt >= 10"
            :is="card9Loader"
            :widgetPrgmId="prgmId9"
            :widgetPopFg="true"
            :widgetId="widgetId9"
            :widgetReflashMm="widgetReflashMm9"
            :parentPrgmId="myPrgmId"/>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12" sm="12" md="6" lg="6">
            <component
            v-if="widgetCnt >= 11"
            :is="card10Loader"
            :widgetPrgmId="prgmId10"
            :widgetPopFg="true"
            :widgetId="widgetId10"
            :widgetReflashMm="widgetReflashMm10"
            :parentPrgmId="myPrgmId"/>
          </v-col>
          <v-col cols="12" sm="12" md="6" lg="6">
            <component
            v-if="widgetCnt >= 12"
            :is="card11Loader"
            :widgetPrgmId="prgmId11"
            :widgetPopFg="true"
            :widgetId="widgetId11"
            :widgetReflashMm="widgetReflashMm11"
            :parentPrgmId="myPrgmId"/>
          </v-col>
        </v-row>
    </swiper-slide>
    <swiper-slide v-if="widgetCnt > 12">
        <v-row> 
          <v-col cols="12" sm="12" md="6" lg="6">
            <component
            v-if="widgetCnt >= 13"
            :is="card12Loader"
            :widgetPrgmId="prgmId12"
            :widgetPopFg="true"
            :widgetId="widgetId12"
            :widgetReflashMm="widgetReflashMm12"
            :parentPrgmId="myPrgmId"/>
          </v-col>
          <v-col cols="12" sm="12" md="6" lg="6">
            <component
            v-if="widgetCnt >= 14"
            :is="card13Loader"
            :widgetPrgmId="prgmId13"
            :widgetPopFg="true"
            :widgetId="widgetId13"
            :widgetReflashMm="widgetReflashMm13"
            :parentPrgmId="myPrgmId"/>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12" sm="12" md="6" lg="6">
            <component
            v-if="widgetCnt >= 15"
            :is="card14Loader"
            :widgetPrgmId="prgmId14"
            :widgetPopFg="true"
            :widgetId="widgetId14"
            :widgetReflashMm="widgetReflashMm14"
            :parentPrgmId="myPrgmId"/>
          </v-col>
          <v-col cols="12" sm="12" md="6" lg="6">
            <component
            v-if="widgetCnt >= 16"
            :is="card15Loader"
            :widgetPrgmId="prgmId15"
            :widgetPopFg="true"
            :widgetId="widgetId15"
            :widgetReflashMm="widgetReflashMm15"
            :parentPrgmId="myPrgmId"/>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12" sm="12" md="6" lg="6">
            <component
            v-if="widgetCnt >= 17"
            :is="card16Loader"
            :widgetPrgmId="prgmId16"
            :widgetPopFg="true"
            :widgetId="widgetId16"
            :widgetReflashMm="widgetReflashMm16"
            :parentPrgmId="myPrgmId"/>
          </v-col>
          <v-col cols="12" sm="12" md="6" lg="6">
            <component
            v-if="widgetCnt >= 18"
            :is="card17Loader"
            :widgetPrgmId="prgmId17"
            :widgetPopFg="true"
            :widgetId="widgetId17"
            :widgetReflashMm="widgetReflashMm17"
            :parentPrgmId="myPrgmId"/>
          </v-col>
        </v-row>
    </swiper-slide>
    <div class="swiper-pagination swiper-pagination-horizontal swiper-position" slot="pagination"></div>
  </swiper>
</template>
<script>
import { mapState, mapMutations, mapActions } from "vuex";
import Utility from "~/plugins/utility";
import Grid from "~/components/common/Grid";
import Chart from "~/components/common/Chart";
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.min.css'


let myTitle;
// const myPrgmId = "PRG4107";
let myPrgmId;
export default {
  async asyncData(context) {
    const myState = context.store.state;
    // context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
    // myTitle = myState.activeMenuInfo.menuNm;
    myPrgmId = context.route.query.prgmId;
    await context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
    myTitle = await myState.activeMenuInfo.menuNm;
  },
  meta: {
    title: () => {
      return myTitle;
    },
    prgmId: myPrgmId,
    closable: true
  },
  components: {
    Utility,
    Grid,
    Chart,
    swiper,
    swiperSlide
  },
  data() { 
    return {
      myPrgmId: myPrgmId,
      widgetCnt: 0,
      card0: null,
      card1: null,
      card2: null,
      card3: null,
      card4: null,
      card5: null,
      card6: null,
      card7: null,
      card8: null,
      card9: null,
      card10: null,
      card11: null,
      card12: null,
      card13: null,
      card14: null,
      card14: null,
      card16: null,
      card17: null,
      prgmId0:null,
      prgmId1:null,
      prgmId2:null,
      prgmId3:null,
      prgmId4:null,
      prgmId5:null,
      prgmId6:null,
      prgmId7:null,
      prgmId8:null,
      prgmId9:null,
      prgmId10:null,
      prgmId11:null,
      prgmId12:null,
      prgmId13:null,
      prgmId14:null,
      prgmId15:null,
      prgmId16:null,
      prgmId17:null,
      widgetId0:null,
      widgetId1:null,
      widgetId2:null,
      widgetId3:null,
      widgetId4:null,
      widgetId5:null,
      widgetId6:null,
      widgetId7:null,
      widgetId8:null,
      widgetId9:null,
      widgetId10:null,
      widgetId11:null,
      widgetId12:null,
      widgetId13:null,
      widgetId14:null,
      widgetId15:null,
      widgetId16:null,
      widgetId17:null,

      widgetReflashMm0:15*60000,
      widgetReflashMm1:15*60000,
      widgetReflashMm2:15*60000,
      widgetReflashMm3:15*60000,
      widgetReflashMm4:15*60000,
      widgetReflashMm5:15*60000,

      widgetReflashMm6:15*60000,
      widgetReflashMm7:15*60000,
      widgetReflashMm8:15*60000,
      widgetReflashMm9:15*60000,
      widgetReflashMm10:15*60000,
      widgetReflashMm11:15*60000,

      widgetReflashMm12:15*60000,
      widgetReflashMm13:15*60000,
      widgetReflashMm14:15*60000,
      widgetReflashMm15:15*60000,
      widgetReflashMm16:15*60000,
      widgetReflashMm17:15*60000,
      swiperOption: {
        slidesPerView: 1,
        spaceBetween: 20,
        loop: false,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        keyboard: {
          enabled: true
        },
        allowTouchMove : false, //(false-스와이핑안됨)버튼으로만 슬라이드 조작이 가능
        watchOverflow : true // 슬라이드가 1개 일 때 pager, button 숨김 여부 설정
      },
      widgetPrgmUrlList: [],
      widgetList: []
    };
  },
  computed: {
    ...mapState({
      pageData: state => state.pageData[myPrgmId]
    }),
    card0Loader(){
      const tab0 = this.card0 == null ? 'BlankWidget' : this.card0
      //const tab0 = 'BlankWidget'
      return () => import(`@/components/widget/${tab0}`)
    },
    card1Loader(){
      const tab1 = this.card1 == null ? 'BlankWidget' : this.card1
      //const tab1 = 'BlankWidget'
      return () => import(`@/components/widget/${tab1}`)
    },
    card2Loader(){
      const tab2 = this.card2 == null ? 'BlankWidget' : this.card2
      //const tab2 = 'BlankWidget'
      return () => import(`@/components/widget/${tab2}`)
    },
    card3Loader(){
      const tab3 = this.card3 == null ? 'BlankWidget' : this.card3
      //const tab3 = 'BlankWidget'
      return () => import(`@/components/widget/${tab3}`)
    },
    card4Loader(){
      const tab4 = this.card4 == null ? 'BlankWidget' : this.card4
      //const tab4 = 'BlankWidget'
      return () => import(`@/components/widget/${tab4}`)
    },
    card5Loader(){
      const tab5 = this.card5 == null ? 'BlankWidget' : this.card5
      //const tab5 = 'BlankWidget'
      return () => import(`@/components/widget/${tab5}`)
    },

    card6Loader(){
      const tab6 = this.card6 == null ? 'BlankWidget' : this.card6
      //const tab0 = 'BlankWidget'
      return () => import(`@/components/widget/${tab6}`)
    },
    card7Loader(){
      const tab7 = this.card7 == null ? 'BlankWidget' : this.card7
      //const tab1 = 'BlankWidget'
      return () => import(`@/components/widget/${tab7}`)
    },
    card8Loader(){
      const tab8 = this.card8 == null ? 'BlankWidget' : this.card8
      //const tab2 = 'BlankWidget'
      return () => import(`@/components/widget/${tab8}`)
    },
    card9Loader(){
      const tab9 = this.card9 == null ? 'BlankWidget' : this.card9
      //const tab3 = 'BlankWidget'
      return () => import(`@/components/widget/${tab9}`)
    },
    card10Loader(){
      const tab10 = this.card10 == null ? 'BlankWidget' : this.card10
      //const tab4 = 'BlankWidget'
      return () => import(`@/components/widget/${tab10}`)
    },
    card11Loader(){
      const tab11 = this.card11 == null ? 'BlankWidget' : this.card11
      //const tab5 = 'BlankWidget'
      return () => import(`@/components/widget/${tab11}`)
    },
    
    card12Loader(){
      const tab12 = this.card12 == null ? 'BlankWidget' : this.card12
      //const tab0 = 'BlankWidget'
      return () => import(`@/components/widget/${tab12}`)
    },
    card13Loader(){
      const tab13 = this.card13 == null ? 'BlankWidget' : this.card13
      //const tab1 = 'BlankWidget'
      return () => import(`@/components/widget/${tab13}`)
    },
    card14Loader(){
      const tab14 = this.card14 == null ? 'BlankWidget' : this.card14
      //const tab2 = 'BlankWidget'
      return () => import(`@/components/widget/${tab14}`)
    },
    card15Loader(){
      const tab15 = this.card15 == null ? 'BlankWidget' : this.card15
      //const tab3 = 'BlankWidget'
      return () => import(`@/components/widget/${tab15}`)
    },
    card16Loader(){
      const tab16 = this.card16 == null ? 'BlankWidget' : this.card16
      //const tab4 = 'BlankWidget'
      return () => import(`@/components/widget/${tab16}`)
    },
    card17Loader(){
      const tab17 = this.card17 == null ? 'BlankWidget' : this.card17
      //const tab5 = 'BlankWidget'
      return () => import(`@/components/widget/${tab17}`)
    },
  },
  watch: {
  },
  async beforeCreate() {
    myPrgmId = this.$route.query.prgmId;
    await this.$store.dispatch("chkOpenTabList", {
      key: "create",
      prgmId: myPrgmId,
      defaultData: defaultData
    });
  },
  async created(){
    
  },
  async mounted(){
    await this.selectIndvWidgetList();
    await this.selectWidgetPrgmUrlList();
  },
  beforeDestroy() {
    this.chkOpenTabList({ key: "destroy", prgmId: myPrgmId });
  },
  methods: {
    ...mapMutations({
      setPageData: "setPageData",
      setGridData: "setGridData",
      setGridColumn: "setGridColumn",
      setGridOption: "setGridOption",
      setChartOption: "setChartOption"
    }),
   ...mapActions({
      postApi: "modules/list/postApi",
      postUpdateApi: "modules/list/postUpdateApi",
      postApiReturn: "modules/list/postApiReturn",
      chkOpenTabList: "chkOpenTabList"
    }),

    async selectIndvWidgetList(){
      const _this = this;
      const res = await this.postApiReturn({
          apiKey: "selectIndvWidgetList",
          resKey: "widgetData",
          sendParam: {}
      });

      const res2 = await this.postApiReturn({
          apiKey: "selectWidgetPrgmUrl",
          resKey: "widgetData",
          sendParam: {}
      });
      this.widgetPrgmUrlList = res2;
      this.widgetList = res;
      this.widgetCnt = res.length;
      for(var i=0; i<this.widgetList.length; i++){
        for(var j=0; j<this.widgetPrgmUrlList.length; j++){
          if(this.widgetList[i].widgetId == this.widgetPrgmUrlList[j].widgetId){
            eval('_this.prgmId' + i + "= true"); 
          }
        }
        eval('_this.card' + i + "= res["+i+"].widgetId"); 
        eval('_this.widgetId' + i + "= res["+i+"].widgetId");
        if(res[i].widgetReflashMm == null){
          eval('_this.widgetReflashMm' + i + "= 15*60000");  
        }else{
          eval('_this.widgetReflashMm' + i + "= res["+i+"].widgetReflashMm*60000");
        }
        
      }
      // for(var i=0; i<res.length; i++){
      //   eval('_this.card' + i + "= res["+i+"].widgetId"); 
      // }
    },
    async selectWidgetPrgmUrlList(){
      // const _this = this;
      // const res = await this.postApiReturn({
      //     apiKey: "selectWidgetPrgmUrl",
      //     resKey: "widgetData",
      //     sendParam: {}
      // });
      // this.widgetPrgmUrlList = res;
      // for(var i=0; i<this.widgetList.length; i++){
      //   for(var j=0; j<this.widgetPrgmUrlList.length; j++){
      //     if(this.widgetList[i].widgetId == this.widgetPrgmUrlList[j].widgetId){
      //       eval('_this.prgmId' + i + "= true"); 
      //     }
      //   }
      // }
    },
    openWidgetPrgm(widgetId){
      var prgmUrl;
      for(var i=0; i<this.widgetPrgmUrlList.length; i++){
        if(this.widgetPrgmUrlList[i].widgetId == widgetId){
          prgmUrl = this.widgetPrgmUrlList[i].prgmUrl
        }
      }
      this.$router.push({
        path: prgmUrl
      });
    }
  }
};

const defaultData = {
  isFind: false,
};

const myDetail = [

];
</script>

<style lang="scss">
  .swiper-wrapper{
    box-sizing: inherit !important;
  }

  .swiper-pagination-horizontal{
    bottom: 10px;
    left: 0;
    width: 100%;
  }
  .swiper-pagination-bullet{
    width: 15px;
    height: 15px;
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap,5px);
    background: #fff;
  }
  
  .swiper-pagination-bullet-active {
      opacity: 1;
      background: #196dcb;
  }
  // .swiper-position{
  //   position: fixed;
  // }
</style>
