<template>
  <div class="absolute flex row " style="width:500px;z-index:999;" :style="{'left':direction=='up'?'15px':'15px','top':direction=='up'?'-16px':'11px'}">
    <svg
      width="24px"
      height="24px"
      style="margin-right:8px"
      :style="{'transform':direction=='up'?'rotate(0deg)':'rotateX(180deg)','margin-top':direction=='up'?'7px':'4px'}"
      viewBox="0 0 24 24"
      version="1.1"
      v-if="!showOnly || (showOnly && obj.ParentList.length>0 && direction=='up')||(showOnly && obj.ChildList.length>0 && direction=='down')"
    >
      <g
        id="shangduiqi"
        stroke="none"
        stroke-width="1"
        fill="none"
        fill-rule="evenodd"
      >
        <path
          d="M21.1160533,2.07953591 C9.847689,3.03519298 1,12.4843522 1,24 L0,24 C0,11.9510478 9.2650232,2.06605774 21.0593866,1.08071282 C21.2407969,0.456342432 21.8171062,0 22.5,0 C23.3284271,0 24,0.671572875 24,1.5 C24,2.32842712 23.3284271,3 22.5,3 C21.8770146,3 21.3427332,2.62021284 21.1160533,2.07953591 Z"
          id="Combined-Shape"
          fill="rgb(191,208,255)"
          fill-rule="nonzero"
        ></path>
      </g>
    </svg>
    <template v-for="(x, i) in obj.ParentList">
      <div
        class="hover-primary remark-font cursor-pointer q-mr-xs"
        :style="{'margin-top':direction=='up'?'0px':'20px'}"
        v-if="x.AlignList.length > 0 && direction=='up'"
        :key="i"
      >
        <span>{{ x.AccountName }}</span
        ><span v-if="x.AlignList.length > 1">（{{ x.AlignList.length }}）</span>
        <q-popup-proxy>
          <align-info
            :align="x"
            :source-id="obj.Id"
            :num="i"
            @delete="delAlign"
            :ref="`align_info_${i}`"
            :can-del="true"
            :show-only="showOnly"
          ></align-info>
        </q-popup-proxy>
      </div>
    </template>
    <template  v-for="(x, i) in obj.ChildList">
      <div
        class="hover-primary remark-font cursor-pointer q-mr-xs"
        :style="{'margin-top':direction=='up'?'0px':'18px'}"
        v-if="x.AlignList.length > 0 && direction=='down'"
        :key="i"
      >
        <span>{{ x.AccountName }}</span
        ><span v-if="x.AlignList.length > 1">（{{ x.AlignList.length }}）</span>
        <q-popup-proxy>
          <align-info
            :align="x"
            :source-id="obj.Id"
            :num="i"
            @delete="delAlign"
            :ref="`align_info_${i}`"
            :can-del="false"
          ></align-info>
        </q-popup-proxy>
      </div>
    </template>
    <div class="hover-primary remark-font cursor-pointer" v-if="direction=='up' && !showOnly">
      <q-icon
        name="iconfont icon-add"
        class="cursor-pointer"
        size="12px"
      ></q-icon>
      <span>添加对齐</span>
      <q-popup-proxy style="z-index: 9999;">
        <search-okr :period-id="periodId" :source-id="obj.Id" @add="addNewAlign"></search-okr>
      </q-popup-proxy>
    </div>
  </div>
</template>

<script>
import searchOkr from "./search-okr";
import alignInfo from "./align-info";
export default {
  props: ["obj", "periodId",'direction','showOnly'],
  components: {
    searchOkr,
    alignInfo
  },
  methods: {
    delAlign(r) {
      obj.ParentList[r.num].AlignList = r.AlignList ? r.AlignList : [];
      if (!r.AlignList || r.AlignList.length == 0) {
        this.$refs[`align_info_${r.num}`].hide();
      }
    },
    addNewAlign(r) {
      let isHave = false;
      this.obj.ParentList.forEach(x => {
        if (x.AccountName == r.AccountName) {
          x.AlignList.push(r.AlignList[0]);
          isHave = true;
        }
      });
      if (!isHave) {
        this.obj.ParentList.push(r);
      }
    }
  }
};
</script>

<style></style>
