<template>
  <div
    class="oa-flow-item flx"
    :class="{
      'is-done': Number(item.passed),
      'no-done': !Number(item.passed) && !Number(item.oarowid),
      'is-current': Number(item.oarowid)
    }"
  >
    <div class="oa-flow-item__left flx-shrink text-body-r">
      <template v-if="index == 0">
        {{ t("table.oa_doc.opd") }}
      </template>
      <template v-else>
        {{ item.flowstepname }}
      </template>
      <span class="icon">
        <!-- <i v-if="index == 0" class="iconfont iconSend"></i> -->
        <i v-if="Number(item.oarowid)" class="iconfont iconLocation"></i>
        <i v-else-if="Number(item.passed)" class="iconfont iconcheck-circle-fill"></i>
        <span v-else class="undone"></span>
      </span>
    </div>
    <main class="oa-flow-item__right flx-1">
      <header class="text-body-r">
        <template v-if="item.greetime">
          {{ item.greetime }}
        </template>
        <template v-else-if="item.limittime">
          <template v-if="diffSeconds > 0">
            <span class="text-body-r limittime mr-2" :title="item.limittime">
              {{ t("common.limittime") }}
            </span>
            {{ `${t("common.remain")}:${countDownTime(diffSeconds)}` }}
          </template>
          <template v-else>
            <el-tag size="small" type="danger" class="mr-2">
              {{ t("common.overtime") }}
            </el-tag>
            {{ item.limittime }}
          </template>
        </template>
        <template v-else>
          {{ t("common.notyet") }}
        </template>
      </header>
      <section class="flx-start">
        <div style="margin: auto; margin-top: 0">
          <AvatarIcon size="small" :username="item.empname"></AvatarIcon>
        </div>
        <div class="oa-flow-item__right-content flx-1 flx-col">
          <div class="oa-flow-item__right-content-title flx">
            <span class="text-body-b sle text-primary-text sle">
              {{ item.empname }}
            </span>
          </div>
          <div class="text-body-r text-secondary-text">{{ item.empcontent }}</div>
          <div class="text-body-r text-disable">{{ item.dscrp }}</div>
        </div>
      </section>
    </main>
  </div>
</template>

<script setup lang="tsx" name="LjToastOaFlowItem">
import { ref, watch } from "vue";
import AvatarIcon from "@/layouts/components/Header/components/AvatarIcon.vue";
import { oaFlowStatusViewBill } from "@/components/LjOaFlow/interface/index";
import { countDownTime } from "@/utils/index";

interface wigetProps {
  t: any;
  item: oaFlowStatusViewBill;
  /**
   * @description 索引
   */
  index: number;
  /**
   * @argument 当前待审批
   */
  current?: any;
  nowtime?: string;
}

const props = withDefaults(defineProps<wigetProps>(), {
  // item: {},
  current: undefined
});

/**
 * @description 剩余时间
 */
const diffSeconds = ref(0);
const intervalTimer = ref<any>(null);

watch(
  () => props.nowtime,
  (val: any) => {
    if (props.item.limittime) {
      if (intervalTimer.value) {
        clearInterval(intervalTimer.value);
      }
      const now = new Date(val).getTime();
      const limit = new Date(props.item.limittime).getTime();
      diffSeconds.value = Math.floor((limit - now) / 1000);
      intervalTimer.value = setInterval(() => {
        diffSeconds.value--;
        if (diffSeconds.value <= 0) {
          clearInterval(intervalTimer.value);
        }
      }, 1000);
    }
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.oa-flow-item {
  margin-top: $space-a2;
  padding-top: $space-b1;
  padding-bottom: $space-b1;
  &__left {
    position: relative;
    width: 20%;
    text-align: right;
    padding-right: $space-a2;
    // line-height: 1;

    .icon {
      position: absolute;
      right: 0;
      top: 0;
      transform: translateX(50%);

      // .iconfont {
      //   background-color: $color-gray-1;
      // }

      .undone {
        margin-top: $space-a1;
        display: block;
        border-radius: 50%;
        width: $space-b2;
        height: $space-b2;
        background-color: $color-gray-6;
      }
    }
  }
  &__right {
    padding-left: $space-a2;
    &-content {
      margin-left: $space-a1;
      // border-radius: $br-sm;
      // background-color: $color-gray-3;
      // padding: $space-a1;
    }
    .limittime {
      color: $color-dust-red-6;
    }
  }

  &.is-done {
    // color: $color-text-primary-text;
    color: $color-gray-8;
    .oa-flow-item__left {
      .icon {
        // color: $color-polar-green-6;
        // color: $color-polar-green-6;
        color: $color-gray-8;
      }
    }
  }
  &.no-done {
    color: $color-gray-6;
    .oa-flow-item__left {
      .icon {
        color: $color-gray-6;
      }
    }
  }
  &.is-current {
    background-color: $color-primary-000;
    border-radius: $br-md;
    .oa-flow-item__left {
      font-weight: bold;
      .icon {
        color: $color-primary-500;

        .iconfont {
          font-size: $space-b3;
        }
      }
    }
  }
}
</style>
