<template>
  <div class="">
    <div class="flex row q-mb-md" v-if="user">
      <div class="col flex items-center row">
        <q-avatar
          size="40px"
          font-size="18px"
          rounded
          style="background:#C9F7F5"
          text-color="white"
        >
          <img :src="user.UserIcon" v-if="user.UserIcon" />
          <span v-else-if="user.EmployeeName">{{
            user.EmployeeName.substring(0, 1)
          }}</span>
        </q-avatar>
        <div class="text-h5 text-black q-ml-md">
          {{ user.EmployeeName }}
        </div>
        <div class="q-ml-md cursor-pointer" @click="setLikeUser">
          <inline-svg
            class="svg-icon svg-icon-grey"
            src="icons/svg/General/Star.svg"
            v-if="!likeStatus"
          ></inline-svg>
          <inline-svg
            class="svg-icon svg-icon-primary"
            src="icons/svg/General/Star.svg"
            v-if="likeStatus"
          ></inline-svg>
          <q-tooltip content-class="bg-dark">
            {{ !likeStatus ? "关注" : "取消关注" }}
          </q-tooltip>
        </div>
        <div class="col">&nbsp;</div>
        <div class="flex row q-mr-md">
          <q-btn-group outline class="q-mr-md">
            <template v-for="(x, i) in periodList">
              <q-btn
                @click="changePeriod(i)"
                :key="i"
                class="no-border-radius relative-position"
                outline
                color="grey-4"
                :class="[periodId == i ? 'action-btn' : 'no-action-btn']"
                :label="x.Name"
              >
                <div
                  class="absolute"
                  v-if="x.isHaveAudit"
                  style="top:-3px;right:6px;width:10px;height:10px;"
                >
                  <inline-svg
                    class="svg-icon svg-icon-negative"
                    src="icons/svg/Design/Circle.svg"
                    width="10"
                    height="10"
                  ></inline-svg>
                </div>
              </q-btn>
              <q-separator
                vertical
                v-if="i < periodList.length - 1"
                color="grey"
              ></q-separator>
            </template>
          </q-btn-group>
          <q-btn unelevated color="white icon-btn q-mr-md">
            <inline-svg
              class="svg-icon svg-icon-secondary"
              src="icons/svg/Communication/Chat6.svg"
            ></inline-svg>
            <q-tooltip content-class="bg-dark">
              评论
            </q-tooltip>
          </q-btn>
          <q-btn unelevated color="white icon-btn q-mr-md" @click="showOkrStatus">
            <inline-svg
              class="svg-icon"
              :class="{'svg-icon-secondary':!isShowRemark,'svg-icon-white':isShowRemark}"
              src="icons/svg/Code/Spy.svg"
            ></inline-svg>
            <q-tooltip content-class="bg-dark">
              填写助手
            </q-tooltip>
          </q-btn>
          <q-btn unelevated color="white icon-btn">
            <inline-svg
              class="svg-icon svg-icon-dark"
              src="icons/svg/General/Other2.svg"
            ></inline-svg>
            <q-popup-proxy :offset="[0, 5]" ref="showMoreOption">
              <q-list separator>
                <q-item
                  class="items-center"
                  @click="showHistory"
                  clickable
                  v-ripple
                >
                  <div>历史评论</div>
                </q-item>
              </q-list>
            </q-popup-proxy>
          </q-btn>
          <q-popup-proxy
            ref="historyBox"
            v-if="isShowBox"
            @hide="hideHistory"
            :offset="[-250, 5]"
          >
            <history-comment
              :periodId="periodList[periodId].Id"
              v-if="periodList && periodList.length > 0"
              :accountId="user.Id"
              @change="reloadComment"
            ></history-comment>
          </q-popup-proxy>
        </div>
      </div>
    </div>
    <div v-if="!reloading">
      <okr-add
        v-for="(x, i) in objectiveList"
        :key="i"
        :objective="x"
        :show-only="true"
        class="q-mb-lg"
        :ref="`object_${i}`"
        :audit-mode="auditMode"
        @audit-notify="deleteObjective"
        :user-id="userId"
        @reset-audit-notify="resetStatus"
      ></okr-add>
    </div>
    <div
      style="margin-top:200px;"
      v-if="objectiveList.length == 0 && !reloading"
    >
      <div class="q-mb-lg text-center">
        <img src="../../assets/images/nonedata.png" width="250px" />
      </div>
      <div class="q-mb-lg text-center">暂无数据</div>
    </div>
    <okr-commit
      :periodId="periodList[periodId].Id"
      v-if="periodList && periodList.length > 0 && objectiveList.length > 0"
      ref="commentBox"
      :show-only="true"
      :current-id="user.Id"
    ></okr-commit>
  </div>
</template>

<script>
import {
  queryOKRPeriodList,
  queryOtherObjectiveList,
  setUserLike,
  queryUserIsLike,
  getMyAuditList
} from "../../api/okr/work";
import okrAdd from "./okr-query";
import okrCommit from "./okr-commit";
import historyComment from "./history-comment";
export default {
  props: ["userObj", "auditMode", "peroids",'userId'],
  components: {
    okrAdd,
    okrCommit,
    historyComment
  },
  data() {
    return {
      periodList: [],
      user: {},
      periodId: 0,
      objectiveList: [],
      newObjective: {},
      reloading: true,
      isShowBox: false,
      likeStatus: false,
      auditPeroids: [],
      isShowRemark:false
    };
  },
  watch: {
    userObj: {
      handler(newV, oldV) {
        this.user = newV;
        this.init();
        this.queryLikeState();
      },
      deep: true
    },
    auditMode: {
      handler(newV, oldV) {
        this.init();
        if (newV) {
          this.auditPeroids = this.peroids.split(",");
        } else {
          this.auditPeroids = [];
        }
      },
      deep: true
    }
  },
  created() {
    this.user = this.userObj;
    if (this.auditMode) {
      this.auditPeroids = this.peroids.split(",");
    }
  },
  mounted() {
    this.init();
    this.queryLikeState();
  },
  methods: {
    showOkrStatus(){
      this.isShowRemark=!this.isShowRemark
      this.$emit('remark-status',this.isShowRemark)
    },
    queryLikeState() {
      queryUserIsLike({ UserId: this.user.Id }).then(r => {
        this.likeStatus = r.Data;
      });
    },
    hideHistory() {
      this.isShowBox = false;
    },
    showHistory() {
      this.isShowBox = true;
      setTimeout(() => {
        this.$refs.historyBox.show();
        this.$refs.showMoreOption.hide();
      }, 200);
    },
    changePeriod(id) {
      this.periodId = id;
      this.$emit("change", this.periodList[this.periodId].Id);
      this.reloading = true;
      if (this.auditMode) {
        this.queryMyAudits();
      } else {
        this.queryMyObjective();
      }
    },
    deleteObjective(id) {
      let index = 0;
      this.objectiveList.forEach((x, i) => {
        if (x.Id == id) {
          index = i;
        }
      });
      this.objectiveList.splice(index, 1);
      if(this.objectiveList.length==0){
        this.auditPeroids.splice(this.auditPeroids.indexOf(id.toString()),1)
        if(this.auditPeroids.length==0) {
          this.$emit('finish',this.user.Id)
        }
      }
    },
    resetStatus(id){
      let index = 0;
      this.objectiveList.forEach((x, i) => {
        if (x.Id == id) {
          index = i;
        }
      });
      let obj=this.user
      obj.PeriodIds=this.periodList[this.periodId].Id.toString()
      this.$emit('addAudit', obj)
    },
    init() {
      queryOKRPeriodList().then(r => {
        this.periodList = r.Data;
        this.periodList.forEach(x => {
          x.isHaveAudit = this.auditPeroids.indexOf(x.Id.toString()) != -1;
        });
        this.$emit("change", this.periodList[this.periodId].Id);
        if (!this.auditMode) {
          this.queryMyObjective();
        } else {
          this.queryMyAudits();
        }
      });
    },
    queryMyAudits() {
      getMyAuditList({
        UserId: this.user.Id,
        PeriodId: this.periodList[this.periodId].Id
      }).then(r => {
        this.objectiveList = r.Data;
        this.reloading = false;
      });
    },
    queryMyObjective() {
      let msg = {
        PeriodId: this.periodList[this.periodId].Id,
        UserId: this.user.Id
      };
      queryOtherObjectiveList(msg).then(r => {
        if (r.Data.List && r.Data.List.length > 0) {
          r.Data.List.forEach(x => {
            x.PeriodId = this.periodList[this.periodId].Id;
          });
          this.objectiveList = r.Data.List;
        } else {
          this.objectiveList = [];
        }
        this.reloading = false;
      });
    },
    reloadComment() {
      this.$refs.commentBox.queryCommit();
    },
    setLikeUser() {
      setUserLike({
        Type: this.likeStatus ? 2 : 1,
        UserId: this.user.Id
      }).then(r => {
        let obj = {
          status: this.likeStatus ? 2 : 1,
          user: this.user
        };
        this.$root.$emit("setLikes", obj);
        this.likeStatus = !this.likeStatus;
      });
    }
  }
};
</script>

<style>
.action-btn .q-btn__content .block {
  color: var(--q-color-primary) !important;
  font-weight: bold !important;
}
.no-action-btn .q-btn__content .block {
  color: var(--q-color-dark) !important;
}
.icon-btn .q-btn__wrapper {
  padding: 4px 8px !important;
}
</style>
