<template>
  <div class="work-box row">
    <div class="lft-box" style="display:none">
      <div class="relative-position">
        <q-input
          standout
          bottom-slots
          filled
          @input="querySearchResult"
          v-model="searchText"
          label="员工"
          dense
        >
          <template v-slot:append>
            <inline-svg
              class="svg-icon svg-icon-primary"
              src="icons/svg/General/Search.svg"
            ></inline-svg>
          </template>
        </q-input>
        <div
          class="absolute bg-white rounded-borders shadow-6"
          v-if="showResult"
          style="top:45px;left:0px;right:0px;z-index:2"
        >
          <q-list>
            <q-item clickable v-ripple v-for="(x, i) in usersList" :key="i">
              <q-item-section avatar>
                <q-avatar
                  rounded
                  size="40px"
                  class="bg-grey-4"
                  text-color="white"
                >
                  <img :src="x.UserIcon" v-if="x.UserIcon" />
                  <span v-else>{{ x.EmployeeName.substring(0, 1) }}</span>
                </q-avatar>
              </q-item-section>
              <q-item-section>
                <q-item-label class="text-subtitle2">
                  <span>{{ x.EmployeeName }}</span>
                </q-item-label>
                <q-item-label class="remark-font">
                  <span>{{ x.DeptName }}·{{ x.PostName }}</span>
                </q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </div>
      </div>
      <q-list>
        <q-expansion-item dense label="我的工作" v-if="userInfo" default-opened>
          <q-item
            class="rounded-borders"
            @click="changeMenu('myokr', 1, null)"
            clickable
            v-ripple
            active-class="work-menu-active"
            :active="activeMenu == 'myokr'"
          >
            <q-item-section avatar>
              <q-avatar
                class="bg-grey-4"
                rounded
                size="20px"
                text-color="white"
              >
                <img :src="userInfo.UserIcon" v-if="userInfo.UserIcon" />
                <span v-else>{{ userInfo.AccountName.substring(0, 1) }}</span>
              </q-avatar>
            </q-item-section>
            <q-item-section>
              <q-item-label class="font-pfb">{{
                userInfo.AccountName
              }}</q-item-label>
            </q-item-section>
          </q-item>
        </q-expansion-item>

        <q-expansion-item
          dense
          label="我的直属下级"
          default-opened
          v-if="menuList.ChildList && menuList.ChildList.length > 0"
        >
          <q-item
            class="rounded-borders"
            @click="changeMenu(`child_${x.Id}`, 2, x)"
            clickable
            v-ripple
            active-class="work-menu-active"
            :active="activeMenu == `child_${x.Id}`"
            v-for="(x, i) in menuList.ChildList"
            :key="`child_${x.Id}`"
          >
            <q-item-section avatar>
              <q-avatar
                class="bg-grey-4"
                rounded
                size="20px"
                text-color="white"
              >
                <img :src="x.UserIcon" v-if="x.UserIcon" />
                <span v-else>{{ x.EmployeeName.substring(0, 1) }}</span>
              </q-avatar>
            </q-item-section>
            <q-item-section>
              <q-item-label class="font-pfb">{{ x.EmployeeName }}</q-item-label>
            </q-item-section>
            <q-item-section side>
              <inline-svg
                class="svg-icon svg-icon-negative"
                src="icons/svg/Design/Circle.svg"
                width="10"
                height="10"
                v-show="x.IsHaveUpdate > 0"
              ></inline-svg>
            </q-item-section>
          </q-item>
        </q-expansion-item>
      </q-list>
    </div>
    <div class="col q-pt-md q-pr-md">
      <!-- <div class="row work_Top">
        <div class="text-h6 col"></div>

      </div> -->
      <q-btn-group
        outline
        style="position: fixed;top: 75px;right:20px;z-index: 666666;"
      >
        <q-btn
          dense
          v-if="IsHaveGMView"
          :outline="viewMode != 1"
          @click="changeViewModel(1)"
          class="q-px-md"
          color="primary"
          size="12px"
          label="总经理视图"
        />
        <q-btn
          dense
          v-if="
            IsQueryAuth ||
              CurrentUserInfo.IsMarket == 1 ||
              IsQueryAuth ||
              CurrentUserInfo.IsCourseConsultant == 1
          "
          :outline="viewMode != 2"
          @click="changeViewModel(2)"
          class="q-px-md"
          color="primary"
          size="12px"
          label="今日数据统计"
        />
        <q-btn
          dense
          :outline="viewMode != 3"
          @click="changeViewModel(3)"
          class="q-px-md"
          color="primary"
          size="12px"
          label="数据统计"
        />
      </q-btn-group>
      <dasbord v-if="viewMode == 3"></dasbord>
      <todayData v-if="viewMode == 2"></todayData>
      <workbench v-if="viewMode == 1"></workbench>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { queryOKRMyEmployeeList } from "../../api/okr/work";
import { queryEmployee } from "../../api/users/user";
import dasbord from "./dasbord.vue";
import todayData from "./todayData.vue";
import { Encrypt, Decrypt } from "../../utils/encrypt";
import workbench from "./workbench.vue";

export default {
  components: {
    dasbord,
    todayData,
    workbench
  },
  data() {
    return {
      usersList: [],
      showResult: false,
      searchText: "",
      menuList: [],
      activeMenu: "myokr",
      viewMode: 2,
      IsQueryAuth: false, //是否有查询市场部和课程顾问部人员权限
      CurrentUserInfo: {}, //当前登录用户信息
      IsHaveGMView: false
    };
  },
  created() {
    this.CurrentUserInfo = this.getLocalStorage();
    if (
      this.CurrentUserInfo &&
      this.CurrentUserInfo.ActionMenuList &&
      this.CurrentUserInfo.ActionMenuList.length > 0
    ) {
      this.CurrentUserInfo.ActionMenuList.forEach(x => {
        if (x.FunctionCode == "Query_MarketConsultant") {
          this.IsQueryAuth = true;
        }
        if (x.FunctionCode == "GM_VIEW") {
          this.IsHaveGMView = true;
        }
      });
    }
    if (this.IsHaveGMView) {
      this.viewMode = 1;
    } else if (
      this.IsQueryAuth ||
      this.CurrentUserInfo.IsMarket == 1 ||
      this.IsQueryAuth ||
      this.CurrentUserInfo.IsCourseConsultant == 1
    ) {
      this.viewMode = 2;
    } else {
      this.viewMode = 3;
    }

    this.getUserList();
    let str = Encrypt("2");
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  methods: {
    getUserList() {
      queryOKRMyEmployeeList().then(res => {
        this.menuList = res.Data;
      });
    },
    changeViewModel(val) {
      this.viewMode = val;
    },
    querySearchResult() {
      this.usersList = [];
      this.showResult = false;
      this.searchText = this.searchText.trim();
      if (this.searchText != "") {
        queryEmployee({
          EmployeeName: this.searchText,
          IsLeave: 1
        }).then(r => {
          this.usersList = r.Data;
          if (this.usersList.length > 0) {
            this.showResult = true;
          }
        });
      }
    },
    changeMenu(vm, t, obj) {}
  }
};
</script>

<style>
.work_Top {
  padding: 20px;
  background-color: #fff;
}
.work-box {
  height: 100%;
  width: 100%;
}
.work-box .lft-box {
  padding-left: 24px;
  width: 248px;
  flex: 0 0 auto;
  position: relative;
  padding-right: 16px;
  padding-top: 16px;
}
.work-box .work-menu-active {
  color: var(--q-color-primary);
  font-weight: bold;
  background: #ecf1ff;
}
.work-box .item-shadow {
  box-shadow: 0 0 40px rgb(0 0 0 / 9%) !important;
}
</style>
