<template>
  <q-card
    style="margin-top:61px;width:600px;overflow:unset;"
    class="no-border-radius"
    v-if="node"
  >
    <q-card-section class="row items-center">
      <q-avatar
        size="40px"
        font-size="18px"
        rounded
        color="blue-2"
        text-color="blue-13"
      >
        <img :src="node.EmPhoto" v-if="node.EmPhoto" />
        <span v-else-if="node.EmName">{{ node.EmName.substring(0, 1) }}</span>
      </q-avatar>
      <div class="text-h6 col q-mx-md">{{ node.EmName }}</div>
      <div class="text-primary cursor-pointer" @click="openObjective(node)">
        查看详情
      </div>
    </q-card-section>
    <q-card-section v-if="newObjective">
      <okr-add
        :objective="newObjective"
        :show-only="true"
        class="q-mb-lg"
        :audit-mode="false"
        :user-id="0"
      ></okr-add>
    </q-card-section>
    <div
      class="dialog-out-close"
      v-close-popup
      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>
  </q-card>
</template>

<script>
import okrAdd from "./okr-query";
import { queryOtherSignObjective, querySignObject } from "../../api/okr/work";
import { mapGetters } from "vuex";
export default {
  props: ["obj", "proid"],
  components: {
    okrAdd
  },
  data() {
    return {
      node: {},
      newObjective: null
    };
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  watch: {
    obj: {
      handler(newValue, oldValue) {
        this.node = newValue;
        this.newObjective=null
        this.updatedObjective();
      },
      immediate: true,
      isDeep: true
    }
  },
  methods: {
    openObjective(x) {
      let obj = {
        Id: x.UserId,
        EmployeeName: x.EmName,
        UserIcon: x.EmPhoto
      };
      this.$root.$emit("openUserObj", obj);
    },
    updatedObjective() {
      if (this.userInfo.Id == this.node.UserId) {
        querySignObject({ ObjectiveId: this.node.Id }).then(r => {
          this.newObjective = r.Data;
          this.$forceUpdate();
        });
      } else {
        queryOtherSignObjective({
          ObjectiveId: this.node.Id,
          PeriodId: this.proid,
          UserId: this.node.UserId
        }).then(r => {
          this.newObjective = r.Data;
          this.$forceUpdate();
        });
      }
    }
  }
};
</script>

<style></style>
