<template>
  <div class="lj-toast-oa-flow flx-col w-full">
    <header class="flx">
      <span class="flx-1 text-h5-b">{{ t("business.detail.summaryOfQuote") }}</span>
      <div>
        <el-button v-if="!hideClose" circle text :icon="Refresh" @click="emit('refresh')"></el-button>
        <el-button v-if="!hideClose" circle text :icon="CloseBold" @click="emit('close-toast')"></el-button>
      </div>
    </header>
    <main class="w-full">
      <div class="flx-end summary-box" v-for="item in isFormulas" :key="item.label">
        <!-- <div class="flx-1 enter-x overflow-auto" v-if="ifShow" style="max-width: 450px">
          <FormulaItem :data="item" :formulas="formulas" :dataValue="data" :fields="fields" />
        </div> -->
        <div class="summary-box__summy flx-1" :style="{ width: 'unset' }">
          <div class="summary-box_item flx">
            <div class="flx-1 text-secondary-text text-body-c">
              {{ item.label }}
            </div>
            <div class="flx-shrink ml-8 text-right text-h5-b">
              {{ isFilterPrice(item) }}
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer class="flx">
      <el-button type="primary" class="flx-1" @click="handleToggleShow">{{ t("common.showFormula") }}</el-button>
    </footer>
  </div>
</template>

<script setup lang="ts" name="LjToastFormula">
import { ref, onMounted, computed, watch } from "vue";
import { useDesign } from "@/hooks/useDesign";
import { CommonDynamicSelect, GetFormulaCompute } from "@/api/modules/common";
import { useUserStore } from "@/stores/modules/user";
import { useOaFlow } from "@/components/LjOaFlow/hooks/index";
import { CloseBold, Refresh } from "@element-plus/icons-vue";
import FormulaItem from "./components/Item.vue";
import { formatAmount3 } from "@/utils/index";

export interface formulasProp {
  /**
   * @description 属性名称
   */
  label?: string;
  // /**
  //  * @description 属性id
  //  */
  // field: string;
  /**
   * @description 属性计算方法
   */
  formula?: string;
  /**
   * @argument 权限验证
   */
  power?: number | ((params?: any) => boolean);
}

// 接收父组件参数并设置默认值
interface WidgetProps {
  /**
   * @description i18n
   */
  t: any;
  /**
   * @description 类型ID
   */
  powerid?: number;
  /**
   * @description 分部id
   */
  scid?: any;
  /**
   * @description 单据id
   */
  billid?: any;
  /**
   * @argument boolean 是否自动执行请求 api ==> 非必传（默认为true）
   */
  requestAuto?: boolean;
  /**
   * @description 状态enum
   */
  statusEnum?: any;
  // data?: any;
  /**
   * @description 是否隐藏关闭按钮
   */
  hideClose?: boolean;
  /**
   * @description 计算公式列表
   */
  formulas: formulasProp[];
  /**
   * @description 字段对照表
   */
  fields: any[];
  showFormula?: boolean;
}
const props = withDefaults(defineProps<WidgetProps>(), {
  requestAuto: true,
  hideClose: false,
  data: () => {}
  // showFooter: true
});
const emit = defineEmits(["close-toast", "tomore", "refresh"]);
// const ifShow = ref(false);

const isFormulas = computed(() => {
  return props.formulas.filter((item: any) => item.type == 0);
});

const isFilterPrice = data => {
  let tg = props.fields.find((item: any) => item.label == data.label);
  if (!tg) {
    return "--";
  }

  let val = formatAmount3({ val: tg.value });
  // 过滤掉末尾的0
  let arr = val.split("");
  while (arr[arr.length - 1] === "0") {
    arr.pop();
  }
  return arr.join("");
};

// const { t } = useI18n();
const { userInfo } = useUserStore();
// const { prefixCls } = useDesign("toast-oa-flow");

const { itemData, oaFlowList, tabsValue, currentOaflow, oaDocStatus, isCurEmp, handleOpenBox, getOaFlowList } = useOaFlow(
  props.powerid
);

const handleToggleShow = () => {
  emit("tomore");
};
</script>

<style lang="scss" scoped>
.lj-toast-oa-flow {
  width: 240px;

  :deep(.el-tabs__header) {
    margin-bottom: 0;
  }
}

.summary-box {
  & + & {
    margin-top: 8px;
  }

  &:hover {
    background: $color-primary-000;
    // border-radius: 8px;
  }
  &__summy {
    &.is-show {
      position: relative;
      margin-left: 12px;
      &:before {
        content: "=";
        position: absolute;
        left: 0;
        bottom: 5px;
        margin: auto;
      }
    }
  }
}
</style>
