<template>
  <div class="flex row  okr">
    <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
              @click="openUserObjective(x)"
              v-for="(x, i) in usersList"
              :key="i"
            >
              <q-item-section avatar>
                <q-avatar
                  style="background-color: #F3F6F9;"
                  rounded
                  size="40px"
                  text-color="secondary"
                >
                  <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="我的OKR" v-if="userInfo" default-opened>
          <q-item
            class="rounded-borders"
            @click="changeMenu('myokr', 1, null)"
            clickable
            v-ripple
            active-class="okr-menu-active"
            :active="activeMenu == 'myokr'"
          >
            <q-item-section avatar>
              <q-avatar
                style="background-color: #F3F6F9;"
                rounded
                size="20px"
                text-color="secondary"
              >
                <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.ParentList && menuList.ParentList.length > 0"
        >
          <q-item
            class="rounded-borders"
            @click="changeMenu(`parent_${x.Id}`, 2, x)"
            clickable
            v-ripple
            active-class="okr-menu-active"
            :active="activeMenu == `parent_${x.Id}`"
            v-for="(x, i) in menuList.ParentList"
            :key="`parent_${x.Id}`"
          >
            <q-item-section avatar>
              <el-badge is-dot>
                <q-avatar
                  style="background-color: #F3F6F9;"
                  rounded
                  size="20px"
                  text-color="secondary"
                >
                  <img :src="x.UserIcon" v-if="x.UserIcon" />
                  <span v-else>{{ x.EmployeeName.substring(0, 1) }}</span>
                </q-avatar>
              </el-badge>
            </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-expansion-item
          dense
          label="待我审批"
          default-opened
          v-if="aduitsList && aduitsList.length > 0"
        >
          <q-item
            class="rounded-borders"
            @click="changeMenu(`aduits_${x.Id}`, 2, x)"
            clickable
            v-ripple
            active-class="okr-menu-active"
            :active="activeMenu == `aduits_${x.Id}`"
            v-for="(x, i) in aduitsList"
            :key="`align_${x.Id}`"
          >
            <q-item-section avatar>
              <q-avatar
                style="background-color: #F3F6F9;"
                rounded
                size="20px"
                text-color="secondary"
              >
                <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"
              ></inline-svg>
            </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="okr-menu-active"
            :active="activeMenu == `child_${x.Id}`"
            v-for="(x, i) in menuList.ChildList"
            :key="`child_${x.Id}`"
          >
            <q-item-section avatar>
              <q-avatar
                style="background-color: #F3F6F9;"
                rounded
                size="20px"
                text-color="secondary"
              >
                <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-expansion-item
          dense
          label="我的同级"
          default-opened
          v-if="menuList.SiblingList && menuList.SiblingList.length > 0"
        >
          <q-item
            class="rounded-borders"
            @click="changeMenu(`sibling_${x.Id}`, 2, x)"
            clickable
            v-ripple
            active-class="okr-menu-active"
            :active="activeMenu == `sibling_${x.Id}`"
            v-for="(x, i) in menuList.SiblingList"
            :key="`sibling_${x.Id}`"
          >
            <q-item-section avatar>
              <q-avatar
                style="background-color: #F3F6F9;"
                rounded
                size="20px"
                text-color="secondary"
              >
                <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-expansion-item
          dense
          label="我的关注"
          default-opened
          v-if="menuList.AttentionList && menuList.AttentionList.length > 0"
        >
          <q-item
            class="rounded-borders"
            @click="changeMenu(`attentionList_${x.Id}`, 2, x)"
            clickable
            v-ripple
            active-class="okr-menu-active"
            :active="activeMenu == `attentionList_${x.Id}`"
            v-for="(x, i) in menuList.AttentionList"
            :key="`attentionList_${x.Id}`"
          >
            <q-item-section avatar>
              <q-avatar
                style="background-color: #F3F6F9;"
                rounded
                size="20px"
                text-color="secondary"
              >
                <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-expansion-item
          dense
          label="我的对齐"
          default-opened
          v-if="alignList && alignList.length > 0"
        >
          <q-item
            class="rounded-borders"
            @click="changeMenu(`align_${x.Id}`, 2, x)"
            clickable
            v-ripple
            active-class="okr-menu-active"
            :active="activeMenu == `align_${x.Id}`"
            v-for="(x, i) in alignList"
            :key="`align_${x.Id}`"
          >
            <q-item-section avatar>
              <q-avatar
                style="background-color: #F3F6F9;"
                rounded
                size="20px"
                text-color="secondary"
              >
                <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 scroll myscroll" style="padding-top: 16px;">
      <okr-info
        :user-obj="userParam"
        @change="queryMyList"
        @remark-status="updateOkrRemarkStatus"
        v-if="!isOtherUser"
      ></okr-info>
      <okr-emp-info
        :user-id="userInfo.Id"
        :user-obj="chosenUser"
        @remark-status="updateOkrRemarkStatus"
        v-if="isOtherUser"
        :audit-mode="auditMode"
        :peroids="auditPeroids"
        @finish="deleteAuditUser"
        @addAudit="insertAuditUser"
      ></okr-emp-info>
    </div>
    <div class="col-auto" v-if="showOkrRemark" style="height:100%">
      <gruid></gruid>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  queryOKRMyEmployeeList,
  queryAlignList,
  getMyAuditUsersList
} from "../../api/okr/work";
import { queryEmployee } from "../../api/users/user";
import okrInfo from "../../components/okr/okr-info";
import okrEmpInfo from "../../components/okr/okr-emp-info";
import gruid from "../../components/okr/guide";
export default {
  data() {
    return {
      searchText: "",
      activeMenu: "myokr",
      menuList: {},
      userParam: {},
      alignList: [],
      isOtherUser: false,
      chosenUser: {},
      usersList: [],
      showResult: false,
      aduitsList: [],
      auditMode: false,
      auditPeroids: "",
      showOkrRemark: false
    };
  },
  components: {
    okrInfo,
    okrEmpInfo,
    gruid
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  mounted() {
    this.getUserList();
    this.queryAuditsList();
    setTimeout(() => {
      this.getMe();
    }, 1000);
  },
  created() {
    this.$root.$on("setLikes", this.setLike);
    this.$root.$on("openUserObj", this.openUserObjective);
  },
  beforeDestroy() {
    this.$root.$off("setLikes", this.setLike);
    this.$root.$off("openUserObj", this.openUserObjective);
  },
  methods: {
    updateOkrRemarkStatus(val) {
      this.showOkrRemark = val;
    },
    insertAuditUser(obj) {
      let index = -1;
      this.aduitsList.forEach((x, i) => {
        if (x.Id == obj.Id) {
          if (x.PeriodIds.split(",").indexOf(obj.PeriodIds) == -1) {
            x.PeriodIds += "," + obj.PeriodIds;
          }
        }
      });
      if (index == -1) {
        this.aduitsList.push(obj);
      }
    },
    deleteAuditUser(id) {
      let index = 0;
      this.aduitsList.forEach((x, i) => {
        if (x.Id == id) {
          index = i;
        }
      });
      this.aduitsList.splice(index, 1);
    },
    queryAuditsList() {
      getMyAuditUsersList({
        PeriodId: 0
      }).then(r => {
        this.aduitsList = r.Data;
      });
    },
    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;
          }
        });
      }
    },
    setLike(obj) {
      if (obj.status == 2) {
        let i = -1;
        this.menuList.AttentionList.forEach((x, index) => {
          if (x.Id == obj.user.Id) {
            i = index;
          }
        });
        if (i != -1) {
          this.menuList.AttentionList.splice(i, 1);
        }
      } else {
        this.menuList.AttentionList.push(obj.user);
      }
    },
    getUserList() {
      queryOKRMyEmployeeList().then(res => {
        this.menuList = res.Data;
      });
    },
    changeMenu(m, t, obj) {
      this.activeMenu = m;
      if (t == 1) {
        this.getMe();
        this.isOtherUser = false;
      } else {
        this.auditMode = m.indexOf("aduits_") != -1 && obj.PeriodIds != "";
        this.chosenUser = obj;
        this.isOtherUser = true;
        this.auditPeroids = obj.PeriodIds;
      }
      this.showOkrRemark=false
    },
    openUserObjective(obj) {
      this.isOtherUser = obj.Id != this.userInfo.Id;
      if (this.isOtherUser) {
        this.chosenUser = obj;
      } else {
        this.getMe();
      }
      this.activeMenu = "";
      this.searchText = "";
      this.auditMode = false;
      this.auditPeroids = "";
      this.usersList = [];
      this.showResult = false;
      this.showOkrRemark=false;
    },
    getMe() {
      this.userParam = {
        UserIcon: this.userInfo.UserIcon,
        Id: this.userInfo.Id,
        EmployeeName: this.userInfo.AccountName
      };
    },
    queryMyList(PeriodId) {
      queryAlignList({
        PeriodId
      }).then(r => {
        this.alignList = r.Data;
      });
    }
  }
};
</script>

<style>
.okr {
  height: 100%;
  width: 100%;
}
.okr .lft-box {
  padding-left: 24px;
  width: 248px;
  flex: 0 0 auto;
  position: relative;
  padding-right: 16px;
  padding-top: 16px;
}
.okr .okr-menu-active {
  color: var(--q-color-primary);
  font-weight: bold;
  background: #ecf1ff;
}
</style>
