<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 class="white--text">Hierarki Holding : {{xcompany.name}}</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn @click="openFormLevel(0)" icon>
            <v-icon class="white--text">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="25%" class="text-md-center pt-2 pb-2">NAMA</th>
                <th width="35%" class="text-md-center pt-2 pb-2">HIERARKI</th>
                <th width="10%" class="text-md-center pt-2 pb-2">URUTAN</th>
                <th class="text-md-center pt-2 pb-2">AKSI</th>
              </tr>
              <tr v-if="companylevels.length > 0 " v-for="(companylevel,idx) in companylevels">
                <td class="text-md-left pl-3">{{companylevel.name}}</td>
                <td class="text-md-center">{{companylevel.Nat_HierarchyName}}</td>
                <td class="text-md-center">{{companylevel.sequence}}</td>
                <td align="center" class="text-md-center">
                  <v-btn @click="editFormLevel(companylevel)" depressed small color="primary">
                    <v-icon>edit</v-icon>
                  </v-btn>
                  <v-btn @click="deleteLevel(companylevel)" depressed small color="error">
                    <v-icon>delete</v-icon>
                  </v-btn>
                </td>
              </tr>
              <tr v-if="companylevels.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="dialogdeletealertcompanylevel" max-width="30%">
            <v-card>
              <v-card-title class="headline blue lighten-3 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>
                            {{msgalertcompanylevel}}
                          </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   flat @click="dialogdeletealertcompanylevel = false">
                  Tutup
                </v-btn>
                <v-btn  flat @click="closeDeleteAlertLevel()">
                  Yakin lah
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>

        </template>


        <template>
          <v-layout row justify-center>
            <v-dialog v-model="dialogcompanylevel" persistent max-width="600px">
              <v-card>
                <v-card-title>
                  <span class="headline">Form Level</span>
                </v-card-title>
                <v-card-text class="pt-0 pb-0">
                  <v-form ref="formcompanycompanylevel" v-model="validcompanylevel" lazy-validation>
                    <v-layout wrap>
                      <v-flex xs12>
                        HOLDING : {{xcompany.name}}
                      </v-flex>
                      <v-flex xs12>
                        <v-text-field label="Nama" v-model="name"></v-text-field>
                      </v-flex>
                      
                      <v-flex xs12>
                      <v-select item-text="Nat_HierarchyName" return-object :items="xhierarkis" v-model="xhierarki"
                              label="Tipe Hierarki">
                      </v-flex>
                      <v-flex xs12>
                        <v-text-field label="Urutan" v-model="sequence"></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="updateDialogFormLevel()">Tutup</v-btn>
                  <v-btn color="blue darken-1" flat @click="saveFormLevel()">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 = {
    components: {
      'one-date-picker': httpVueLoader('../../common/oneDatePicker.vue')
    },
    data() {
      return {
        query: "",
        items: [],
        headers: [{
            text: "NAME",
            align: "Center",
            sortable: false,
            value: "lab",
            width: "30%",
            class: "blue lighten-4"
          },
          {
            text: "HIERARKI",
            align: "Center",
            sortable: false,
            value: "name",
            width: "30%",
            class: "blue lighten-4"
          },
          {
            text: "URUTAN",
            align: "Center",
            sortable: false,
            value: "name",
            width: "10%",
            class: "blue lighten-4"
          },
          {
            text: "ACTION",
            align: "Center",
            sortable: false,
            value: "status",
            width: "15%",
            class: "blue lighten-4"
          }
        ],
        isLoading: false,
        color: "success",
        validcompanylevel: false,
        xid: 0,
        name: "",
        sequence: "",
        startdate: "",
        enddate: "",
        isbill: "",
         menustartdate: false,
      menuenddate: false,
      date: new Date().toISOString().substr(0, 10),

        dialogdeletealertcompanylevel: false,
        msgalertcompanylevel: ""
      };
    },
    mounted() {
      this.$store.dispatch("companylevel/selecthierarki")
    },
    computed: {
      companylevels() {
        return this.$store.state.companylevel.companylevels
      },
      xcompany() {
        return this.$store.state.company.selected_company
      },
      dialogcompanylevel() {
        return this.$store.state.companylevel.dialog_form_companylevel
      },
      xerrors() {
        return this.$store.state.companylevel.errors
      },
      startComputedDateFormatted () {
            return this.formatDate(this.xstartdate)
        },
         xhierarkis() {
        return this.$store.state.companylevel.hierarkis
      },
      xhierarki: {
        get() {
          return this.$store.state.companylevel.hierarki
        },
        set(val) {
          this.$store.commit("companylevel/update_hierarki", val)
        }

      },
      xstartdate:{
            get() {
                return this.$store.state.companylevel.startdate
            },
            set(val) {
                this.$store.commit("companylevel/update_startdate",val)
            }
        },
      endComputedDateFormatted () {
            return this.formatDate(this.xenddate)
        },
      xenddate:{
            get() {
                return this.$store.state.companylevel.enddate
            },
            set(val) {
                this.$store.commit("companylevel/update_enddate",val)
            }
        }
    },
    methods: {
      updateDialogFormLevel() {
        this.$store.commit("companylevel/update_dialog_form_companylevel", false)
      },
      openFormLevel(val) {
        this.xid = val
        this.name = ''
        this.sequence = ''
        this.startdate = ''
        this.enddate = ''
        this.isbill = ''
        this.$store.commit("companylevel/update_dialog_form_companylevel", true)
      },
      editFormLevel(val) {
        this.xid = val.id
        this.name = val.name
        this.sequence = val.sequence
        var hierarkis = this.$store.state.companylevel.hierarkis
        var idx_hierarki = _.findIndex(hierarkis, function (o) {
          return o.Nat_HierarchyID == val.Nat_HierarchyID
        })
        var hierarki = hierarkis[idx_hierarki]
        this.$store.commit("companylevel/update_hierarki", hierarki)
        this.$store.commit("companylevel/update_dialog_form_companylevel", true)
      },
      saveFormLevel() {
        this.$store.dispatch("companylevel/save", {
          xid: this.xid,
          companyid: this.$store.state.company.selected_company.id,
          companyname: this.$store.state.company.selected_company.name,
          name: this.name,
          sequence: this.sequence,
          hierarkiid: this.xhierarki.Nat_HierarchyID
        })
      },
      set_date2 (x) {
           this.startdate = x.new_date
       },
       set_date3 (x) {
           this.enddate = x.new_date
       },
       formatDate (date) {
          if (!date) return null

          const [year, month, day] = date.split('-')
          return `${day}-${month}-${year}`
      },
      deFormatedDate (date) {
          if (!date) return null

      const [ day,month, year] = date.split('-')
      return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
      },
      updateAlert_success(val) {
        this.$store.commit("company/update_alert_success", val)
      },
      deleteLevel(data) {
        this.xid = data.id

        this.msgalertcompanylevel = "Yakin, mau hapus companylevel ?"
        this.dialogdeletealertcompanylevel = true
      },
      closeDeleteAlertLevel() {
        this.$store.dispatch("companylevel/delete", {
          xid: this.xid,
          companyid: this.$store.state.company.selected_company.id,
          companyname: this.$store.state.company.selected_company.name,
          name: this.name
        })
        this.dialogdeletealertcompanylevel = false
      }
    }
  }
</script>
