<template>
 <v-layout >
 <v-flex xs12 >
 <v-card  class="mb-2" color="white"  >
    <v-toolbar  color="blue lighten-3" dark height="50px">
    <v-toolbar-title>Station : {{xstation.name}}</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-btn @click="openFormBahan(0)" icon>
      <v-icon>library_add</v-icon>
    </v-btn>
  </v-toolbar>

  <v-layout row wrap>
    <v-flex class="border-bottom-dashed" xs12 pt-2 pl-4 pr-4 pb-4>
          <table>
              <tr>
                <th width="15%" class="text-md-center pt-2 pb-2">KODE</th>
                <th  width="60%" class="text-md-center pt-2 pb-2">BAHAN</th>
                <th  class="text-md-center pt-2 pb-2">AKSI</th>
              </tr>
              <tr v-if="bahans.length > 0 " v-for="(bahan,idx) in bahans">
                <td class="text-md-center">{{bahan.code}}</td>
                <td class="text-md-left  pl-3">{{bahan.name}}</td>

                <td align="center" class="text-md-center">
                  <v-btn @click="editFormBahan(bahan)"  fab dark small color="primary"><v-icon>edit</v-icon></v-btn>
                  <v-btn @click="deleteBahan(bahan)"  fab dark small color="error"><v-icon>delete</v-icon></v-btn>
                </td>
              </tr>
              <tr v-if="bahans.length === 0"><td align="center" style="height:50px;text-align:center" colspan="8">Belum ada data</td> </tr>
          </table>
    </v-flex>
  </v-layout>
   <template>

    <v-dialog
      v-model="dialogdeletealertbahan"
      max-width="30%"
    >
        <v-card>
            <v-card-title
                class="headline grey lighten-2 pt-2 pb-2"
                primary-title
            >
            Peringatan !
            </v-card-title>
            <v-card-text class="pt-2 pb-2">
                <v-layout row>
                    <v-flex xs12 d-flex>
                        <v-layout row>
                            <v-flex pb-1 xs12>
                                <v-layout row>
                                    <v-flex pt-2 pr-2 xs12>
                                       {{msgalertbahan}}
                                    </v-flex>
                                </v-layout>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                </v-layout>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn
                    color="primary"
                    flat
                    @click="dialogdeletealertbahan = false"
                >
                Tutup
                </v-btn>
                <v-btn
                    color="primary"
                    flat
                    @click="closeDeleteAlertBahan()"
                >
                Yakin lah
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>

</template>


  <template>
    <v-layout row justify-center>
      <v-dialog v-model="dialogbahan" persistent max-width="600px">
        <v-card>
          <v-card-title>
            <span class="headline">Form Bahan</span>
          </v-card-title>
          <v-card-text class="pt-0 pb-0">
          <v-form
              ref="formstationbahan"
              v-model="validbahan"
              lazy-validation
            >
            <v-layout wrap>
                <v-flex xs12>
                  STATION : {{xstation.name}}
                </v-flex>
                <v-flex xs12>
                  <v-text-field label="Kode" v-model="code"   ></v-text-field>
                </v-flex>
				<v-flex xs12>
                  <v-text-field label="Nama" v-model="name"   ></v-text-field>
                </v-flex>

                <v-flex>
                  <p v-for="(xerror,idx) in xerrors" class="error pl-2 pr-2" style="color:#fff">{{xerror.msg}}</p>
                </v-flex>
            </v-layout>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="blue darken-1" flat @click="updateDialogFormBahan()">Tutup</v-btn>
            <v-btn color="blue darken-1" flat @click="saveFormBahan()">Simpan</v-btn>
          </v-card-actions>
          </v-form>
        </v-card>
      </v-dialog>
    </v-layout>
  </template>

  <template>
    <v-layout row justify-center>
      <v-dialog v-model="dialogbahanedit" persistent max-width="600px">
        <v-card>
          <v-card-title>
            <span class="headline">Form Bahan</span>
          </v-card-title>
          <v-card-text class="pt-0 pb-0">
          <v-form
              ref="formstationbahan"
              v-model="validbahan"
              lazy-validation
            >
            <v-layout wrap>

                <v-flex xs12>
                <v-select item-text= "name" return-object :items="xstationnames"
                          item-value= "id"
                   v-model="xstationname" label="Station" ></v-select>
                </v-flex>
                <v-flex xs12>
                  <v-text-field readonly label="Kode" v-model="code"   ></v-text-field>
                </v-flex>

		<v-flex xs12>
                  <v-text-field readonly label="Nama" v-model="name"   ></v-text-field>
                </v-flex>



                <v-flex>
                  <p v-for="(xerror,idx) in xerrors" class="error pl-2 pr-2" style="color:#fff">{{xerror.msg}}</p>
                </v-flex>
            </v-layout>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="blue darken-1" flat @click="closeDialogEditBahan()">Tutup</v-btn>
            <v-btn color="blue darken-1" flat @click="saveEditBahan()">Simpan</v-btn>
          </v-card-actions>
          </v-form>
        </v-card>
      </v-dialog>
    </v-layout>
  </template>



 </v-card>
 </v-flex>



</v-layout>
</template>

<style scoped>
.searchbox .v-input.v-text-field .v-input__slot{
   min-height:60px;
}
.searchbox .v-btn {
   min-height:60px;
}


table {
   font-family: arial, sans-serif;
   border-collapse: collapse;
   width: 100%;
   background:white;
   border: 0px;
}

th, td {
   border: 1px solid black;
   border-collapse: collapse;
   padding-top: 2px;
   padding-bottom: 2px;
}
table>tr>td {
   padding: 8px;
}
table>tr>td:first {
   padding-left:15px!important;
}

</style>

<script>
module.exports = {
   data() {
      return {
         query: "",
         items: [],
         headers: [
            {
               text: "KODE",
               align: "Left",
               sortable: false,
               value: "code",
               width: "30%",
               class: " blue lighten-4"
            },
            {
               text: "NAMA",
               align: "Left",
               sortable: false,
               value: "name",
               width: "30%",
               class: "blue lighten-4"
            } ,

            {
               text: "Action",
               align: "Center",
               sortable: false,
               value: "status",
               width: "15%",
               class: "blue lighten-4"
            }
         ],
          isLoading: false,
          color:"success",
          validbahan:false,
          xid:0,
          code:"",
          name:"",

          dialogdeletealertbahan:false,
          msgalertbahan:""
      };
   },
   computed: {
      dialogbahanedit() {
          return this.$store.state.bahan.dialog_form_bahan_edit
      },
      bahans() {
          return this.$store.state.bahan.bahans
      },
      xstation(){
        return this.$store.state.station.selected_station
      },
       dialogbahan(){
        return this.$store.state.bahan.dialog_form_bahan
      },
      xerrors() {
          return this.$store.state.bahan.errors
      },
      xstationnames() {
          return  this.$store.state.station.stations
      },
      xstationname: {
          get() {
              return this.$store.state.station.selected_station
          },
          set(val) {
              var xval = val
              console.log('set',xval)
              if ( val == undefined ) {
                 for(var i=0; i< this.xstationnames.length ; i++ ) {
                    var xs = this.xstationnames[i]
                    console.log('xs',xs);
                    //if (xs.id == val ) {
                    //   xval = xs
                    //}
                 }
              }
             this.$store.commit("bahan/update_selected_stationname",xval)
          }
      }


  },
  methods : {
    updateDialogFormBahan(){
       this.$store.commit("bahan/update_dialog_form_bahan",false)
    },
    openFormBahan(val){
      this.xid = val
      this.code = ''
      this.name = ''
      this.$store.commit("bahan/update_dialog_form_bahan",true)
    },
    editFormBahan(val){
      this.$store.commit("bahan/update_error_code",false)

      this.$store.commit("bahan/update_error_name",false)
      this.$store.commit("bahan/update_error_xstationname",false)
      console.log('edit ',val)
      this.xid = val.id
      this.code = val.code
      this.name = val.name
      this.xstationname = val.stationid
      this.$store.commit("bahan/update_dialog_form_bahan_edit",true)
    },
    closeDialogEditBahan() {
      this.$store.commit("bahan/update_dialog_form_bahan_edit",false)
    },
    saveEditBahan() {
      this.$store.dispatch("bahan/save_edit",{
             xid:this.xid,
            stationid:this.$store.state.station.selected_station.id,
            stationname:this.$store.state.station.selected_station.name,
            code:this.code,
			name:this.name,
            xstationname:this.xstationname
          })
    },
    saveFormBahan(){
      this.$store.dispatch("bahan/save",{
            xid:this.xid,
            stationid:this.$store.state.station.selected_station.id,
            stationname:this.$store.state.station.selected_station.name,
            code:this.code,
			name:this.name
          })
    },
    updateAlert_success(val){
      this.$store.commit("station/update_alert_success",val)
    },
    deleteBahan(data){
      this.xid = data.id
      this.msgalertbahan = "Yakin, mau hapus ?"
      this.dialogdeletealertbahan = true
    },
    closeDeleteAlertBahan(){
      this.$store.dispatch("bahan/delete",{
            xid:this.xid,
            stationid:this.$store.state.station.selected_station.id,
            stationname:this.$store.state.station.selected_station.name,
            name:this.name
          })
      this.dialogdeletealertbahan = false
    }
  }
}
</script>
