<template>
  <div class="setting-view">
    <Row :gutter="30">
      <i-col :xs="24" :sm="24" :md="8" :lg="4" class="menu-bar">
        <ul class="list-block">
          <li
            class="list-item"
            :class="{ 'list-item-selected': currentTab == 1 }"
            @click="setTab(1)"
          >
            {{ $t("studentWeb.teammodel-account-management.page-title") }}
          </li>
          <li
            class="list-item"
            :class="{ 'list-item-selected': currentTab == 2 }"
            @click="setTab(2)"
          >
            {{ $t("studentWeb.preference.page-title") }}
          </li>
          <li
            class="list-item"
            :class="{ 'list-item-selected': currentTab == 3 }"
            @click="setTab(3)"
          >
            {{ $t("studentWeb.change-school.page-title") }}
          </li>
        </ul>
      </i-col>
      <i-col :xs="24" :sm="24" :md="16" :lg="20" class="menu-content">
        <div v-if="currentTab == 1">
          <Row :gutter="30">
            <i-col :xs="24" :sm="24" :md="6" :lg="3" align="center">
              <label class="edit">
                <img
                  class="user-avatar"
                  src="https://images.unsplash.com/photo-1520223297779-95bbd1ea79b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
                />
                <input type="file" accept="image/*" />
                <div class="edit-btn">
                  <Icon type="md-create" />
                </div>
              </label>
              <p class="user-name">Nancy Chen</p>
            </i-col>

            <i-col :xs="24" :sm="24" :md="18" :lg="7" class="user-setting">
              <h4>{{ $t("studentWeb.teammodel-account-management.name") }}</h4>
              <input
                type="text"
                v-model="userAccountData[0]"
                required
                minlength="3"
                maxlength="25"
                disabled
              />
              <Divider />
              <h4>{{ $t("studentWeb.teammodel-account-management.account") }}</h4>
              <input
                type="text"
                v-model="userAccountData[1]"
                required
                minlength="3"
                maxlength="25"
              />
              <Divider />
              <h4>{{ $t("studentWeb.teammodel-account-management.password") }}</h4>
              <input
                type="password"
                v-model="userAccountData[2]"
                required
                minlength="3"
                maxlength="25"
              />
              <Divider />
              <h4>{{ $t("studentWeb.teammodel-account-management.phone") }}</h4>
              <input
                type="tel"
                v-model="userAccountData[3]"
                required
                minlength="3"
                maxlength="16"
              />
              <Divider />
              <h4>{{ $t("studentWeb.teammodel-account-management.e-mail") }}</h4>
              <input
                type="email"
                v-model="userAccountData[4]"
                required
                minlength="3"
                maxlength="25"
              />
              <Divider />
              <h4>{{ $t("studentWeb.teammodel-account-management.binding") }}</h4>
              <div class="user-link-group">
                <li>
                  <svg-icon icon-class="facebook" class="user-link" />
                  <p>{{ $t("studentWeb.teammodel-account-management.isbind") }}</p>
                </li>
                <li>
                  <svg-icon icon-class="google" class="user-link" />
                  <p>{{ $t("studentWeb.teammodel-account-management.unbind") }}</p>
                </li>
                <li>
                  <svg-icon icon-class="wechat" class="user-link" />
                  <p>{{ $t("studentWeb.teammodel-account-management.unbind") }}</p>
                </li>
              </div>
              <br />
              <br />
              <label class="uploadBtn">
                <span>{{ $t("studentWeb.teammodel-account-management.save") }}</span>
              </label>
            </i-col>
          </Row>
        </div>
        <div v-if="currentTab == 2">
          <h4>{{ $t("studentWeb.preference.UI-theme") }}</h4>
          <label class="testBtn yesNoBtn">
            <input type="radio" value="Light" v-model="uiType" />
            <div class="lightbg"></div>
            Light Mode
          </label>
          <label class="testBtn yesNoBtn">
            <input type="radio" value="Dark" v-model="uiType" />
            <div class="darkbg"></div>
            Dark Mode
          </label>
          <Divider />
          <h4>{{ $t("studentWeb.preference.language") }}</h4>
          <Dropdown class="dropdown">
            <a href="javascript:void(0)">
              <span v-if="this.$store.getters.getCurrentLaguage == 'zh-TW'"
                >繁體中文</span
              >
              <span v-if="this.$store.getters.getCurrentLaguage == 'en-US'"
                >English</span
              >
              <Icon type="ios-arrow-down"></Icon>
            </a>
            <DropdownMenu slot="list">
              <div @click="changeLanguage('zh-TW')">
                <DropdownItem>繁體中文</DropdownItem>
              </div>
              <div @click="changeLanguage('en-US')">
                <DropdownItem>English</DropdownItem>
              </div>
            </DropdownMenu>
          </Dropdown>
          <Divider />
          <h4>提示設定</h4>
          <br />
          <input type="checkbox" v-model="hintNextItem" name="cb"/>
          <label> 活動完成時，自動提示前往下一個進行中未完成的活動</label>
        </div>
        <div v-if="currentTab == 3">
          <h4>{{ $t("studentWeb.change-school.current-data-school") }}</h4>

          <Dropdown class="dropdown">
            <a href="javascript:void(0)">
              {{ $t("studentWeb.change-school.Habook-smart-school") }}
              <Icon type="ios-arrow-down"></Icon>
            </a>
            <DropdownMenu slot="list">
              <DropdownItem>{{ $t("studentWeb.change-school.Habook-smart-school") }}</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
      </i-col>
    </Row>
  </div>
</template>

<script>
export default {
  name: "SettingView",
  components: {},
  data() {
    return {
      hintNextItem:'',
      userAccountData: [
        "Nancy Chen",
        "ST11096",
        "221133455566",
        "+886-123-123-123",
        "nancy@habook.com",
        "",
      ],
      uiType: "Light",
      currentTab: 1,
      MyNo: "X",
      MyName: "",
    };
  },

  watch: {
    hintNextItem(value) {
      console.log("hintNextItemSetting:" + value);
      this.$store.commit("sethintNextItem", value);
    },
  },
  methods: {
    setTab(currentTab) {
      this.currentTab = currentTab;
    },
    changeLanguage(lang) {
      this.$store.commit("setLanguage", lang);

      if (lang == "tw") {
        this.MyName = "個人設定";
        this.$emit("onNavName", this.MyName);
      } else {
        this.MyName = "Setting";
        this.$emit("onNavName", this.MyName);
      }
    },
  },

  created() {
    //發送本頁target 跟名字給App.Vue 的navBar
    this.MyName = this.$t("studentWeb.settingView-title");
    console.log(localStorage.getItem('hintNextItem'))
    if(localStorage.getItem('hintNextItem')=='false'){ //留意回傳回來是字串
      this.hintNextItem=false
    }
    else this.hintNextItem=true
    this.$emit("onNavNo", this.MyNo);
    this.$emit("onNavName", this.MyName);
  },
};
</script>

<style scoped>
@import "~@/assets/student-web/component_styles/setting-view.css";
</style>