<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"
      :style="{ 'margin-left': newBoxState ? '-12px' : '15px' }"
      readonly
    >
      <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"
            :show-only="true"
            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
            class="absolute"
            style="top:0px;right:0px;height:14px;"
            v-if="newObjective.IsLock == 1"
          >
            <inline-svg
              class="svg-icon svg-icon-grey"
              src="icons/svg/General/Lock.svg"
              width="14px"
              height="14px"
              
            ></inline-svg>
            <q-tooltip content-class="bg-dark">已设为保密内容，请勿外传</q-tooltip>
          </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-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%"
            ></q-btn>
          </div>
          <div class="q-mr-lg">
            <span class="block remark-font text-right">总分</span>
            <q-btn
              dense
              flat
              color="white"
              text-color="dark"
              :label="newObjective.Score.toFixed(1)"
            ></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"
      :borderless="i == keysReuslt.length - 1"
      class="q-mt-md"
      style="margin-left:51px"
      readonly
    >
      <!-- 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-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') + '%'"
            >
            </q-btn>
          </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-btn>
          </div>
        </div>
      </template>
    </q-input>
    <q-separator
      v-if="
        newObjective.ProgressRemark && newObjective.ProgressRemark.length > 0
      "
    ></q-separator>
    <div
      class="q-pa-md"
      v-if="
        newObjective.ProgressRemark && newObjective.ProgressRemark.length > 0
      "
    >
      <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">
          <div class="text-subtitle2 text-weight-bold  q-my-xs">
            进度记录
          </div>
          <div class="text-body2" v-html="decodeURIComponent(newObjective.ProgressRemark)"></div>
        </div>
      </div>
    </div>
    <q-separator v-if="auditMode || (userId==newObjective.AuditUserId && newObjective.Status!=1)"></q-separator>
    <div v-if="auditMode" 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 svg-icon-primary"
            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">
            OKR审核
          </div>
          <q-card flat class="q-mt-md q-pa-none">
            <q-card-section>
              <div class="flex row items-start">
                <div class="col">
                  <q-input
                    flat
                    dense
                    v-model="audit.Remark"
                    autogrow
                    :rules="[val => !!val || '请输入审核意见']"
                    ref="remark"
                    placeholder="请输入你的审核意见"
                  ></q-input>
                </div>
              </div>
            </q-card-section>
            <q-card-actions class="flex row items-center q-px-none">
              <div class="col">
                <span class="remark-font q-mr-xs">审核结论：</span>
                <q-radio v-model="audit.Type" val="1" size="xs" label="通过" color="secondary" />
                <q-radio v-model="audit.Type" val="2" size="xs" label="不通过" color="negative" />
              </div>
              <q-btn
                color="primary"
                :loading="isSubAudit"
                @click="setAudit"
                label=" 提 交 "
              ></q-btn>
            </q-card-actions>
          </q-card>
        </div>
      </div>
    </div>
    <div v-if="!auditMode && userId==newObjective.AuditUserId && newObjective.Status!=1" 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 class="col-auto flex row">
            <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:180px;">
                  <q-item
                    class="items-center"
                    clickable
                    v-ripple
                    @click="resetStatus"
                  >
                    <q-item-section avatar>
                      <inline-svg
                        class="svg-icon"
                        src="icons/svg/General/Update.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>
        <div class="q-mt-md">
          {{ decodeURIComponent(newObjective.AuditRemark) }}
        </div>
      </q-card-section>
    </q-card>
    </div>
  </q-card>
</template>

<script>
import { setObjectiveStatus,setObjectiveState } from "../../api/okr/work";
import okrAlign from "./okr-align";
export default {
  props: ["objective", "auditMode", "userId"],
  components: {
    okrAlign
  },
  data() {
    return {
      newBoxState: true,
      newObjective: {},
      keysReuslt: [],
      periodId: 0,
      audit: {
        ObjectiveId: 0,
        Type: "1",
        Remark: ""
      },
      isSubAudit: false
    };
  },
  created() {
    this.newObjective = this.objective;
    this.audit.ObjectiveId = this.objective.Id;
    
  },
  watch: {
    objective: {
      handler(newV, oldV) {
        this.newObjective = newV;
        if (this.newObjective.Id != 0) {
          this.newBoxState = false;
          this.keysReuslt = this.newObjective.KeyResultList;
        } else {
          this.newBoxState = true;
          this.keysReuslt = [];
        }
      },
      deep: true
    }
  },
  mounted() {
    if (this.newObjective.Id != 0) {
      this.newBoxState = false;
      this.keysReuslt = this.newObjective.KeyResultList.reverse();
    } else {
      this.newBoxState = true;
      this.keysReuslt = [];
    }
    if (this.newObjective.PeriodId) {
      this.periodId = this.newObjective.PeriodId;
    }
  },
  methods: {
    setAudit() {
      this.$refs.remark.validate()
      if(!this.$refs.remark.hasError){
        this.isSubAudit=true
        setObjectiveStatus(this.audit).then(r=>{
          this.$emit("audit-notify",this.newObjective.Id)
        })
      }
    },
    resetStatus(){
      setObjectiveState({
        ObjectiveId:this.newObjective.Id
      }).then(r=>{
        this.newObjective.Status=1
        this.$emit("reset-audit-notify",this.newObjective.Id)
      })
    }
  }
};
</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-audit .q-card__section--vert{
  padding:0px !important;
}
</style>
