<template>
  <div style="width:480px">
    <div class="q-pa-md flex row items-center">
      <q-avatar
        size="34px"
        font-size="18px"
        rounded
        color="blue-2"
        text-color="blue-13"
      >
        <img :src="align.Icon" v-if="align.Icon" />
        <span v-else-if="align.AccountName">{{
          align.AccountName.substring(0, 1)
        }}</span>
      </q-avatar>
      <div class="col text-subtitle2 q-ml-md">{{ align.AccountName }}</div>
      <div class="text-primary cursor-pointer" @click="openObjective(align)">查看详情</div>
    </div>
    <div
      class="q-py-md"
      style="border-top:1px solid #eee"
      v-for="(x, i) in align.AlignList"
      :key="i"
    >
      <div class="flex row item-center">
        <div style="width:26px;padding-left:6px;">
          <inline-svg
            v-if="x.IsLock == 1"
            class="svg-icon svg-icon-grey"
            src="icons/svg/General/Lock.svg"
            width="14px"
            height="14px"
            style="margin-top: 5px;"
          ></inline-svg>
          <q-tooltip content-class="bg-dark text-white" v-if="x.IsLock == 1"
            >已设保密，请勿外出</q-tooltip
          >
        </div>
        <div class="col text-subtitle2 text-weight-bold">{{ x.Title }}</div>
        <div class="text-primary q-mx-md cursor-pointer" @click="cancelAlign(x.Id,i)" v-if="canDel && !showOnly">取消对齐</div>
      </div>
      <template v-for="(y, yi) in x.KeyResultList">
        <div
          class="flex q-pa-xs flex row items-center"
          v-if="y.IsNotLook != 1"
          :key="yi"
        >
          <div style="width:20px;margin-left: 20px;">
            <inline-svg
              class="svg-icon svg-icon-primary"
              src="icons/svg/Design/Circle.svg"
              width="8px"
              height="8px"
              v-if="y.IsLock == 2"
            ></inline-svg>
            <inline-svg
              class="svg-icon svg-icon-grey"
              src="icons/svg/General/Lock.svg"
              width="14px"
              height="14px"
              style="margin-top:5px"
              v-if="y.IsLock == 1"
            ></inline-svg>
            <q-tooltip content-class="bg-dark text-white" v-if="y.IsLock == 1"
            >已设保密，请勿外出</q-tooltip
          >
          </div>
          <div class="col">{{ y.Name }}</div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import {deleteAlign} from "../../api/okr/work";
export default {
  props: ["align", "sourceId",'num','canDel','showOnly'],
  data() {
    return {};
  },
  methods: {
    openObjective(x){
      let obj={
        Id:x.AccountId,
        EmployeeName:x.AccountName,
        UserIcon:x.Icon
      }
      this.$root.$emit("openUserObj",obj)
    },
    cancelAlign(id, i) {
      deleteAlign({
        ObjectiveId: this.sourceId,
        ParentId: id
      }).then(r => {
        this.align.AlignList.splice(i, 1);
        let t={
            num:this.num,
            AlignList:this.align.AlignList
        }
        this.$$emit('delete',t)
        this.$forceUpdate()
      });
    }
  }
};
</script>

<style></style>
