<template>
  <v-app id="login">
    <v-container>
      <v-layout>
        <v-flex xs12 sm12 md12 lg12 class="mt-5">
          <v-toolbar class="fixcolors mt-5" dark>
            <v-spacer></v-spacer>
            <v-toolbar-title>General Setting</v-toolbar-title>
            <v-spacer></v-spacer>
          </v-toolbar>
          <v-card class="elevation-1" id="form">
            <v-card-text>
              <v-flex xs12>
                <v-form class="mt-3" ref="form" v-model="valid" lazy-validation>
                  <v-layout>
                    <v-flex
                      xs12
                      class="text-xs-center text-sm-center text-md-center text-lg-center mb-4"
                    >
                      <v-avatar size="100px">
                        <img src="/static/icon/user.png" v-if="!imageUrl" />
                      </v-avatar>
                      <input
                        type="file"
                        style="display: none"
                        ref="image"
                        accept="image/*"
                        @change="onFilePicked"
                      />
                      <img :src="imageData.imageUrl" height="150" width="200" v-if="imageUrl" />
                    </v-flex>
                  </v-layout>
                  <v-flex xs12>
                    <!-- <v-layout> -->
                    <v-flex xs12>
                      <v-layout>
                        <v-flex xs4 sm4>
                          <label class="subheading right pt-4">Site Title:</label>
                        </v-flex>
                        <v-flex xs8 sm5>
                          <v-text-field
                            class="ml-3"
                            placeholder="fill your Site title"
                            v-model="setting.name"
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12>
                      <v-layout>
                        <v-flex xs4 sm4>
                          <label class="subheading right pt-4">Phone:</label>
                        </v-flex>
                        <v-flex xs8 sm5>
                          <v-text-field
                            class="ml-3"
                            placeholder="fill your Phone number"
                            v-model="setting.mobile"
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <!-- </v-layout> -->
                    <!-- <v-layout> -->
                    <v-flex xs12>
                      <v-layout>
                        <v-flex xs4 sm4>
                          <label class="subheading right pt-4">Email:</label>
                        </v-flex>
                        <v-flex xs8 sm5>
                          <v-text-field
                            class="ml-3"
                            placeholder="fill your email"
                            v-model="setting.email"
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12>
                      <v-layout>
                        <v-flex xs4 sm4>
                          <label class="subheading right pt-4">Address:</label>
                        </v-flex>
                        <v-flex xs8 sm5>
                          <v-text-field
                            class="ml-3"
                            placeholder="fill your Address"
                            v-model="setting.address"
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <v-flex xs12>
                      <v-layout>
                        <v-flex xs4 sm4>
                          <label class="right hidden-xs-only hidden-sm-only pt-4">Uplaod Image:</label>
                          <label
                            class="right hidden-lg-only hidden-md-only hidden-xl-only pt-4"
                          >Uplaod :</label>
                        </v-flex>
                        <v-flex xs8 sm5>
                          <v-text-field
                            class="ml-3"
                            label="Select Image"
                            @click="pickFile"
                            v-model="imageName"
                            append-icon="attach_file"
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <!-- </v-layout> -->
                  </v-flex>
                </v-form>
              </v-flex>
            </v-card-text>
            <v-card-actions>
              <v-flex text-xs-center>
                <v-btn
                  class="mt-3"
                  round
                  color="black"
                  dark
                  large
                  :loading="loading"
                  @click="reset"
                >submit</v-btn>
              </v-flex>
            </v-card-actions>
            <v-snackbar
              :timeout="timeout"
              :top="y === 'top'"
              :right="x === 'right'"
              :vertical="mode === 'vertical'"
              v-model="snackbar"
              :color="color"
            >{{ text }}</v-snackbar>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</template>
<script>
import http from "@/Services/http.js";

export default {
  data() {
    return {
      snackbar: false,
      y: "top",
      x: "right",
      mode: "",
      timeout: 4000,
      text: "",
      color: "",
      setting: {},
      valid: true,
      loading: false,
      text: "",
      imageData: {},
      imageName: "",
      imageUrl: "",
      imageFile: ""
    };
  },
  mounted() {
    this.token = this.$store.state.token;
    // this.getRole();
  },
  methods: {
    pickFile() {
      this.$refs.image.click();
    },
    onFilePicked(e) {
      // console.log(e)
      const files = e.target.files;
      this.imageData.upload = e.target.files[0];
      if (files[0] !== undefined) {
        this.imageName = files[0].name;
        if (this.imageName.lastIndexOf(".") <= 0) {
          return;
        }
        const fr = new FileReader();
        fr.readAsDataURL(files[0]);
        fr.addEventListener("load", () => {
          this.imageUrl = fr.result;
          this.imageFile = files[0]; // this is an image file that can be sent to server...
          this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
        });
      } else {
        this.imageName = "";
        this.imageFile = "";
        this.imageUrl = "";
      }
    },
    reset() {
      if (this.$refs.form.validate()) {
        this.loading = true;
        if (this.imageUrl) {
          var str = this.imageUrl;
          const [baseUrl, imageUrl] = str.split(/,/);
          this.setting.upload = imageUrl;
        }
        this.setting.schoolId = this.$store.state.id;
        http()
          .put("/updateSchool", this.setting, {
            headers: { Authorization: "Bearer " + this.token }
          })
          .then(response => {
            this.loading = false;
            this.snackbar = true;
            this.text = response.data.message;
            this.color = "green";
            this.imageUrl = "";
            this.clear();
          })
          .catch(error => {
            // console.log("err====>",err);
            this.snackbar = true;
            this.text = error.response.data.message;
            this.color = "error";
            this.loading = false;
          });
      }
    },
    // getRole() {
    //   this.showLoader = true;
    //   http()
    //     .get("/getRolesList", {
    //       headers: { Authorization: "Bearer " + this.token }
    //     })
    //     .then(response => {
    //       for (let i = 0; i < response.data.data.length; i++) {
    //         if (
    //           response.data.data[i].name != "SUPERADMIN" &&
    //           response.data.data[i].name != "ADMIN"
    //         ) {
    //           this.getRoles.push(response.data.data[i]);
    //           this.showLoader = false;
    //         }
    //       }
    //     })
    //     .catch(error => {
    //       this.showLoader = false;
    //       if (error.response.status === 401) {
    //         this.$router.replace({ path: "/" });
    //         this.$store.dispatch("setToken", null);
    //         this.$store.dispatch("Id", null);
    //       }
    //     });
    // },
    clear() {
      this.$refs.form.reset();
    }
    // getUsers(roles) {
    //   this.showLoader = true;
    //   http()
    //     .get("/getUserWithRole", {
    //       params: {
    //         name: roles
    //       },
    //       headers: { Authorization: "Bearer " + this.token }
    //     })
    //     .then(response => {
    //       this.getUsersName = response.data.data;
    //     })
    //     .catch(error => {
    //       this.showLoader = false;
    //       if (error.response.status === 401) {
    //         this.$router.replace({ path: "/" });
    //         this.$store.dispatch("setToken", null);
    //         this.$store.dispatch("Id", null);
    //       }
    //     });
    // }
  }
};
</script>
<style scoped>
.v-btn--large {
  padding: 0px 74px;
}
@media screen and (max-width: 769px) {
  .v-btn--large {
    font-size: 14px;
    height: 44px;
    padding: 0 32px;
  }
}
</style>