<template>
  <q-card class="q-py-md no-shadow q-mr-md okr-add">
    <q-input
      v-model="newObjective.Title"
      autogrow
      ref="obj_content"
      :outlined="newBoxState"
      :placeholder="newObjective.placeHolder"
      :autofocus="newObjective.Id == 0"
      :style="{ 'margin-left': newBoxState ? '-12px' : '15px' }"
      @focus="changeState(1)"
      @blur="changeState(2)"
    >
      <template v-slot:before>
        <div class="relative-position" v-if="!newBoxState">
          <inline-svg
            class="svg-icon"
            :class="{
              'svg-icon-primary': newObjective.Status == 2,
              'svg-icon-grey': newObjective.Status == 4,
              'svg-icon-accent': newObjective.Status == 1,
              'svg-icon-negative': newObjective.Status == 3
            }"
            src="icons/svg/Communication/Flag.svg"
          ></inline-svg>
          <q-tooltip content-class="bg-dark">
            {{ newObjective.Status == 1 ? "审核中" : "" }}
            {{ newObjective.Status == 2 ? "审核通过" : "" }}
            {{ newObjective.Status == 3 ? "审核不通过" : "" }}
            {{ newObjective.Status == 4 ? "未提交审核" : "" }}
          </q-tooltip>
          <okr-align
            :obj="newObjective"
            :periodId="periodId"
            direction="up"
            v-if="newObjective.Id > 0"
          ></okr-align>
          <okr-align
            :obj="newObjective"
            :periodId="periodId"
            direction="down"
            v-if="newObjective.ChildList && newObjective.ChildList.length > 0"
          ></okr-align>
        </div>
      </template>
      <template v-slot:prepend>
        <div class="relative-position">
          <inline-svg
            v-if="newBoxState"
            class="svg-icon"
            :class="{
              'svg-icon-primary': newObjective.Status == 2,
              'svg-icon-grey': newObjective.Status == 4,
              'svg-icon-accent': newObjective.Status == 1,
              'svg-icon-negative': newObjective.Status == 3
            }"
            src="icons/svg/Communication/Flag.svg"
          ></inline-svg>
          <q-tooltip content-class="bg-dark">
            {{ newObjective.Status == 1 ? "审核中" : "" }}
            {{ newObjective.Status == 2 ? "审核通过" : "" }}
            {{ newObjective.Status == 3 ? "审核不通过" : "" }}
            {{ newObjective.Status == 4 ? "未提交审核" : "" }}
          </q-tooltip>
          <div
            class="absolute"
            style="bottom:0px;right:5px;height:14px;"
            v-if="newObjective.IsLock == 1"
          >
            <inline-svg
              v-if="!newBoxState"
              class="svg-icon svg-icon-grey"
              src="icons/svg/General/Lock.svg"
              width="14px"
              height="14px"
            ></inline-svg>
          </div>
        </div>
      </template>
      <template v-slot:append>
        <div
          class="flex row"
          v-if="newObjective.Title && newObjective.Title.length > 0"
        >
          <div>
            <span class="block remark-font text-right">进度</span>
            <q-btn dense flat color="white" text-color="dark">
              <q-circular-progress
                :value="newObjective.Progress"
                size="xs"
                :thickness="0.5"
                :color="
                  newObjective.ProgressState == 1
                    ? 'primary'
                    : newObjective.ProgressState == 2
                    ? 'orange'
                    : 'negative'
                "
                track-color="grey-3"
                class="q-mr-md"
              />
              <span>{{ newObjective.Progress }}%</span>
              <q-popup-proxy @show="showProgress">
                <objective-process
                  :obj="newObjective"
                  @close="changeObjProgressStatus"
                ></objective-process>
              </q-popup-proxy>
            </q-btn>
          </div>
          <div class="q-mx-lg">
            <span class="block remark-font text-right">权重</span>
            <q-btn
              dense
              flat
              color="white"
              text-color="dark"
              label="100%"
              disable
            ></q-btn>
          </div>
          <div class="q-mr-lg">
            <span class="block remark-font text-right">总分</span>
            <inline-svg
              class="svg-icon svg-icon-g-p"
              src="icons/svg/Home/Bulb1.svg"
              width="16px"
              height="16px"
              v-if="
                !newObjective.KeyResultList ||
                  newObjective.KeyResultList.length == 0
              "
            ></inline-svg>
            <q-btn
              dense
              flat
              color="white"
              text-color="dark"
              :label="newObjective.Score.toFixed(1)"
              disable
              v-else
            ></q-btn>
            <q-tooltip
              content-class="bg-white text-black"
              v-if="
                !newObjective.KeyResultList ||
                  newObjective.KeyResultList.length == 0
              "
            >
              未添加Key Result
            </q-tooltip>
            <q-tooltip content-class="bg-black text-white" v-else>
              通过为「KeyResult」打分，来改变「Objective」的得分
            </q-tooltip>
          </div>
          <div class="q-mr-lg">
            <span class="block remark-font text-right">&nbsp;</span>
            <q-btn dense flat color="white" text-color="dark">
              <inline-svg
                class="svg-icon svg-icon-g-p"
                src="icons/svg/General/Other2.svg"
                width="16px"
                height="16px"
              ></inline-svg>
              <q-popup-proxy :offset="[0, 5]">
                <q-list separator style="width:220px;">
                  <q-item
                    class="items-center"
                    clickable
                    v-ripple
                    @click="openPower(newObjective, 2)"
                  >
                    <q-item-section avatar>
                      <inline-svg
                        class="svg-icon svg-icon-g-p"
                        src="icons/svg/Code/Lock-overturning.svg"
                        width="20px"
                        height="20px"
                      ></inline-svg>
                    </q-item-section>
                    <q-item-section>设置Objective权限</q-item-section>
                  </q-item>
                  <q-item
                    class="items-center"
                    clickable
                    v-ripple
                    v-if="newObjective.Status == 3 || newObjective.Status == 4"
                    @click="setObjectiveStatus"
                  >
                    <q-item-section avatar>
                      <inline-svg
                        class="svg-icon svg-icon-g-p"
                        src="icons/svg/General/Shield-check.svg"
                        width="20px"
                        height="20px"
                      ></inline-svg>
                    </q-item-section>
                    <q-item-section>提交审核</q-item-section>
                  </q-item>
                  <q-item
                    class="items-center"
                    clickable
                    v-ripple
                    v-if="newObjective.Status == 3 || newObjective.Status == 4"
                    @click="setObjectiveStatus"
                  >
                    <q-item-section avatar>
                      <inline-svg
                        class="svg-icon svg-icon-g-p"
                        src="icons/svg/General/Shield-check.svg"
                        width="20px"
                        height="20px"
                      ></inline-svg>
                    </q-item-section>
                    <q-item-section>提交审核</q-item-section>
                  </q-item>
                  <q-item
                    class="items-center"
                    clickable
                    v-ripple
                    @click="deleteObjective"
                  >
                    <q-item-section avatar>
                      <inline-svg
                        class="svg-icon svg-icon-g-p"
                        src="icons/svg/Home/Trash.svg"
                        width="20px"
                        height="20px"
                      ></inline-svg>
                    </q-item-section>
                    <q-item-section>删除</q-item-section>
                  </q-item>
                </q-list>
              </q-popup-proxy>
            </q-btn>
          </div>
        </div>
      </template>
    </q-input>

    <q-input
      v-for="(x, i) in keysReuslt"
      :key="i"
      :ref="`keys_result_${i}`"
      v-model="x.Name"
      autogrow
      :outlined="false"
      :placeholder="x.placeHolder"
      @focus="changeKeysState(1, i)"
      @blur="changeKeysState(2, i)"
      class="q-mt-md"
      style="margin-left:51px"
    >
      <!-- x.newBoxState-->
      <template v-slot:prepend>
        <inline-svg
          class="svg-icon svg-icon-primary"
          src="icons/svg/Design/Circle.svg"
          width="14px"
          height="14px"
          v-if="x.IsLock == 2"
        ></inline-svg>
        <inline-svg
          class="svg-icon svg-icon-grey"
          src="icons/svg/General/Lock.svg"
          width="14px"
          height="14px"
          v-if="x.IsLock == 1"
        ></inline-svg>
      </template>
      <template v-slot:append>
        <div
          class="flex row"
          v-if="newObjective.Title && newObjective.Title.length > 0"
        >
          <div class="q-mr-lg" v-if="x.RuleId > 0" style="margin-top:22px">
            <inline-svg
              class="svg-icon svg-icon-secondary"
              src="icons/svg/General/Save.svg"
              width="20px"
              height="20px"
            ></inline-svg>
            <q-tooltip content-class="bg-dark"
              >使用模板「{{
                x.RuleName
              }}」自动更新进度，<br />更新时间间隔一小时</q-tooltip
            >
          </div>
          <div>
            <span class="block remark-font text-right">进度</span>
            <q-btn dense flat color="white" text-color="dark">
              <q-circular-progress
                :value="x.Progress"
                size="xs"
                :thickness="0.4"
                :color="
                  x.ProgressState == 1
                    ? 'primary'
                    : x.ProgressState == 2
                    ? 'orange'
                    : 'negative'
                "
                track-color="grey-3"
                class="q-mr-md"
              />
              <span>{{ x.Progress }}%</span>
              <q-popup-proxy
                @hide="saveKrProgress(x)"
                @show="showProgress"
                v-if="x.Id && x.Id != 0"
              >
                <process
                  :kr="x"
                  @change-process="updateKrProcess($event, i)"
                ></process>
              </q-popup-proxy>
            </q-btn>
          </div>
          <div class="q-mx-lg" style="width:51px;text-align:right">
            <span class="block remark-font text-right">权重</span>
            <q-btn
              dense
              flat
              color="white"
              text-color="dark"
              :label="(x.Weight ? x.Weight : '0.00') + '%'"
              :disable="x.hideWeight"
            >
              <q-popup-edit
                v-model.number="x.Weight"
                v-if="!x.hideWeight"
                buttons
                label-set="确认"
                label-cancel="取消"
                persistent
                @save="changeWeight(i)"
              >
                <q-input
                  type="number"
                  v-model.number="x.Weight"
                  dense
                  autofocus
                  min="0"
                  max="100"
                  @keyup="validateWeight(x.Weight, i)"
                />
              </q-popup-edit>
            </q-btn>
            <q-tooltip content-class="bg-black text-white" v-if="x.hideWeight">
              你可以通过设置其他 Key Results 的权重更改此权重
            </q-tooltip>
          </div>
          <div class="q-mr-lg">
            <span class="block remark-font text-right">总分</span>
            <q-btn
              dense
              flat
              color="white"
              text-color="dark"
              v-if="x.Id && x.Id != 0"
              :label="x.Score ? x.Score : '0.0'"
            >
              <q-popup-edit
                v-model.number="x.Score"
                buttons
                label-set="确认"
                label-cancel="取消"
                persistent
                @hide="changeScore(i)"
              >
                <q-input
                  v-model="x.Score"
                  dense
                  autofocus
                  :ref="`score${i}`"
                  @keyup="validateScore(i)"
                />
              </q-popup-edit>
            </q-btn>
          </div>
          <div class="q-mr-lg">
            <span class="block remark-font text-right">&nbsp;</span>
            <q-btn dense flat color="white" text-color="dark">
              <inline-svg
                class="svg-icon svg-icon-g-p"
                src="icons/svg/General/Other2.svg"
                width="16px"
                height="16px"
              ></inline-svg>
              <q-popup-proxy :offset="[0, 5]" v-if="x.Id && x.Id > 0">
                <q-list separator style="width:220px;">
                  <q-item
                    class="items-center"
                    clickable
                    v-ripple
                    @click="openPower(x, 3)"
                  >
                    <q-item-section avatar>
                      <inline-svg
                        class="svg-icon svg-icon-g-p"
                        src="icons/svg/Code/Lock-overturning.svg"
                        width="20px"
                        height="20px"
                      ></inline-svg>
                    </q-item-section>
                    <q-item-section>Key Result权限设置</q-item-section>
                  </q-item>
                  <q-item
                    class="items-center"
                    clickable
                    v-ripple
                    @click="openUnion(x)"
                  >
                    <q-item-section avatar>
                      <inline-svg
                        class="svg-icon svg-icon-g-p"
                        src="icons/svg/General/Save.svg"
                        width="20px"
                        height="20px"
                      ></inline-svg>
                    </q-item-section>
                    <q-item-section>{{
                      x.RuleId == 0 ? "关联系统数据" : "修改关联模板"
                    }}</q-item-section>
                  </q-item>
                  <q-item
                    class="items-center"
                    clickable
                    v-ripple
                    v-if="x.RuleId>0"
                    @click="cancelRule(x.Id)"
                  >
                    <q-item-section avatar>
                      <inline-svg
                        class="svg-icon svg-icon-g-p"
                        src="icons/svg/Navigation/Minus.svg"
                        width="20px"
                        height="20px"
                      ></inline-svg>
                    </q-item-section>
                    <q-item-section>删除关联模板</q-item-section>
                  </q-item>
                  <q-item
                    class="items-center"
                    clickable
                    v-ripple
                    @click="deleteMyKR(x.Id, i)"
                  >
                    <q-item-section avatar>
                      <inline-svg
                        class="svg-icon svg-icon-g-p"
                        src="icons/svg/Home/Trash.svg"
                        width="20px"
                        height="20px"
                      ></inline-svg>
                    </q-item-section>
                    <q-item-section>删除</q-item-section>
                  </q-item>
                </q-list>
              </q-popup-proxy>
            </q-btn>
          </div>
        </div>
      </template>
    </q-input>
    <div
      class="q-my-md flex row items-center hover-g-p"
      style="padding-left:51px;"
      v-if="newObjective.Title && newObjective.Title.length > 0"
      @click="addKeyReuslt"
    >
      <inline-svg
        class="svg-icon q-mr-md"
        src="icons/svg/Navigation/Plus.svg"
      ></inline-svg>
      <span>添加Key Result</span>
    </div>
    <q-separator></q-separator>
    <div class="q-pa-md" :class="{ 'round all-borders': showProgressRemark }">
      <div class="flex row items-start">
        <div
          class="bg-grey-3 flex items-center justify-center q-mr-md"
          style="height:30px;width:30px;border-radius:30px;"
        >
          <inline-svg
            class="svg-icon svg-icon-grey"
            src="icons/svg/General/Bookmark.svg"
            width="20px"
            height="20px"
          ></inline-svg>
        </div>
        <div
          class="col text-blue-grey-4 text-caption  q-mt-xs"
          @click="addProgressRemark"
          v-if="newObjective.ProgressRemark == '' && !showProgressRemark"
        >
          进度记录：保持更新，让小伙伴们看到你的进度
        </div>
        <div class="col" v-else>
          <div
            class="text-subtitle2 text-weight-bold  q-my-xs"
            @click="addProgressRemark"
          >
            进度记录
          </div>
          <progress-remark
            v-if="newObjective"
            :value.sync="newObjective.ProgressRemark"
            @focus="showProgressRemark = true"
            @blur="closeProgressRemark"
            ref="progressEditor"
          ></progress-remark>
          <!-- <div class="text-body2" v-else v-html="newObjective.ProgressRemark"></div>v-if="showProgressRemark" -->
        </div>
      </div>
    </div>
    <q-separator
      v-if="
        (newObjective.Status == 2 || newObjective.Status == 3) &&
          newObjective.AuditUserId &&
          newObjective.AuditUserId > 0
      "
    ></q-separator>
    <div
      v-if="
        (newObjective.Status == 2 || newObjective.Status == 3) &&
          newObjective.AuditUserId &&
          newObjective.AuditUserId > 0
      "
      class="q-pa-md"
    >
      <div class="flex row items-start">
        <div
          class="bg-grey-3 flex items-center justify-center q-mr-md"
          style="height:30px;width:30px;border-radius:30px;"
        >
          <inline-svg
            class="svg-icon"
            :class="{
              'svg-icon-primary': newObjective.Status == 2,
              'svg-icon-negative': newObjective.Status == 3
            }"
            src="icons/svg/General/Shield-check.svg"
            width="20px"
            height="20px"
          ></inline-svg>
        </div>
        <div class="col  okr-audit">
          <div class="text-subtitle2 text-weight-bold  q-my-xs">
            <span class="q-mr-md">OKR审核</span>
            <span
              :class="{
                'text-primary': newObjective.Status == 2,
                'text-negative': newObjective.Status == 3
              }"
              >【{{ newObjective.Status == 2 ? "通过" : "不通过" }}】</span
            >
          </div>
        </div>
      </div>
      <q-card flat class="q-mt-md">
        <q-card-section>
          <div class="flex row items-center">
            <q-avatar
              size="40px"
              font-size="18px"
              rounded
              color="orange-2"
              text-color="orange"
              class="text-weight-bold"
            >
              <img :src="newObjective.UserIcon" v-if="newObjective.UserIcon" />
              <span v-else-if="newObjective.AuditUserName">{{
                newObjective.AuditUserName.substring(0, 1)
              }}</span>
            </q-avatar>
            <div class="col q-ml-md">
              <div class="text-subtitle1">{{ newObjective.AuditUserName }}</div>
              <div class="remark-font">{{ newObjective.AuditTime }}</div>
            </div>
          </div>
          <div class="q-mt-md">
            {{ decodeURIComponent(newObjective.AuditRemark) }}
          </div>
        </q-card-section>
      </q-card>
    </div>
    <q-dialog v-model="showPower">
      <kr-power
        :kr="krPwoerInfo"
        :type="powerType"
        @save="saveFinish"
      ></kr-power>
    </q-dialog>
    <q-dialog v-model="showUnion">
      <kr-union
        :kr="krPwoerInfo"
        :period="period"
        @save="saveUnionFinish"
      ></kr-union>
    </q-dialog>
  </q-card>
</template>

<script>
import {
  saveMyObjective,
  saveMyKR,
  deleteMyKR,
  querySignObject,
  saveKRWeight,
  setKRProgressState,
  setKRProgress,
  setKRScore,
  setObjectiveProgress,
  setObjectiveState,
  deleteKRRule
} from "../../api/okr/work";
import process from "./okr-process";
import objectiveProcess from "./objective-process";
import krPower from "./kr-power";
import progressRemark from "./progressRemark";
import okrAlign from "./okr-align";
import krUnion from "./kr-union";
export default {
  props: ["objective", "period"],
  components: {
    process,
    objectiveProcess,
    krPower,
    progressRemark,
    okrAlign,
    krUnion
  },
  data() {
    return {
      newBoxState: true,
      newObjective: {},
      placeList: [
        "添加 Objective：描述清楚要达成的状态，不要只写一个模糊的词（如「XX 项目」、「其他」、「重点项目」）",
        "添加 Objective：不要只是列举工作范围，描述一下想达成的状态",
        "添加 Objective：Objective 只写一个词，往往是目标不清晰的表现",
        "添加 Objective：「继续推进……」不是一个好的 Objective，试着描述「推进到……状态」吧",
        "添加 Objective：目标要与上下级、配合团队对齐，避免各自为政",
        "添加 Objective：使用 OKR 系统的「对齐」功能，更明确地做好目标对齐工作",
        "添加 Objective：同一个目标反复出现，说明没有做好分解",
        "添加 Objective：Objective 不是工作职责的罗列，而是经过筛选的重点目标",
        "添加 Objective：Business-as-usual 不需要写进目标，尽量少用「继续」、「持续」这类词汇",
        "添加 Objective：如果不需要团队付出额外努力、没有重大变化，就不要写"
      ],
      keysReusltPlaceList: [
        "添加 Key Result：Key Result 要支持 Objective，一般 3 个左右为宜",
        "添加 Key Result：决定产出的往往只有几个最重要的事情",
        "添加 Key Result：Key Result 要可衡量，不写「混水摸鱼」式的 Key Result",
        "添加 Key Result：尽量少用「参与」、「帮助」、「分析」这类难以衡量结果的词汇",
        "添加 Key Result：你的 Key Result 可以用数字来衡量吗？",
        "添加 Key Result：对自己狠一点，写一个清晰可衡量的 Key Result",
        "添加 Key Result：直击要点，不模棱两可",
        "添加 Key Result：不把 OKR 当工作清单用，描述产出，而不是描述工作量",
        "添加 Key Result：Key Results 是结果描述，不是 to-do list"
      ],
      keysReuslt: [],
      isUpdateProgress: false,
      showPower: false,
      krPwoerInfo: {},
      powerType: 3,
      showProgressRemark: false,
      periodId: 0,
      showUnion: false
    };
  },
  created() {
    this.newObjective = this.objective;
  },
  watch: {
    objective: {
      handler(newV, oldV) {
        newV.ProgressRemark = decodeURIComponent(newV.ProgressRemark);
        this.newObjective = newV;
        this.newObjective.placeHolder = this.getRandomPlace();
        if (this.newObjective.Id != 0) {
          this.newBoxState = false;
          this.keysReuslt = this.newObjective.KeyResultList;
        } else {
          this.newBoxState = true;
          this.keysReuslt = [];
        }
      },
      deep: true
    }
  },
  mounted() {
    this.newObjective.placeHolder = this.getRandomPlace();
    if (this.newObjective.Id != 0) {
      this.newBoxState = false;
      this.keysReuslt = this.newObjective.KeyResultList.reverse();
      if (this.keysReuslt.length > 0) {
        this.keysReuslt[this.keysReuslt.length - 1].hideWeight = true;
      }
    } else {
      this.newBoxState = true;
      this.keysReuslt = [];
    }
    if (this.newObjective.PeriodId) {
      this.periodId = this.newObjective.PeriodId;
    }
  },
  methods: {
    cancelRule(id){
      deleteKRRule({
        KeyResultId:id
      }).then(r=>{
        this.updatedObjective()
      })
    },
    setObjectiveStatus() {
      setObjectiveState({
        ObjectiveId: this.newObjective.Id
      }).then(r => {
        this.newObjective.Status = 1;
      });
    },
    addProgressRemark() {
      this.showProgressRemark = true;
      setTimeout(() => {
        this.$refs.progressEditor.focus();
      }, 200);
    },
    closeProgressRemark(html) {
      this.newObjective.ProgressRemark = encodeURIComponent(html);
      this.changeState(2);
      this.showProgressRemark = false;
    },

    deleteObjective() {
      this.$q
        .dialog({
          title: "删除目标",
          message: "确认删除此条 Objective 吗？",
          cancel: {
            label: "取消",
            flat: true
          },
          ok: {
            label: "删除",
            flat: true,
            focus: true,
            color: "negative"
          },
          persistent: true
        })
        .onOk(() => {
          setObjectiveProgress({
            ObjectiveId: this.newObjective.Id,
            Type: 3
          }).then(r => {
            this.$emit("delete", this.newObjective.Id);
          });
        });
    },
    updatedObjective() {
      querySignObject({ ObjectiveId: this.newObjective.Id }).then(r => {
        this.newObjective = r.Data;
        this.keysReuslt = this.newObjective.KeyResultList.reverse();
        if (this.keysReuslt.length > 0) {
          this.keysReuslt[this.keysReuslt.length - 1].hideWeight = true;
        }
        this.$forceUpdate();
      });
    },
    openPower(kr, type) {
      this.krPwoerInfo = kr;
      this.powerType = type;
      this.showPower = true;
    },
    openUnion(kr) {
      this.krPwoerInfo = kr;
      this.showUnion = true;
    },
    saveFinish(isLock) {
      this.showPower = false;
      this.krPwoerInfo.IsLock = isLock ? 1 : 2;
    },
    saveUnionFinish() {
      this.showUnion = false;
      this.updatedObjective();
    },
    validateWeight(val, i) {
      val = val < 0 ? 0 : val;
      val = val > 100 ? 100 : val;
      this.keysReuslt[i].Weight = val;
    },
    changeWeight(i) {
      let msg = {
        KeyResultId: this.keysReuslt[i].Id,
        Weight: this.keysReuslt[i].Weight
      };
      saveKRWeight(msg).then(r => {
        //this.updatedObjective()
        this.keysReuslt.forEach(x => {
          if (x.hideWeight) {
            x.Weight = r.Data.LastWeight;
          }
        });
        this.newObjective.Progress = r.Data.TProgress;
        this.newObjective.Score = r.Data.TScore;
        //this.keysReuslt[i].Weight=r.Data.Score
      });
    },
    changeObjProgressStatus(status) {
      if (
        (status == 0 && this.newObjective.IsDefaultState != 1) ||
        status != this.newObjective.ProgressState
      ) {
        if (status != 0) {
          this.newObjective.ProgressState = status;
          this.newObjective.IsDefaultState = 0;
        }
        setObjectiveProgress({
          ObjectiveId: this.newObjective.Id,
          Type: status == 0 ? 1 : 2,
          ProgressState: status == 0 ? this.newObjective.ProgressState : status
        }).then(r => {
          this.isUpdateProgress = false;
          if (status == 0) {
            this.newObjective.ProgressState = r.Data;
            this.newObjective.IsDefaultState = 1;
          }
        });
      }
    },
    changeScore(i) {
      let obj = this.keysReuslt[i].Score.toString();
      if (obj.indexOf(".") == obj.length - 1) {
        obj += "0";
      }
      this.keysReuslt[i].Score = Number.parseFloat(obj).toFixed(1);
      setKRScore({
        KeyResultId: this.keysReuslt[i].Id,
        Score: this.keysReuslt[i].Score
      }).then(r => {
        this.keysReuslt[i].Score = r.Data.Score;
        this.newObjective.Score = r.Data.TScore;
      });
    },
    validateScore(i) {
      let obj = this.keysReuslt[i].Score.toString();
      obj = obj.replace(/[^\d.]/g, "");
      obj = obj.replace(/\.{2,}/g, ".");
      obj = obj
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      obj = obj.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
      if (obj.indexOf(".") < 0 && obj != "") {
        obj = parseFloat(obj);
      }
      if (obj == ".") {
        obj = "0.";
      }
      obj = !obj || obj == "" ? "0" : obj;
      obj = obj > 1 ? 1 : obj;
      this.keysReuslt[i].Score = obj;
    },
    showProgress() {
      this.isUpdateProgress = true;
    },
    updateKrProcess(kr, i) {
      this.keysReuslt[i] = kr;
      this.$forceUpdate();
    },
    changeState(state) {
      if (!this.isUpdateProgress) {
        this.newBoxState = state == 1;
        if (state == 2 && this.newObjective.Title == "") {
          this.$emit("cancel");
        } else if (state == 2 && this.newObjective.Title != "") {
          if (!this.newObjective.PeriodId) {
            this.newObjective.PeriodId = this.periodId;
          }
          saveMyObjective(this.newObjective).then(r => {
            this.newObjective.Id = r.Data;
            this.updatedObjective();
            this.isUpdateProgress = false;
          });
        }
      }
    },
    changeKeysState(state, i) {
      if (!this.isUpdateProgress) {
        this.keysReuslt[i].newBoxState = state == 1;
        this.$forceUpdate();        
        if (
          state == 2 &&
          ((this.keysReuslt[i].Name != "" && !this.keysReuslt[i].Id) ||
            this.keysReuslt[i].Id)
        ) {
          this.keysReuslt[i].ObjectiveId = this.newObjective.Id;
          this.keysReuslt[i].KeyResultId = this.keysReuslt[i].Id;
          let data = this.keysReuslt[i];
          saveMyKR(data).then(r => {
            if (this.keysReuslt[i].Id == 0) {
              this.updatedObjective();
            }
          });
        } else {
          //this.keysReuslt.splice(i,1)
        }
      }
    },
    saveKrProgress(kr) {
      setKRProgressState({
        KeyResultId: kr.Id,
        Type: kr.IsEasyMode == 1 ? 3 : 4,
        ProgressState: kr.ProgressState
      }).then(r => {
        if (kr.RuleId == 0) {
          setKRProgress({
            KeyResultId: kr.Id,
            Type: kr.IsEasyMode,
            Progress: kr.Progress,
            StartValue: kr.StartValue,
            EndValue: kr.EndValue,
            CurrentValue: kr.CurrentValue
          }).then(r => {
            //
            this.newObjective.Progress = r.Data.TProgress;
            setKRProgressState({
              KeyResultId: kr.Id,
              Type: 1,
              ProgressState: kr.ProgressState
            }).then(r => {
              this.updatedObjective()
            });
          });
        }else{
          setKRProgressState({
              KeyResultId: kr.Id,
              Type: 1,
              ProgressState: kr.ProgressState
            }).then(r => {
              this.updatedObjective()
            });
        }
      });
    },
    getRandomPlace() {
      let i = Math.floor(Math.random() * (this.placeList.length - 1 - 0) + 0);
      return this.placeList[i];
    },
    getRandomKeysPlace() {
      let i = Math.floor(
        Math.random() * (this.keysReusltPlaceList.length - 1 - 0) + 0
      );
      return this.keysReusltPlaceList[i];
    },
    addKeyReuslt() {
      let i = this.keysReuslt.findIndex(x => {
        return x.Name == "";
      });
      if (i == -1) {
        this.keysReuslt.push({
          Id: 0,
          KeyResultId: 0,
          ObjectiveId: this.newObjective.Id,
          Name: "",
          newBoxState: true,
          placeHolder: this.getRandomKeysPlace(),
          Weight: 0.0,
          hideWeight: true
        });
        i = this.keysReuslt.length - 1;
      } else {
        this.keysReuslt[i].placeHolder = this.getRandomKeysPlace();
      }
      setTimeout(() => {
        this.$refs["keys_result_" + i][0].focus();
      }, 100);
    },
    deleteMyKR(KeyResultId, i) {
      this.$q
        .dialog({
          title: "删除KR",
          message: "确认删除此条 Key Result 吗？",
          cancel: {
            label: "取消",
            flat: true
          },
          ok: {
            label: "删除",
            flat: true,
            focus: true,
            color: "negative"
          },
          persistent: true
        })
        .onOk(() => {
          deleteMyKR({ KeyResultId }).then(r => {
            this.updatedObjective();
          });
        })
        .onCancel(() => {

        });
    }
  }
};
</script>

<style>
.okr-add .q-field--standard .q-field__control:before {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.all-borders {
  border: 1px solid var(--q-color-primary) !important;
}
.all-borders.round {
  border-radius: 5px !important;
  box-shadow: 0 0 5px #3370ff inset;
}
.all-borders-2 {
  border: 2px solid var(--q-color-primary) !important;
}
.okr-add .edui-editor {
  z-index: 9 !important;
}
</style>
