<template>
  <div class="work-box row">
    <div class="lft-box">
      <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">
        <div class="text-h6 col">工作台</div>
        <q-btn-group outline>
          <q-btn
            dense
            :outline="viewMode != 1"
            @click="changeViewModel(1)"
            class="q-px-md"
            color="primary"
            size="12px"
            label="今日工作"
          />
          <q-btn
            dense
            :outline="viewMode != 2"
            @click="changeViewModel(2)"
            class="q-px-md"
            color="primary"
            size="12px"
            label="数据统计"
          />
        </q-btn-group>
      </div>
      <dasbord></dasbord>
    </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 { Encrypt,Decrypt} from '../../utils/encrypt'

export default {
  components: { dasbord },
  data() {
    return {
      usersList: [],
      showResult: false,
      searchText: "",
      menuList: [],
      activeMenu: "myokr",
      viewMode: 1
    };
  },
  created() {
    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-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>
