<template>
  <div class="oa-flow-item flx">
    <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="flx">
        <span class="flx-1">
          {{ item.cmpemp }}
        </span>
        <span class="text-body-r" :title="item.cmpdate">
          <el-icon><Calendar /></el-icon>
          {{ isFilterTime(item.cmpdate) }}
        </span>
      </header>
      <section class="flx-justify-between mt-4">
        <!-- <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"> -->
        <div class="oa-flow-item__right-content-title flx-col flx-center">
          <div class="text-f-c text-disable">不含税部门价</div>
          <span class="text-h5-b text-primary-text">
            {{ isFilterPrice(item.nottax_dept_cost) }}
          </span>
        </div>
        <div class="oa-flow-item__right-content-title flx-col flx-center">
          <div class="text-f-c text-disable">含税部门价</div>
          <span class="text-h5-b text-primary-text">
            {{ isFilterPrice(item.dept_cost) }}
          </span>
        </div>
        <div class="oa-flow-item__right-content-title flx-col flx-center">
          <div class="text-f-c text-disable">外币价</div>
          <span class="text-h5-b text-primary-text">
            {{ isFilterPrice(item.foreign_cost) }}
          </span>
        </div>
        <!-- </div> -->
      </section>
    </main>
  </div>
</template>

<script setup lang="tsx" name="LjToastOaFlowItem">
import { ref, watch } from "vue";
import { formatTime, formatAmount3 } from "@/utils/index";
import { Calendar } from "@element-plus/icons-vue";
import { isFilterPrice } from "@/utils/index";

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

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

const isFilterTime = time => {
  return formatTime(time, "", true);
};

// const isFilterPrice = data => {
//   return formatAmount3({ val: data });
// };
</script>

<style lang="scss" scoped>
.oa-flow-item {
  margin-top: $space-a2;
  padding-top: $space-b1;
  padding-bottom: $space-b1;
  padding-right: $space-b1;

  &:hover {
    cursor: pointer;
    background-color: $color-primary-000;
    border-radius: $br-sm;
  }

  &__left {
    position: relative;
    width: 0;
    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>
