<template>
<v-app>
  <v-toolbar>
    <v-toolbar-title>당뇨질환 검사 가이드 시스템</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-toolbar-items>
      <v-btn flat @click="currentView='Main'">메인</v-btn>
      <v-btn flat @click="currentView='DataSeat'">DataSeat</v-btn>
      <v-btn flat @click="currentView='Model'">Model</v-btn>
    </v-toolbar-items>
  </v-toolbar>
  <v-container v-if="currentView=='DataSeat'">
    <v-layout>
      <v-flex>
        <v-subheader>분류 코드</v-subheader>
        <v-data-table
        :headers="[
          {text:'code',value:'BunCd'},
          {text:'name',value:'Name'}
        ]"
        :items="buncode">
          <template slot="items" slot-scope="props">
            <td>{{ props.item.BunCd }}</td>
            <td>{{ props.item.Name }}</td>
          </template>
        </v-data-table>
      </v-flex>
    </v-layout>
    <v-layout>
      <v-flex>
        <v-subheader>pre-processing data</v-subheader>
        <v-data-table
        :headers="[
          {text:'code',value:'code'},
          {text:'name',value:'name'},
          {text:'vaule',value:'value'}
        ]"
        :items="normalRange">
          <template slot="items" slot-scope="props">
            <td>{{props.item.code}}</td>
            <td>{{props.item.name}}</td>
            <td>{{props.item.value}}</td>
          </template>
        </v-data-table>
      </v-flex>
    </v-layout>
  </v-container>
  <v-container fluid v-if="currentView=='Model'">
    <img src="http://13.125.207.44/model.png" alt="" />
  </v-container>
  <v-container v-if="currentView=='Main'">
    <v-layout row>
      <v-flex sm2>
        <v-subheader>검사결과</v-subheader>
      </v-flex>
      <v-flex sm8 >
        <file-input v-model="filename" @formData="formData"/>
        <v-btn @click.native="uploadFiles">predict</v-btn>
      </v-flex>
    </v-layout>
    <v-layout>
      <v-flex v-show="!initial && !isPredicting">
        <v-list>
        <template v-for="(item, index) in insJson" >
          <v-list-tile :key="index">
            <v-list-tile-content>
              {{"검사명 : " +item.name + ", 검사결과 : " + item.value}}
            </v-list-tile-content>
          </v-list-tile>
        </template>
        </v-list>
      </v-flex>
      
    </v-layout>
    <v-layout>
      <v-flex >
        <v-subheader>예측결과</v-subheader>
        <div v-show="!initial &&!isPredicting" style="font-size:30px;">
          {{probList[0]? (probList[0].buncode + " (" + 100*(probList[0].prob) + " %) "):''}}
        </div>
        <v-progress-circular v-show="isPredicting" :size="50" indeterminate color="primary"></v-progress-circular>
      </v-flex>
    </v-layout>
  </v-container>
  <v-container fluid>
    <v-layout v-if="!initial &&!isPredicting">
      <v-flex xs6>
        <v-card>
          <v-card-media 
          :src="'http://13.125.207.44/top3_bar_plot.png?'+Math.random()" 
          height="700px"
          contain>
          </v-card-media>
        </v-card>
      </v-flex>
      <v-flex xs6>
        <v-card>
          <v-card-media 
          :src="'http://13.125.207.44/total_bar_plot.png?'+Math.random()" 
          height="700px"
          contain>
          </v-card-media>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</v-app>
</template>

<script>
import fileInput from './file-input.vue'

export default {
  name: 'Main',
  components:{fileInput},
  data () {
    return {
      currentView: 'Main',
      filename: '',
      formDatas: null,
      insJson: [],
      probList: [],
      isPredicting: false,
      initial:true,
      buncode: require('../assets/buncode.json'),
      normalRange: require('../assets/normal_value_delete_version_utf8.csv')
    }
  },
  methods:{
    formData(form){
      this.formDatas = form[0];
    },
    uploadFiles(){
      this.formDatas.forEach((val)=>{
        this.readTextFile(val);
      })
      
    },
    readTextFile(file){     
      var reader = new FileReader();
      reader.onload = (e)=> {
        var text = reader.result;
        this.insJson=JSON.parse(text);
      }
      reader.readAsText(file);
    }
  },
  watch:{
    insJson(prev){
      this.probList=[];
      this.isPredicting=true;
      fetch('http://13.125.207.44/getPredict',{
        method:'POST',
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(this.insJson) 
      })
      .then((res)=>res.json())
      .then((json)=>{
        let tmp1 = json.ret1.split('|');
        let tmp2 = json.res2.split('|');
        for(let i=0;i<tmp1.length;i++){
          this.probList.push({
            code:tmp2[i],
            prob:Number(tmp1[i]),
            buncode:tmp2[i].split(',').map((code)=>this.buncode.find((val)=>val.BunCd==code).Name).join(',')
          });
        }
        this.probList.sort((a,b)=> (b.prob-a.prob));
        this.isPredicting=false;
        this.initial=false;
      })
    }
  }
}
</script>

<style scoped>

</style>