<template>
  <div
    class="absolute flex row "
    style="width:500px;z-index:999;"
    :style="{
      left: direction == 'up' ? '15px' : '15px',
      top: direction == 'up' ? '-16px' : 'unset',
      bottom: direction == 'up' ? 'unset' : '13px'
    }"
  >
    <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>
