<template>
  <v-layout>
    <template>

      <v-dialog v-model="dialogdeletealert" 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>
                        {{msgalert}}
                      </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="dialogdeletealert = false">
              Tutup
            </v-btn>
            <v-btn color="primary" flat @click="closeDeleteAlert()">
              Yakin lah
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>

    </template>


    <v-flex xs12>
      <v-card class="scroll-container" style="/*max-height:645px;overflow: auto;*/">
        <v-toolbar color="blue lighten-3" dark height="50px">
          <v-toolbar-title>KEL. PELANGGAN</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn @click="openFormPerusahaan()" icon>
            <v-icon>library_add</v-icon>
          </v-btn>
        </v-toolbar>
        <v-snackbar v-model="snackbar" :color="color" :timeout="5000" :multi-line="false" :vertical="false" :top="true">
          {{msgsnackbar}}
          <v-btn flat @click="updateAlert_success(false)">
            Tutup
          </v-btn>
        </v-snackbar>
        <v-layout row style="background:#bbdefb;padding-top:5px;" justify-left>
          <v-list-tile>
            <input type="text" v-model="xsearch" class="textinput" placeholder="Cari ..." />
            </v-list-tile-content>
          </v-list-tile>
        </v-layout>
        <v-divider></v-divider>
        <div v-for="(vs,index) in vcompanys">

          <v-layout pa-2 v-if="isSelected(vs)" row>
            <v-flex xs12 @click="selectMe(vs)">
              <v-layout row>
                <v-flex class="boxsolid" xs10>
                  <v-tooltip right>
                    <template v-slot:activator="{ on }">
                      <span v-html="vs.description" v-on="on"></span>
                    </template>
                    <span>{{vs.name}}</span>
                  </v-tooltip>
                </v-flex>
                <v-flex class="boxsolid text-center" style="padding-top:10px" pl-1 pb-1 pr-1 xs2>
                  <v-layout row align-center justify-space-between>
                    <v-icon style="color:#ffffff" @click="editPerusahaan(vs)">edit</v-icon>
                    <v-icon style="color:#ffffff" @click="deletePerusahaan(vs)">clear</v-icon>
                  </v-layout>
                </v-flex>
              </v-layout>
            </v-flex>
          </v-layout>



          <v-layout pa-2 v-if="!isSelected(vs)" row>
            <v-flex xs12 @click="selectMe(vs)">
              <v-layout row>
                <v-flex class="boxoutline" xs10>
                  <v-tooltip right>
                    <template v-slot:activator="{ on }">
                      <span v-html="vs.description" v-on="on"></span>
                    </template>
                    <span>{{vs.name}}</span>
                  </v-tooltip>
                </v-flex>
                <v-flex class="boxoutline text-center" style="padding-top:10px" pl-1 pb-1 pr-1 xs2>
                  <v-layout row align-center justify-space-between>
                    <v-icon style="color:red" @click="editPerusahaan(vs)">edit</v-icon>
                    <v-icon style="color:red" @click="deletePerusahaan(vs)">clear</v-icon>
                  </v-layout>
                </v-flex>
              </v-layout>
            </v-flex>
          </v-layout>
          <v-divider></v-divider>
        </div>
        <v-layout row>
          <v-flex class="text-xs-center" pt-3 xs12>
            <p style="margin-bottom:2px;color: rgba(0,0,0,0.54);font-size:12px;">Menampilkan <span class="red--text">{{xtotalfiltercompanys}}</span> dari <span class="red--text">{{xtotalcompanys}}</span>              total data</p>
            <v-btn small v-if="xshowall === 'N'" flat @click="updateShowAll('Y')" color="primary" dark>Tampilkan Semua</v-btn>
            <v-btn small v-if="xshowall === 'Y'" flat @click="updateShowAll('N')" color="primary" dark>Batasi data</v-btn>
          </v-flex>
        </v-layout>


        <template>
          <v-layout row justify-center>
            <v-dialog v-model="dialogcompany" persistent max-width="600px">
              <v-card>
                <v-card-title>
                  <span class="headline">Form Kelompok Pelanggan</span> <span> &nbsp;[ <span style="color:#2196F3;font-weight: 900;">{{companynumber}} </span>&nbsp;]
                </v-card-title>
                <v-card-text class="pt-0 pb-0">
                  <v-form ref="formcompany" v-model="valid" lazy-validation>
                    <v-layout wrap>
                      <v-flex xs12>
                        <v-layout>
                          <v-flex xs6 pa-1>
                            <v-text-field v-model="companyname" label="Nama*" :rules="nameRules" required></v-text-field>
                          </v-flex>
                          <v-flex xs6 pa-1>
                            <v-text-field v-model="idparent" label="ID Induk"></v-text-field>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                      <v-flex xs12>
                        <v-layout>
                          <v-flex xs6 pa-1>
                            <v-select item-text="M_CompanyTypeName" return-object :items="xcompanytypes" v-model="xcompanytype" label="Status Kepemilikan"></v-select>
                          </v-flex>
                         <!--  <v-flex xs2 pa-1>
                           <span @click="addCompanyType" class="icon-medium-fill-base xs1 white--text primary  ml-1 icon-add"></span> 
                          </v-flex> -->
                          <v-flex xs6 pa-1>
                            <v-select item-text="M_CompanyBusinessName" return-object :items="xcompanybusinesss" v-model="xcompanybusiness" label="Jenis Bidang Usaha"></v-select>
                          </v-flex>
                         <!--  <v-flex xs2 pa-1>
                           <span @click="addCompanyBusiness" class="icon-medium-fill-base xs1 white--text primary  ml-1 icon-add"></span> 
                          </v-flex> -->
                        </v-layout>
                      </v-flex>
                      <v-flex xs12>
                        <v-layout>
                          <v-flex xs6 pa-1>
                            <v-select item-text="Nat_HierarchyName" return-object :items="xhierarkis" v-model="xhierarki" label="Hierarki*" :rules="hierarkiRules" required></v-select>
                          </v-flex>
                          <v-flex xs6 pa-1>
                            <v-autocomplete label="" v-if="this.xhierarki && this.xhierarki.Nat_HierarchyName !== 'Holding'" v-model="xcompanylevel"
                              :items="xcompanylevels" :search-input.sync="search_companylevel" auto-select-first no-filter
                              item-text="Nat_CompanyLevelNames" return-object :loading="isLoading" no-data-text="Pilih Hierarki">
                              <template slot="item" slot-scope="{ item }">
                                <v-list-tile-content>
                                  <v-list-tile-title v-text="item.Nat_CompanyLevelNames"></v-list-tile-title>
                                </v-list-tile-content>
                              </template>
                            </v-autocomplete>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                      <v-flex xs12 pa-1>
                        <v-select :search-input.sync="searchxStaff" item-text="M_StaffName" return-object :items="xstaffs" v-model="xstaff" label="Marketer Staff*" autocomplete :rules="staffRules" required></v-select>
                      </v-flex>
                      <v-flex xs12>
                        <v-layout>
                          <v-flex xs6 pa-1>
                            <v-select :search-input.sync="searchxProvince" item-text="M_ProvinceName" return-object :items="xprovinces" v-model="provinceaddress" label="Provinsi*" autocomplete :rules="provinceRules" required></v-select>
                          </v-flex>
                          <v-flex xs6 pa-1>
                            <v-select :search-input.sync="searchxCity" item-text="M_CityName" return-object :items="xcitys" v-model="cityaddress" label="Kota*" autocomplete :rules="cityRules" required></v-select>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                      <v-flex xs12>
                        <v-layout>
                          <v-flex xs6 pa-1>
                            <v-select :search-input.sync="searchxDistrict" item-text="M_DistrictName" return-object :items="xdistricts" v-model="districtaddress" label="Kecamatan*" autocomplete :rules="districtRules" required></v-select>
                          </v-flex>
                          <v-flex xs6 pa-1>
                            <v-select :search-input.sync="searchxKelurahan" item-text="M_KelurahanName" return-object :items="xkelurahans" v-model="kelurahanaddress" label="Kelurahan / Desa*" autocomplete :rules="kelurahanRules" required></v-select>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                      <v-flex xs12>
                        <v-textarea :rules="addressRules" required v-model="companyaddress" label="Alamat"></v-textarea>
                      </v-flex>
                      <v-flex xs12>
                        <v-layout>
                          <v-flex xs4 pa-1>
                            <v-text-field v-model="companyemail" label="Email"></v-text-field>
                          </v-flex>
                          <v-flex xs4 pa-1>
                            <v-text-field v-model="companyphone" label="Telpon"></v-text-field>
                          </v-flex>
                          <v-flex xs4 pa-1>
                            <v-text-field v-model="companyfax" label="Fax"></v-text-field>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                      <v-flex xs12>
                        <v-checkbox v-model="isdefault" label="Default?"></v-checkbox>
                      </v-flex>
                      <!-- <v-flex xs12>
                        <v-checkbox v-model="islabto" label="Rekanan Tujuan ?"></v-checkbox>

                      </v-flex>
                      <v-flex xs12>
                        <v-layout>
                          <v-flex xs6 pa-1>
                            <v-checkbox v-model="islabfrom" label="Rekanan Yang Merujuk?"></v-checkbox>
                          </v-flex>
                          <v-flex xs6 pa-1>
                            <v-autocomplete v-if="this.islabfrom === true" label="Dokter" v-model="doctor" :items="xdoctors" :search-input.sync="search_doctor"
                              auto-select-first no-filter item-text="M_DoctorNames" return-object :loading="isLoading" no-data-text="Pilih Dokter">
                              <template slot="item" slot-scope="{ item }">
                                <v-list-tile-content>
                                  <v-list-tile-title v-text="item.M_DoctorNames"></v-list-tile-title>
                                </v-list-tile-content>
                              </template>
                            </v-autocomplete>
                          </v-flex>
                        </v-layout>
                      </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="updateDialogFormPerusahaan()">Tutup</v-btn>
                  <v-btn v-if="xact === 'new'" color="blue darken-1" flat @click="saveFormPerusahaan()">Simpan</v-btn>
                  <v-btn v-if="xact === 'edit'" color="blue darken-1" flat @click="updateFormPerusahaan()">Simpan Perubahan</v-btn>
                </v-card-actions>
                </v-form>
              </v-card>
            </v-dialog>


            <v-dialog v-model="dialogcompanytype" persistent max-width="600px">
              <v-card>
                <v-card-title>
                  <span class="headline">Jenis Badan Usaha</span>
                </v-card-title>
                <v-card-text class="pt-0 pb-0">
                  <v-form ref="formcompanytype">
                    <v-layout wrap>
                      <v-flex xs12>
                        <v-layout>
                          <v-flex xs6 pa-1>
                            <v-text-field v-model="companytypename" label="Nama"></v-text-field>
                          </v-flex>
                          <v-flex xs6 pa-1>
                            <span @click="saveFormCompanyType()" class="icon-medium-fill-base xs1 white--text primary  ml-1 icon-save"></span>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                      <v-layout row wrap>
                        <v-flex xs12 pt-2 pb-1>
                          <table style="
                                        font-family: arial, sans-serif;
                                        border-collapse: collapse;
                                        width: 100%;
                                        border: 0px;
                                    " class="px">
                            <tr>
                              <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;" width="40%" class="pa-2 blue lighten-1 white--text">BADAN USAHA
                              </td>
                              <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;" width="20%" class="pa-2 blue lighten-1 white--text">AKSI
                              </td>
                            </tr>
                            <tr class="mini-input" v-for="(vpx,idx) in xcompanytypes">
                              <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;
                                                        padding: 8px;
                                                        text-align:left;
                                                        vertical-align:left;" align="left">
                                <v-text-field style="margin-top:0;padidng-top:0" v-model="vpx.M_CompanyTypeName" hide-details></v-text-field>
                              </td>
                              <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;
                                                        padding: 8px;" class="text-md-center pr-2">
                                <v-icon color="blue" @click="updateFormCompanyType(vpx)">edit</v-icon>
                                <v-icon color="#c75c3a" :disabled="vpx.used != 0" @click="deleteFormCompanyType(vpx)">delete</v-icon>
                              </td>
                            </tr>
                            <tfoot>
                            </tfoot>
                          </table>
                        </v-flex>
                      </v-layout>
                </v-card-text>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="blue darken-1" flat @click="updateDialogFormCompanyType()">Tutup</v-btn>

                </v-card-actions>
                </v-form>
              </v-card>
            </v-dialog>


            <v-dialog v-model="dialogcompanybusiness" persistent max-width="600px">
              <v-card>
                <v-card-title>
                  <span class="headline">Bidang Usaha</span>
                </v-card-title>
                <v-card-text class="pt-0 pb-0">
                  <v-form ref="formcompanybusiness">
                    <v-layout wrap>
                      <v-flex xs12>
                        <v-layout>
                          <v-flex xs6 pa-1>
                            <v-text-field v-model="companybusinessname" label="Nama"></v-text-field>
                          </v-flex>
                          <v-flex xs6 pa-1>
                            <span @click="saveFormCompanyBusiness()" class="icon-medium-fill-base xs1 white--text primary  ml-1 icon-save"></span>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                      <v-layout row wrap>
                        <v-flex xs12 pt-2 pb-1>
                          <table style="
                                        font-family: arial, sans-serif;
                                        border-collapse: collapse;
                                        width: 100%;
                                        border: 0px;
                                    " class="px">
                            <tr>
                              <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;" width="40%" class="pa-2 blue lighten-1 white--text">BIDANG USAHA
                              </td>
                              <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;" width="20%" class="pa-2 blue lighten-1 white--text">AKSI
                              </td>
                            </tr>
                            <tr class="mini-input" v-for="(vpx,idx) in xcompanybusinesss">
                              <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;
                                                        padding: 8px;
                                                        text-align:left;
                                                        vertical-align:left;" align="left">
                                <v-text-field style="margin-top:0;padidng-top:0" v-model="vpx.M_CompanyBusinessName" hide-details></v-text-field>
                              </td>
                              <td style="border: 1px solid #fff;
                                                        border-collapse: collapse;
                                                        padding-top: 2px;
                                                        padding-bottom: 2px;
                                                        padding: 8px;" class="text-md-center pr-2">
                                <v-icon color="blue" @click="updateFormCompanyBusiness(vpx)">edit</v-icon>
                                <v-icon color="#c75c3a" :disabled="vpx.used != 0" @click="deleteFormCompanyBusiness(vpx)">delete</v-icon>
                              </td>
                            </tr>
                            <tfoot>
                            </tfoot>
                          </table>
                        </v-flex>
                      </v-layout>
                </v-card-text>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="blue darken-1" flat @click="updateDialogFormCompanyType()">Tutup</v-btn>

                </v-card-actions>
                </v-form>
              </v-card>
            </v-dialog>

            </v-layout>
        </template>

      </v-card>
    </v-flex>
    </v-layout>
</template>

<style scoped>
  .textinput {
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    background-color: white;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding-left: 40px;
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 5px;
    box-sizing: border-box;
    border: 1px solid #607d8b;

  }

  .textinput:focus {
    width: 100%;
  }

  .textinput:focus::-webkit-input-placeholder {
    color: transparent;
  }

  .textinput:focus::-moz-placeholder {
    color: transparent;
  }

  .textinput:-moz-placeholder {
    color: transparent;
  }

  .boxoutline {
    color: red;
    border: 1px solid red;
    justify-content: center;
    height: 45px;
    line-height: 45px;
    padding-left: 10px;
    background: #ffffff;
    font-size: 14px;
    font-weight: 500;
    border-radius: 1px
  }

  .boxoutline:hover {
    background: rgba(0, 0, 0, 0.07) !important;
    font-size: 15px;
    font-weight: 700;
  }

  .boxsolid {
    color: #ffffff;
    border: 1px solid #ffffff;
    justify-content: center;
    height: 45px;
    line-height: 45px;
    padding-left: 10px;
    background: #f44336;
    font-size: 14px;
    font-weight: 500;
    border-radius: 1px
  }

  .boxsolid:hover {
    background: #f44336de;
    font-size: 15px;
    font-weight: 700;
  }

  .scroll-container {
    scroll-padding: 50px 0 0 50px;
  }

  ::-webkit-scrollbar {
    width: 7px;
  }

  /* this targets the default scrollbar (compulsory) */

  ::-webkit-scrollbar-track {
    background-color: #73baf3;
  }

  /* the new scrollbar will have a flat appearance with the set background color */

  ::-webkit-scrollbar-thumb {
    background-color: #2196f3;
  }

  /* this will style the thumb, ignoring the track */

  ::-webkit-scrollbar-button {
    background-color: #0079da;
  }

  /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

  ::-webkit-scrollbar-corner {
    background-color: black;
  }

  /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
</style>

<script>
  module.exports = {
    data: () => ({
      color: "success",
      valid: false,
      companyname: '',
      idparent: '',
      companyfax: '',
      companynumber: '',
      companytypenew: '',
      companyaddress: '',
      companyphone: '',
      companyemail: '',
      companypic: '',
      companymindp: '',
      search_city: '',
      search_doctor: '',
      search_companylevel: '',
      searchxProvince: '',
      searchxStaff: '',
      searchxCity: '',
      searchxDistrict: '',
      searchxKelurahan: '',
      nameRules: [
        v => !!v || 'Nama harus diisi'
      ],
      addressRules: [
        v => !!v || 'Alamat harus diisi'
      ],
      companytypeRules: [
        v => !!v || 'Jenis Badan Usaha harus dipilih'
      ],
      companybusinessRules: [
        v => !!v || 'Bidang usaha harus dipilih'
      ],
      hierarkiRules: [
        v => !!v || 'Hierarki harus dipilih'
      ],
      companylevelRules: [
        v => !!v || 'Level hierarki harus dipilih'
      ],
      provinceRules: [
        v => !!v || 'Provinsi harus dipilih'
      ],
      cityRules: [
        v => !!v || 'Kota harus dipilih'
      ],
      districtRules: [
        v => !!v || 'Kecamatan harus dipilih'
      ],
      kelurahanRules: [
        v => !!v || 'Kelurahan harus dipilih'
      ],
      staffRules: [
        v => !!v || 'Marketer harus dipilih'
      ],
      dialogdeletealert: false,
      msgalert: "",
      xid: 0,
      xsearch: "",
      isdefault: "",
      islabfrom: "",
      islabto: "",
      isnewcompanytype: false,
      readonlytypecompany: false,
      readonlytypecompanynew: false,
      companytypename: '',
      companybusinessname: ''
    }),
    mounted() {
      this.$store.dispatch("company/lookup", {
        search: this.xsearch,
        all: this.xshowall
      })
      this.$store.dispatch("company/selecthierarchy")
      this.$store.dispatch("company/selectcompanytype")
      this.$store.dispatch("company/selectcompanybusiness")
      this.$store.dispatch("company/getstaff")
      this.$store.dispatch("company/getprovince")
      this.$store.dispatch("company/searchcompanylevel", {
        name: this.search_companylevel,
        id: 0
      })

    },
    computed: {
      xact() {
        return this.$store.state.company.act
      },
      xerrors() {
        return this.$store.state.company.errors
      },
      xshowall() {
        return this.$store.state.company.show_all
      },
      vcompanys() {
        return this.$store.state.company.companys
      },
      xtotalcompanys() {
        return this.$store.state.company.total_companys
      },
      xtotalfiltercompanys() {
        return this.$store.state.company.total_filter_companys
      },
      dialogcompany() {
        return this.$store.state.company.dialog_form_company
      },
      dialogcompanytype() {
        return this.$store.state.company.dialog_form_companytype
      },
      dialogcompanybusiness() {
        return this.$store.state.company.dialog_form_companybusiness
      },
      snackbar: {
        get() {
          return this.$store.state.company.alert_success
        },
        set(val) {
          this.$store.commit("company/update_alert_success", val)
        }
      },
      msgsnackbar() {
        return this.$store.state.company.msg_success
      },
      lookupstatus() {
        return this.$store.state.company.lookup_company
      },
      xcompanytypes() {
        return this.$store.state.company.companytypes
      },
      xcompanytype: {
        get() {
          return this.$store.state.company.companytype
        },
        set(val) {
          this.$store.commit("company/update_companytype", val)
        }
      },
      xstaffs() {
        return this.$store.state.company.staffs
      },
      xstaff: {
        get() {
          return this.$store.state.company.staff
        },
        set(val) {
          this.$store.commit("company/update_staff", val)
        }
      },
      xcompanylevels() {
        return this.$store.state.company.companylevels
      },
      xcompanylevel: {
        get() {
          return this.$store.state.company.companylevel
        },
        set(val) {
          this.$store.commit("company/update_companylevel", val)
        }
      },
      xcompanybusinesss() {
        return this.$store.state.company.companybusinesss
      },
      xcompanybusiness: {
        get() {
          return this.$store.state.company.companybusiness
        },
        set(val) {
          this.$store.commit("company/update_companybusiness", val)
        }
      },
      xhierarkis() {
        return this.$store.state.company.hierarkis
      },
      xhierarki: {
        get() {
          return this.$store.state.company.hierarki
        },
        set(val) {
          this.$store.commit("company/update_hierarki", val)
          this.$store.dispatch("company/searchcompanylevel", {
            name: this.search_companylevel,
            id: this.$store.state.company.hierarki
          })
        }
      },
      isLoading() {
        return this.$store.state.company.search_status == 1
      },
      xcities() {
        return this.$store.state.company.cities
      },
      citiesaddress: {
        get() {
          return this.$store.state.company.city_address
        },
        set(val) {
          this.$store.commit("company/update_city_address", val)
          this.$store.dispatch("company/getdistrict", this.$store.state.company.city_address)
        }
      },
      xdoctors() {
        return this.$store.state.company.doctors
      },
      doctor: {
        get() {
          return this.$store.state.company.doctor
        },
        set(val) {
          this.$store.commit("company/update_doctor", val)
        }
      },
      xprovinces() {
        return this.$store.state.company.provinces
      },
      provinceaddress: {
        get() {
          return this.$store.state.company.province_address
        },
        set(val) {
          this.$store.commit("company/update_province_address", val)
          this.$store.dispatch("company/getcity", this.$store.state.company.province_address)
        }
      },
      xcitys() {
        return this.$store.state.company.citys
      },
      cityaddress: {
        get() {
          return this.$store.state.company.city_address
        },
        set(val) {
          this.$store.commit("company/update_city_address", val)
          this.$store.dispatch("company/getdistrict", this.$store.state.company.city_address)
        }
      },
      xdistricts() {
        return this.$store.state.company.districts
      },
      districtaddress: {
        get() {
          return this.$store.state.company.district_address
        },
        set(val) {
          this.$store.commit("company/update_district_address", val)
          this.$store.dispatch("company/getkelurahan", this.$store.state.company.district_address)
        }
      },
      xkelurahans() {
        return this.$store.state.company.kelurahans
      },
      kelurahanaddress: {
        get() {
          return this.$store.state.company.kelurahan_address
        },
        set(val) {
          this.$store.commit("company/update_kelurahan_address", val)
        }
      },
      provinces() {
        return this.$store.state.area.provinces
      },
      selected_province: {
        get() {
          return this.$store.state.area.selected_province
        },
        set(v) {
          this.$store.commit('area/update_selected_area', {
            type: 'province',
            val: v
          })
          this.$store.dispatch('area/search_city')
        }
      },

      cities() {
        return this.$store.state.area.cities
      },
      selected_city: {
        get() {
          return this.$store.state.area.selected_city
        },
        set(v) {
          this.$store.commit('area/update_selected_area', {
            type: 'city',
            val: v
          })
          this.$store.dispatch('area/search_district')
        }
      },

      districts() {
        return this.$store.state.area.districts
      },
      selected_district: {
        get() {
          return this.$store.state.area.selected_district
        },
        set(v) {
          this.$store.commit('area/update_selected_area', {
            type: 'district',
            val: v
          })
          this.$store.dispatch('area/search_kelurahan')
        }
      },

      villages() {
        return this.$store.state.area.villages
      },
      selected_village: {
        get() {
          return this.$store.state.area.selected_village
        },
        set(v) {
          this.$store.commit('area/update_selected_area', {
            type: 'village',
            val: v
          })
        }
      },

    },
    methods: {
      updateShowAll(val) {
        this.$store.commit("company/update_show_all", val)
        this.$store.dispatch("company/lookup", {
          search: this.xsearch,
          all: this.xshowall
        })
      },
      isSelected(p) {
        return p.id == this.$store.state.company.selected_company.id
      },
      subname(name) {
        var xname = name
        if (xname.length > 18) {
          xname = xname.substring(0, 18) + '...'
        }
        return xname
      },
      selectMe(sc) {
        this.$store.commit("company/update_selected_company", sc)
        this.$store.dispatch("mou/lookup", {
          id: this.$store.state.company.selected_company.id
        })
        this.$store.dispatch("company/selectcompanylevel", {
          id: this.$store.state.company.selected_company.id
        })
      },
      updateDialogFormPerusahaan() {
        this.$store.commit("company/update_dialog_form_company", false)
      },
      updateDialogFormCompanyType() {
        this.$store.commit("company/update_dialog_form_companytype", false)
        this.$store.commit("company/update_dialog_form_company", true)
      },
      openFormPerusahaan() {
        this.search_city = ''
        this.$store.commit("company/update_cities", [])
        this.cityaddress = {}
        this.search_doctor = ''
        this.companynumber = ''
        this.search_companylevel = ''
        this.$store.commit("company/update_doctors", [])
        this.doctor = {}
        this.$store.commit("company/update_companylevels", [])
        this.xcompanylevel = {}
        this.$store.commit("company/update_districts", [])
        this.districtaddress = {}
        this.$store.commit("company/update_kelurahans", [])
        this.kelurahanaddress = {}
        this.companytypenew = ""
        this.$store.commit("company/update_companytype", {})
        this.$store.commit("company/update_companybusiness", {})
        this.$store.commit("company/update_hierarki", {})
        this.$store.dispatch("company/selectcompanylevel", 0)
        this.$refs.formcompany.reset()
        this.$refs.formcompany.resetValidation()
        this.$store.commit("company/update_act", 'new')
        this.$store.commit("company/update_dialog_form_company", true)
      },
      setNewOrder() {
        this.search_city = ''
        this.$store.commit("company/update_cities", [])
        this.cityaddress = {}
        this.search_doctor = ''
        this.search_companylevel = ''
        this.$store.commit("company/update_doctors", [])
        this.doctor = {}
        this.$store.commit("company/update_companylevels", [])
        this.xcompanylevel = {}
        this.$store.commit("company/update_districts", [])
        this.districtaddress = {}
        this.$store.commit("company/update_kelurahans", [])
        this.kelurahanaddress = {}
        this.companytypenew = ""
        this.$refs.formcompany.reset()
        this.$refs.formcompany.resetValidation()
        this.$store.commit("company/update_act", 'new')
        this.$store.commit("company/update_dialog_form_company", true)
      },
      addCompanyType() {
        this.$store.commit("company/update_dialog_form_companytype", true)
        this.$store.commit("company/update_dialog_form_company", false)
      },
      addCompanyBusiness() {
        this.$store.commit("company/update_dialog_form_companybusiness", true)
        this.$store.commit("company/update_dialog_form_company", false)
      },
      thr_search_city: _.debounce(function () {
        this.$store.dispatch("company/searchcity", this.search_city)
      }, 2000),
      thr_search_doctor: _.debounce(function () {
        this.$store.dispatch("company/searchdoctor", this.search_doctor)
      }, 2000),
      thr_search_companylevel: _.debounce(function () {
        this.$store.dispatch("company/searchcompanylevel", {
          search: this.search_companylevel,
          id: this.xhierarki.Nat_HierarchyID
        })
      }, 2000),
      saveFormPerusahaan() {
        if (this.$refs.formcompany.validate()) {
          this.$store.dispatch("company/save", {
            name: this.companyname,
            idparent: this.idparent,
            companytype: this.xcompanytype.M_CompanyTypeID,
            companybusiness: this.xcompanybusiness.M_CompanyBusinessID,
            hierarkiid: this.xhierarki.Nat_HierarchyID,
            companylevelid: this.xhierarki.Nat_HierarchyName === 'Holding' ? "0" : this.xcompanylevel ? this.xcompanylevel.Nat_CompanyLevelID : "0",
            staffid: this.xstaff.M_StaffID,
            province: this.provinceaddress.M_ProvinceID,
            city: this.cityaddress.M_CityID,
            district: this.districtaddress.M_DistrictID,
            kelurahan : this.kelurahanaddress.M_KelurahanID,
            address: this.companyaddress,
            email: this.companyemail,
            phone: this.companyphone,
            fax: this.companyfax,
            isdefault: this.isdefault === true ? "Y" : "N"
          })
        }
      },
      updateFormPerusahaan() {
        if (this.$refs.formcompany.validate()) {
          this.$store.dispatch("company/update", {
            id: this.xid,
            name: this.companyname,
            idparent: this.idparent,
            companytype: this.xcompanytype.M_CompanyTypeID,
            companybusiness: this.xcompanybusiness.M_CompanyBusinessID,
            hierarkiid: this.xhierarki.Nat_HierarchyID,
            companylevelid: this.xhierarki.Nat_HierarchyName === 'Holding' ? "0" : this.xcompanylevel ? this.xcompanylevel.Nat_CompanyLevelID : "0",
            staffid: this.xstaff.M_StaffID,
            province: this.provinceaddress.M_ProvinceID,
            city: this.cityaddress.M_CityID,
            district: this.districtaddress.M_DistrictID,
            kelurahan : this.kelurahanaddress.M_KelurahanID,
            address: this.companyaddress,
            email: this.companyemail,
            phone: this.companyphone,
            fax: this.companyfax,
            isdefault: this.isdefault === true ? "Y" : "N"
          })
        }
      },
      saveFormCompanyType() {
        this.$store.dispatch("company/savecompanytype", {
          name: this.companytypename
        })
        this.companytypename = ''
      },
      updateFormCompanyType(val) {
        this.$store.dispatch("company/updatecompanytype", {
          id: val.M_CompanyTypeID,
          name: val.M_CompanyTypeName
        })
      },
      deleteFormCompanyType(val) {
        this.$store.dispatch("company/deletecompanytype", {
          id: val.M_CompanyTypeID
        })
      },
      saveFormCompanyBusiness() {
        this.$store.dispatch("company/savecompanybusiness", {
          name: this.companybusinessname
        })
        this.companybusinessname = ''
      },
      updateFormCompanyBusiness(val) {
        this.$store.dispatch("company/updatecompanybusiness", {
          id: val.M_CompanyBusinessID,
          name: val.M_CompanyBusinessName
        })
      },
      deleteFormCompanyBusiness(val) {
        this.$store.dispatch("company/deletecompanybusiness", {
          id: val.M_CompanyBusinessID
        })
      },
      updateAlert_success(val) {
        this.$store.commit("company/update_alert_success", val)
      },
      editPerusahaan(data) {
        this.xid = data.id
        this.companyname = data.name
        this.$store.commit("company/update_provinces", [{
          M_ProvinceID: data.M_ProvinceID,
          M_ProvinceName: data.M_ProvinceName
        }])
        this.provinceaddress = {
          M_ProvinceID: data.M_ProvinceID,
          M_ProvinceName: data.M_ProvinceName
        }
        this.$store.dispatch("company/getprovince")
        this.$store.commit("company/update_citys", [{
          M_CityID: data.M_CityID,
          M_CityName: data.M_CityName
        }])
        this.cityaddress = {
          M_CityID: data.M_CityID,
          M_CityName: data.M_CityName
        }
        this.$store.commit("company/update_districts", [{
          M_DistrictID: data.M_DistrictID,
          M_DistrictName: data.M_DistrictName
        }])
        this.districtaddress = {
          M_DistrictID: data.M_DistrictID,
          M_DistrictName: data.M_DistrictName
        }
        this.$store.commit("company/update_kelurahans", [{
          M_KelurahanID: data.M_KelurahanID,
          M_KelurahanName: data.M_KelurahanName
        }])
        this.kelurahanaddress = {
          M_KelurahanID: data.M_KelurahanID,
          M_KelurahanName: data.M_KelurahanName
        }

        this.$store.commit("company/update_companylevels", [{
          Nat_CompanyLevelID: data.Nat_CompanyLevelID,
          Nat_CompanyLevelNames: data.Nat_CompanyLevelNames
        }])
        this.xcompanylevel = {
          Nat_CompanyLevelID: data.Nat_CompanyLevelID,
          Nat_CompanyLevelNames: data.Nat_CompanyLevelNames
        }


        this.idparent = data.M_CompanyIDParent
        this.companyfax = data.M_CompanyFax
        this.companynumber = data.M_CompanyNumber
        this.companyaddress = data.address
        this.companyphone = data.phone
        this.companyemail = data.email
        this.companypic = data.pic
        this.companytypenew = ""
        this.isdefault = data.isdefault === 'N' ? false : true
        this.islabfrom = data.islabfrom === 'N' ? false : true
        this.islabto = data.islabto === 'N' ? false : true
        this.$store.commit("company/update_act", 'edit')
        this.$store.commit("company/update_dialog_form_company", true)

        var companytypes = this.$store.state.company.companytypes
        var idx_companytype = _.findIndex(companytypes, function (o) {
          return o.M_CompanyTypeID == data.companytypeid
        })
        var companytype = companytypes[idx_companytype]
        this.$store.commit("company/update_companytype", companytype)

        var companybusinesss = this.$store.state.company.companybusinesss
        var idx_companybusiness = _.findIndex(companybusinesss, function (o) {
          return o.M_CompanyBusinessID == data.M_CompanyBusinessID
        })
        var companybusiness = companybusinesss[idx_companybusiness]
        this.$store.commit("company/update_companybusiness", companybusiness)

        var hierarkis = this.$store.state.company.hierarkis
        var idx_hierarki = _.findIndex(hierarkis, function (o) {
          return o.Nat_HierarchyID == data.Nat_HierarchyID
        })
        var hierarki = hierarkis[idx_hierarki]
        this.$store.commit("company/update_hierarki", hierarki)



        var staffs = this.$store.state.company.staffs
        var idx_staffs = _.findIndex(staffs, function (o) {
          return o.M_StaffID == data.M_StaffID
        })
        var staff = staffs[idx_staffs]
        this.$store.commit("company/update_staff", staff)

      },
      deletePerusahaan(data) {
        this.xid = data.id
        var xdata = {
          id: data.id,
          name: data.name,
          mous: 'xxx'
        }
        this.$store.commit("company/update_selected_company", xdata)
        this.msgalert = "Yakin, Mau Hapus Kelompok Pelanggan " + data.name + "  ?"
        this.dialogdeletealert = true
      },
      changeNewCompanyType(value) {
        this.readonlytypecompany = value === true ? true : false
        this.readonlytypecompanynew = value === true ? false : true
      },
      newCompanyType() {
        readonlytypecompany: true
        readonlytypecompanynew: false
      },
      closeDeleteAlert() {
        this.$store.dispatch("company/delete", {
          companyid: this.$store.state.company.selected_company.id,
          companyname: this.$store.state.company.selected_company.name
        })
        this.dialogdeletealert = false
      },
      thr_search: _.debounce(function () {
        this.$store.dispatch("company/lookup", {
          search: this.xsearch,
          all: this.xshowall
        })
      }, 1000)
    },
    watch: {
      xsearch(val, old) {
        if (val !== old && this.lookupstatus !== 1) {
          console.log(val)
          this.xsearch = val
          this.thr_search()
        }
      },
      search_city(val, old) {
        if (val == old) return
        if (!val) return
        if (val.length < 1) return
        if (this.$store.state.company.update_autocomplete_status == 1) return
        this.thr_search_city()
      },
      search_doctor(val, old) {
        if (val == old) return
        if (!val) return
        if (val.length < 1) return
        if (this.$store.state.company.update_autocomplete_status == 1) return
        this.thr_search_doctor()
      },
      search_companylevel(val, old) {
        if (val == old) return
        if (!val) return
        if (val.length < 1) return
        if (this.$store.state.company.update_autocomplete_status == 1) return
        this.thr_search_companylevel()
      }
    }
  }
</script>