<template>
  <div style="width:420px;">
    <q-input
      flat
      v-model="searchText"
      style="margin:0 12px;"
      borderless
      placeholder="按姓名搜索同事"
      @input="querySearchResult"
    >
      <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="results">
      <div class="result-item" v-for="(x, i) in usersList" :key="i">
        <div class="bg-grey-3 flex row items-center" style="padding:6px 12px">
          <q-avatar
            size="20px"
            font-size="14px"
            rounded
            color="blue-2"
            text-color="blue-13"
          >
            <img :src="x.UserPhoto" v-if="x.UserPhoto" />
            <span v-else-if="x.UserName">{{ x.UserName.substring(0, 1) }}</span>
          </q-avatar>
          <div class="q-mx-md remark-font">{{ x.UserName }}</div>
          <div class="col remark-font">{{ x.DeptName }}·{{ x.PostName }}</div>
        </div>
        <q-list v-if="x.List && x.List.length > 0">
          <template v-for="(y, yi) in x.List">
            <q-item
              class="rounded-borders"
              clickable
              v-ripple
              v-if="y.IsNotLook != 1"
              :key="yi"
              active-class="bg-red"
              :disable="y.IsParent == 1"
              @click="setAlign(x, y)"
            >
              <div class="flex row items-center">
                <div style="width:30px;margin-top:5px;">
                  <inline-svg
                    v-if="y.IsLock == 1"
                    class="svg-icon svg-icon-grey"
                    src="icons/svg/General/Lock.svg"
                    width="14px"
                    height="14px"
                  ></inline-svg>
                  <q-tooltip
                    content-class="bg-dark text-white"
                    v-if="y.IsLock == 1"
                    >已设保密，请勿外出</q-tooltip
                  >
                </div>
                <div class="col">
                  <span>Objective{{ yi + 1 }}:{{ y.Title }}</span>
                  <q-tooltip
                    content-class="bg-dark text-white"
                    v-if="y.IsParent == 1"
                    >已对其，无需再次对齐</q-tooltip
                  >
                </div>
              </div>
            </q-item>
          </template>
        </q-list>
        <div v-else class="q-pa-md text-center remark-font">暂无objective</div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryObjectiveBySearch, setAlign } from "../../api/okr/work";
export default {
  props: ["periodId", "sourceId"],
  data() {
    return {
      searchText: "",
      usersList: []
    };
  },
  methods: {
    querySearchResult() {
      this.usersList = [];
      this.searchText = this.searchText.trim();
      if (this.searchText != "") {
        queryObjectiveBySearch({
          PeriodId: this.periodId,
          UserName: this.searchText,
          ObjectiveId: this.sourceId
        }).then(r => {
          this.usersList = r.Data;
        });
      }
    },
    setAlign(x, y) {
      if (y.IsNotLook == 2 && y.IsParent == 2) {
        let temp = JSON.parse(JSON.stringify(y));
        setAlign({
          ObjectiveId: this.sourceId,
          ParentId: y.Id
        }).then(r => {
          this.$q.notify({
            message: "对齐成功",
            color: "#21ba45",
            position: "top"
          });
          y.IsParent=1;
          let newObj = {
            AccountId: 0,
            AccountName: x.UserName,
            AlignList: [y],
            Icon:x.UserPhoto
          };
          this.$emit('add',newObj)
        });
      }
    }
  }
};
</script>

<style></style>
