<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 col">
          {{ user.EmployeeName }}
        </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"
                outline
                color="grey-4"
                :class="[periodId == i ? 'action-btn' : 'no-action-btn']"
                :label="x.Name"
              />
              <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="isShowRemark?'secondary':'white'" @click="showOkrStatus" class="icon-btn q-mr-md" >
            <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"
                  clickable
                  v-ripple
                  @click="openPower"
                  >周期权限设置</q-item
                >
                <q-item class="items-center" clickable v-ripple
                  >历史版本</q-item
                >
                <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"
        @delete="deleteObjective"
        @cancel="changeUpdate"
        class="q-mb-lg"
        :ref="`object_${i}`"
        :period='periodList[periodId]'
      ></okr-add>
    </div>
    <!-- <okr-add
      :objective="newObjective"
      v-if="adding && !reloading"
      @cancel="changeUpdate"
    ></okr-add> -->
    <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 class="q-mb-lg text-center">
        <q-btn unelevated color="primary" @click="createNewObjective()">
          <inline-svg
            class="svg-icon svg-icon-white  q-mr-xs"
            src="icons/svg/Navigation/Plus.svg"
          ></inline-svg>
          添加 Objective
        </q-btn>
      </div>
    </div>
    <div
      class="q-my-md q-mr-md cursor-pointer"
      @click="createNewObjective"
      v-else
    >
      <q-banner class="bg-white" rounded>
        <div class="row items-center hover-primary">
          <q-avatar
            style="background-color: #eaeaea;"
            rounded
            size="30px"
            class="q-mr-md"
          >
            <inline-svg
              class="svg-icon svg-icon-white  q-mr-xs"
              src="icons/svg/Navigation/Plus.svg"
            ></inline-svg>
          </q-avatar>
          <span class="text-subtitle2">添加 Objective</span>
        </div>
      </q-banner>
    </div>
    <okr-commit
      :periodId="periodList[periodId].Id"
      v-if="periodList && periodList.length > 0"
      ref="commentBox"
    ></okr-commit>
    <q-dialog v-model="showPower">
      <kr-power
        :kr="krPwoerInfo"
        :type="powerType"
        @save="saveFinish"
      ></kr-power>
    </q-dialog>
  </div>
</template>

<script>
import { queryOKRPeriodList, queryMyOKR } from "../../api/okr/work";
import okrAdd from "./okr-add";
import krPower from "./kr-power";
import okrCommit from "./okr-commit";
import historyComment from "./history-comment";
export default {
  props: ["userObj"],
  components: {
    okrAdd,
    krPower,
    okrCommit,
    historyComment
  },
  data() {
    return {
      periodList: [],
      user: {},
      periodId: 0,
      objectiveList: [],
      newObjective: {},
      reloading: true,
      showPower: false,
      krPwoerInfo: {},
      powerType: 3,
      isShowBox: false,
      isShowRemark:false
    };
  },
  watch: {
    userObj: {
      handler(newV, oldV) {
        this.user = newV;
      },
      deep: true
    }
  },
  mounted() {
    this.init();
     this.user =this.userObj
  },
  methods: {
    showOkrStatus(){
      this.isShowRemark=!this.isShowRemark
      this.$emit('remark-status',this.isShowRemark)
    },
    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;
      this.queryMyObjective();
    },
    deleteObjective(id) {
      let index = 0;
      this.objectiveList.forEach((x, i) => {
        if (x.Id == id) {
          index = i;
        }
      });
      this.objectiveList.splice(index, 1);
    },
    openPower() {
      this.krPwoerInfo = this.periodList[this.periodId];
      this.powerType = 1;
      this.showPower = true;
    },
    saveFinish() {
      this.showPower = false;
    },
    init() {
      queryOKRPeriodList().then(r => {
        this.periodList = r.Data;
        this.periodList.forEach((x,i)=>{
          if(x.IsCurrent==1){
            this.periodId=i
          }
        })
        this.$emit("change",this.periodList[this.periodId].Id)
        this.queryMyObjective();
      });
    },
    queryMyObjective() {
      let msg = {
        PeriodId: this.periodList[this.periodId].Id
      };
      queryMyOKR(msg).then(r => {
        r.Data.forEach(x => {
          x.PeriodId = this.periodList[this.periodId].Id;
        });
        this.objectiveList = r.Data;
        this.reloading = false;
      });
    },
    createNewObjective() {
      if (
        this.objectiveList.length == 0 ||
        this.objectiveList[this.objectiveList.length - 1].Id != 0
      ) {
        this.newObjective = {
          Id: 0,
          Title: "",
          PeriodId: this.periodList[this.periodId].Id,
          ProgressRemark: "",
          placeHolder: ""
        };
        this.objectiveList.push(this.newObjective);
        setTimeout(() => {
          let keyn = `object_${this.objectiveList.length - 1}`;
          this.$refs[keyn][0].$refs.obj_content.focus();
        }, 200);
      } else {
        let keyn = `object_${this.objectiveList.length - 1}`;
        this.$refs[keyn][0].$refs.obj_content.focus();
      }
    },
    changeUpdate() {
      this.objectiveList.splice(this.objectiveList.length - 1, 1);
    },
    reloadComment(){
      this.$refs.commentBox.queryCommit()
    }
  }
};
</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>
