<template>

  <div class="contents">
    <div class="contents_wrap">
      <div class="top_wrap">
        <h3 class="title">실시간발송내역</h3>
        <p class="breadcrumb">모니터링 &gt; 실시간발송내역</p>
      </div>
      <div class="title_wrap">
        <h3>발송집계</h3>
        <div class="select_box NumberSe">
          <p>자동갱신시간</p>
          <select name="" id="" @change="switchSelect($event)" v-model="selectedKey">
            <option value="10">10분</option>
            <option value="20">20분</option>
            <option value="30">30분</option>
          </select>
        </div>
      </div>
      <div class="info">
        <div class="count">최근 10분 발송 현황
          <p>{{startTimeM}} ~ {{endTimeM}}</p></div>
      </div>
      <div class="table">
        <table>
          <colgroup>
            <col width="25%"/>
            <col width="25%"/>
            <col width="25%"/>
            <col width="25%"/>
          </colgroup>
          <thead>
          <tr>
            <th>채널</th>
            <th>발송건수</th>
            <th>성공건수</th>
            <th>성공율</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>SMS</td>
            <td>{{ sendingCntSmsM }}</td>
            <td>{{ succesCntSmsM }}</td>
            <td>{{ succesRtSmsM }}%</td>
          </tr>
          <tr>
            <td>LMS</td>
            <td>{{ sendingCntLmsM }}</td>
            <td>{{ succesCntLmsM }}</td>
            <td>{{ succesRtLmsM }}%</td>
          </tr>
          <tr>
            <td>MMS</td>
            <td>{{ sendingCntMmsM }}</td>
            <td>{{ succesCntMmsM }}</td>
            <td>{{ succesRtMmsM }}%</td>
          </tr>
          <tr>
            <td>알림톡</td>
            <td>{{ sendingCntAlmtM }}</td>
            <td>{{ succesCntAlmtM }}</td>
            <td>{{ succesRtAlmtM }}%</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="info">
        <div class="count">최근 1시간 발송 현황
          <p>{{startTimeH}} ~ {{endTimeH}}</p></div>
      </div>
      <div class="table">
        <table>
          <colgroup>
            <col width="25%"/>
            <col width="25%"/>
            <col width="25%"/>
            <col width="25%"/>
          </colgroup>
          <thead>
          <tr>
            <th>채널</th>
            <th>발송건수</th>
            <th>성공건수</th>
            <th>성공율</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>SMS</td>
            <td>{{ sendingCntSmsH }}</td>
            <td>{{ succesCntSmsH }}</td>
            <td>{{ succesRtSmsH }}%</td>
          </tr>
          <tr>
            <td>LMS</td>
            <td>{{ sendingCntLmsH }}</td>
            <td>{{ succesCntLmsH }}</td>
            <td>{{ succesRtLmsH }}%</td>
          </tr>
          <tr>
            <td>MMS</td>
            <td>{{ sendingCntMmsH }}</td>
            <td>{{ succesCntMmsH }}</td>
            <td>{{ succesRtMmsH }}%</td>
          </tr>
          <tr>
            <td>알림톡</td>
            <td>{{ sendingCntAlmtH }}</td>
            <td>{{ succesCntAlmtH }}</td>
            <td>{{ succesRtAlmtH }}%</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="info">
        <div class="count">당일 발송 현황
          <p>{{startTimeD}} ~ {{endTimeD}}</p></div>
      </div>
      <div class="table">
        <table>
          <colgroup>
            <col width="25%"/>
            <col width="25%"/>
            <col width="25%"/>
            <col width="25%"/>
          </colgroup>
          <thead>
          <tr>
            <th>채널</th>
            <th>발송건수</th>
            <th>성공건수</th>
            <th>성공율</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>SMS</td>
            <td>{{ sendingCntSmsD }}</td>
            <td>{{ succesCntSmsD }}</td>
            <td>{{ succesRtSmsD }}%</td>
          </tr>
          <tr>
            <td>LMS</td>
            <td>{{ sendingCntLmsD }}</td>
            <td>{{ succesCntLmsD }}</td>
            <td>{{ succesRtLmsD }}%</td>
          </tr>
          <tr>
            <td>MMS</td>
            <td>{{ sendingCntMmsD }}</td>
            <td>{{ succesCntMmsD }}</td>
            <td>{{ succesRtMmsD }}%</td>
          </tr>
          <tr>
            <td>알림톡</td>
            <td>{{ sendingCntAlmtD }}</td>
            <td>{{ succesCntAlmtD }}</td>
            <td>{{ succesRtAlmtD }}%</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import customGrid from '@/components/CustomGrid';
import mntrngApi from "../service/mntrngApi.js";
//import api from '../service/api';
export default {
  name: 'liveSendSttus',
  data() {
    return {
      selectedKey:10,
      timer: '',

      startTimeM: '',
      endTimeM: '',
      sendingCntSmsM: '0',
      succesCntSmsM: '0',
      succesRtSmsM: '0',
      sendingCntMmsM: '0',
      succesCntMmsM: '0',
      succesRtMmsM: '0',
      sendingCntLmsM: '0',
      succesCntLmsM: '0',
      succesRtLmsM: '0',
      sendingCntAlmtM: '0',
      succesCntAlmtM: '0',
      succesRtAlmtM: '0',
      
      startTimeH: '',
      endTimeH: '',
      sendingCntSmsH: '0',
      succesCntSmsH: '0',
      succesRtSmsH: '0',
      sendingCntMmsH: '0',
      succesCntMmsH: '0',
      succesRtMmsH: '0',
      sendingCntLmsH: '0',
      succesCntLmsH: '0',
      succesRtLmsH: '0',
      sendingCntAlmtH: '0',
      succesCntAlmtH: '0',
      succesRtAlmtH: '0',

      startTimeD: '',
      endTimeD: '',
      sendingCntSmsD: '0',
      succesCntSmsD: '0',
      succesRtSmsD: '0',
      sendingCntMmsD: '0',
      succesCntMmsD: '0',
      succesRtMmsD: '0',
      sendingCntLmsD: '0',
      succesCntLmsD: '0',
      succesRtLmsD: '0',
      sendingCntAlmtD: '0',
      succesCntAlmtD: '0',
      succesRtAlmtD: '0',

    };
  },  
  components: {
    customGrid: customGrid
  },
  created(){
	  this.getLiveSendSttus();
    this.timer = setInterval(this.getLiveSendSttus, this.selectedKey * 1000 * 60)

  },
  beforeDestroy (){
      clearInterval(this.timer)
  },
  destroyed() {
      
  },
  mounted() {

  },
  methods: {
    async getLiveSendSttus(){
		  try {
			  const response = await mntrngApi.liveSendSttus();
			  const result = response.data;
			  if (result != null && result.retCode == "0000") {				 
          
          this.startTimeM = result.data.startTimeM;
          this.endTimeM = result.data.endTimeM;
          this.sendingCntSmsM = result.data.sendingCntSmsM;
          this.succesCntSmsM = result.data.succesCntSmsM;
          this.succesRtSmsM = result.data.succesRtSmsM;
          this.sendingCntMmsM = result.data.sendingCntMmsM;
          this.succesCntMmsM = result.data.succesCntMmsM;
          this.succesRtMmsM = result.data.succesRtMmsM;
          this.sendingCntLmsM = result.data.sendingCntLmsM;
          this.succesCntLmsM = result.data.succesCntLmsM;
          this.succesRtLmsM = result.data.succesRtLmsM;
          this.sendingCntAlmtM = result.data.sendingCntAlmtM;
          this.succesCntAlmtM = result.data.succesCntAlmtM;
          this.succesRtAlmtM = result.data.succesRtAlmtM;

          this.startTimeH = result.data.startTimeH;
          this.endTimeH = result.data.endTimeH;
          this.sendingCntSmsH = result.data.sendingCntSmsH;
          this.succesCntSmsH = result.data.succesCntSmsH;
          this.succesRtSmsH = result.data.succesRtSmsH;
          this.sendingCntMmsH = result.data.sendingCntMmsH;
          this.succesCntMmsH = result.data.succesCntMmsH;
          this.succesRtMmsH = result.data.succesRtMmsH;
          this.sendingCntLmsH = result.data.sendingCntLmsH;
          this.succesCntLmsH = result.data.succesCntLmsH;
          this.succesRtLmsH = result.data.succesRtLmsH;
          this.sendingCntAlmtH = result.data.sendingCntAlmtH;
          this.succesCntAlmtH = result.data.succesCntAlmtH;
          this.succesRtAlmtH = result.data.succesRtAlmtH;

          this.startTimeD = result.data.startTimeD;
          this.endTimeD = result.data.endTimeD;
          this.sendingCntSmsD = result.data.sendingCntSmsD;
          this.succesCntSmsD = result.data.succesCntSmsD;
          this.succesRtSmsD = result.data.succesRtSmsD;
          this.sendingCntMmsD = result.data.sendingCntMmsD;
          this.succesCntMmsD = result.data.succesCntMmsD;
          this.succesRtMmsD = result.data.succesRtMmsD;
          this.sendingCntLmsD = result.data.sendingCntLmsD;
          this.succesCntLmsD = result.data.succesCntLmsD;
          this.succesRtLmsD = result.data.succesRtLmsD;
          this.sendingCntAlmtD = result.data.sendingCntAlmtD;
          this.succesCntAlmtD = result.data.succesCntAlmtD;
          this.succesRtAlmtD = result.data.succesRtAlmtD;
			} else {
			}
		} catch(err) {
		}
	},
  switchSelect: function(event) {
      this.selectedKey = event.target.value;
      this.changeAutoUpdate();
  },
  cancelAutoUpdate () {
      clearInterval(this.timer)
  },
  changeAutoUpdate () {
      clearInterval(this.timer)
      this.timer = setInterval(this.getLiveSendSttus, this.selectedKey * 1000 * 60)
  }

  },
  
};
</script>