<template>
  <q-dialog
    v-model="persistent"
    maximized
    full-height
    position="right"
    @hide="closeShenheForm"
  >
    <q-card
      style="margin-top:61px;width:375px;padding-bottom: 70px;"
      class="no-border-radius q-pa-lg"
    >
      <q-scroll-area
        style="height: 100%; max-width: 375px;"
        :thumb-style="thumbStyle"
        :bar-style="barStyle"
      >
        <div class="text-weight-bold">
          <span style="font-size:20px;" class="q-mr-md">用户个人资料</span>
          <span class="remark-font">12条未读消息</span>
        </div>
        <div class="q-mt-lg flex">
          <q-avatar
            size="100px"
            font-size="36px"
            rounded
            style="background:#C9F7F5"
            text-color="white"
          >
            <img :src="showObj.UserIcon" v-if="showObj.UserIcon" />
            <span v-else>{{ showObj.AccountName.substring(0, 1) }}</span>
          </q-avatar>
          <div class="col q-ml-md">
            <div class="text-weight-bold" style="font-size:16px;">
              {{ showObj.AccountName }}
            </div>
            <div class="text-muted" style="font-size:13px">
              {{ showObj.SchoolName }}·{{ showObj.PostName }}
            </div>
            <div class="flex items-center text-muted">
              <inline-svg
                class="svg-icon svg-icon-primary q-mr-xs"
                src="icons/svg/Communication/Mail-notification.svg"
              ></inline-svg>
              <span>{{ showObj.Email }}</span>
            </div>
            <div class="q-mt-xs">
              <q-btn color="primary" flat @click="logout">退出登录</q-btn>
            </div>
          </div>
        </div>
        <q-separator color="grey-2" class="q-my-md"></q-separator>
        <q-list>
          <q-item
            class="q-my-sm"
            clickable
            v-ripple
            v-for="(item, index) in showObj.UserCenterList"
            :key="index"
            :to="item.MenuUrl"
          >
            <q-item-section avatar>
              <q-avatar
                style="background-color: #F3F6F9;"
                rounded
                size="40px"
                text-color="primary"
              >
                <i :class="[item.MenuIcon]"></i>
              </q-avatar>
            </q-item-section>
            <q-item-section>
              <q-item-label class="font-pfb">{{ item.MenuName }}</q-item-label>
            </q-item-section>
          </q-item>
          <q-item
            class="q-my-sm"
            clickable
            v-ripple
            @click="autoSubmitHandler()"
          >
            <q-item-section avatar>
              <q-avatar
                style="background-color: #F3F6F9;"
                rounded
                size="40px"
                text-color="primary"
              >
                <i class="iconfont icon-zichan"></i>
              </q-avatar>
            </q-item-section>
            <q-item-section>
              <q-item-label class="font-pfb">企业云盘</q-item-label>
            </q-item-section>
          </q-item>
          <!-- 跳转资产 -->
          <q-item class="q-my-sm" clickable v-ripple @click="goUrlZC(1)">
            <q-item-section avatar>
              <q-avatar
                style="background-color: #F3F6F9;"
                rounded
                size="40px"
                text-color="primary"
              >
                <i class="iconfont icon-zichan"></i>
              </q-avatar>
            </q-item-section>
            <q-item-section>
              <q-item-label class="font-pfb">资产管理</q-item-label>
            </q-item-section>
          </q-item>
          <!-- 跳转资产 -->
          <q-item class="q-my-sm" clickable v-ripple @click="goUrlZC(2)">
            <q-item-section avatar>
              <q-avatar
                style="background-color: #F3F6F9;"
                rounded
                size="40px"
                text-color="primary"
              >
                <i class="iconfont icon-qinggoudan"></i>
              </q-avatar>
            </q-item-section>
            <q-item-section>
              <q-item-label class="font-pfb">请购审核</q-item-label>
            </q-item-section>
          </q-item>
          <!-- 跳转资产 -->
          <q-item class="q-my-sm" clickable v-ripple @click="goUrlZC(3)">
            <q-item-section avatar>
              <q-avatar
                style="background-color: #F3F6F9;"
                rounded
                size="40px"
                text-color="primary"
              >
                <i class="iconfont icon-ruku"></i>
              </q-avatar>
            </q-item-section>
            <q-item-section>
              <q-item-label class="font-pfb">入库审核</q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
        <q-separator color="grey-2" class="q-my-md"></q-separator>
        <div class="text-weight-bold" style="font-size:16px;">常用功能</div>
        <q-list>
          <q-item
            class="q-my-sm q-pa-xs"
            clickable
            v-ripple
            @click="goUrlgeren"
          >
            <q-item-section avatar>
              <q-avatar
                style="background-color: #F3F6F9;"
                rounded
                size="40px"
                text-color="secondary"
              >
                <inline-svg
                  class="svg-icon svg-icon-secondary"
                  src="icons/svg/General/Notification2.svg"
                ></inline-svg>
              </q-avatar>
            </q-item-section>
            <q-item-section>
              <q-item-label class="font-pfb">个人资料</q-item-label>
              <q-item-label caption lines="1" class="remark-font"
                >账号信息设置等相关功能</q-item-label
              >
            </q-item-section>
          </q-item>
          <q-item
            class="q-my-sm q-pa-xs"
            clickable
            v-ripple
            @click="undefinedGongneng"
          >
            <q-item-section avatar>
              <q-avatar
                style="background-color: #F3F6F9;"
                rounded
                size="40px"
                text-color="secondary"
              >
                <inline-svg
                  class="svg-icon svg-icon-warning"
                  src="icons/svg/Shopping/Chart-bar1.svg"
                ></inline-svg>
              </q-avatar>
            </q-item-section>
            <q-item-section>
              <q-item-label class="font-pfb">奖金提成</q-item-label>
              <q-item-label caption lines="1" class="remark-font"
                >销售与教师相关的奖金或提成</q-item-label
              >
            </q-item-section>
          </q-item>
          <q-item
            class="q-my-sm q-pa-xs"
            clickable
            v-ripple
            @click="undefinedGongneng"
          >
            <q-item-section avatar>
              <q-avatar
                style="background-color: #F3F6F9;"
                rounded
                size="40px"
                text-color="secondary"
              >
                <inline-svg
                  class="svg-icon svg-icon-negative"
                  src="icons/svg/Files/Selected-file.svg"
                ></inline-svg>
              </q-avatar>
            </q-item-section>
            <q-item-section>
              <q-item-label class="font-pfb">考勤</q-item-label>
              <q-item-label caption lines="1" class="remark-font"
                >出勤，请假等相关功能入口</q-item-label
              >
            </q-item-section>
          </q-item>
          <q-item
            class="q-my-sm q-pa-xs"
            clickable
            v-ripple
            @click="undefinedGongneng"
          >
            <q-item-section avatar>
              <q-avatar
                style="background-color: #F3F6F9;"
                rounded
                size="40px"
                text-color="secondary"
              >
                <inline-svg
                  class="svg-icon svg-icon-primary"
                  src="icons/svg/Communication/Mail-opened.svg"
                ></inline-svg>
              </q-avatar>
            </q-item-section>
            <q-item-section>
              <q-item-label class="font-pfb">我的工作</q-item-label>
              <q-item-label caption lines="1" class="remark-font"
                >OKR、教师备课相关功能入口</q-item-label
              >
            </q-item-section>
          </q-item>
        </q-list>
      </q-scroll-area>
    </q-card>
    <!--<div class="dialog-out-close" @click="closeShenheForm" style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
        <q-icon name="iconfont icon-jujue1" size="26px" />
    </div>-->
    <form
      id="cgForm"
      method="post"
      target="_blank"
      style="display:none;"
      action="http://cloud.kookaku.com/user.php?mod=login&op=logging&action=login&loginsubmit=yes&loginhash=LYe3Z&returnType=page&sc=erp"
    ></form>
  </q-dialog>
</template>

<script>
import Lockr from "lockr";
import { url_jump_zc } from "../../utils/url";
export default {
  props: {
    showObj: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      persistent: true,
      text: "Field content",
      reason: "",
      saveLoading: false,
      saveType: 0,
      thumbStyle: {
        right: "4px",
        borderRadius: "5px",
        backgroundColor: "#027be3",
        width: "5px",
        opacity: 0.75
      },

      barStyle: {
        right: "2px",
        borderRadius: "9px",
        backgroundColor: "#027be3",
        width: "9px",
        opacity: 0.2
      }
    };
  },
  methods: {
    autoSubmitHandler() {
      let userinfo = this.getLocalStorage();
      var formData = {
        formhash: "6d51f5e5",
        referer: "http://cloud.kookaku.com/index.php?mod=explorer",
        email: `${userinfo.UserMobile}@kookaku.com`,
        password: "lcdjl520"
      };
      let form = document.getElementById("cgForm");
      for (let p in formData) {
        if (p != "url") {
          let input = document.createElement("input");
          input.setAttribute("name", p);
          input.setAttribute("value", formData[p]);
          form.append(input);
        }
      }
      form.submit();
    },
    closeShenheForm() {
      this.$emit("close");
    },
    goUrlgeren() {
      //个人资料
      this.$root.$emit("goworkobj");
      this.$router.push({
        path: "/user/personalData"
      });
    },
    undefinedGongneng() {
      this.$q
        .dialog({
          title: "功能提示",
          message: "此功能即将在下一版本中开放"
        })
        .onOk(() => {});
    },
    logout() {
      this.$store
        .dispatch("LogOut")
        .then(() => {
          this.$router.push("/login");
        })
        .catch(e => {});
    },

    goUrlZC(type) {
      let userinfo = this.getLocalStorage();
      let token = Lockr.get("Token");
      // let  url = "http://www.test.com:8080/#/Autologin?ObjInfo=" + token + "&SecretKey=" + userinfo.UploadConfig.SecretKey;
      // let  url = "http://zcyx.oytour.com/#/Autologin?ObjInfo=" + token + "&SecretKey=" + userinfo.UploadConfig.SecretKey;
      if (type == 1) {
        let url =
          url_jump_zc +
          "/#/Autologin?ObjInfo=" +
          token +
          "&SecretKey=" +
          userinfo.UploadConfig.SecretKey;
        window.open(url);
      } else if (type == 2) {
        let url =
          url_jump_zc +
          "/#/Autologin?ObjInfo=" +
          token +
          "&SecretKey=" +
          userinfo.UploadConfig.SecretKey +
          "&ComeFrom=2";
        window.open(url);
      } else if (type == 3) {
        let url =
          url_jump_zc +
          "/#/Autologin?ObjInfo=" +
          token +
          "&SecretKey=" +
          userinfo.UploadConfig.SecretKey +
          "&ComeFrom=3";
        window.open(url);
      }
    }
  }
};
</script>

<style></style>
