<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 formulas" :key="item.field">
        <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"
          :class="ifShow ? 'flx-shrink is-show' : 'flx-1'"
          :style="{ width: ifShow ? '90px' : 'unset' }"
        >
          <div class="summary-box_item" :class="ifShow ? 'flx-col' : 'flx'">
            <div class="flx-1 text-secondary-text text-body-c" :class="{ 'text-right': ifShow }">
              {{ item.label }}
            </div>
            <div class="flx-shrink ml-8 text-right text-h5-b">
              {{ data[item.field] }}
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer class="flx">
      <el-button type="primary" class="flx-1" @click="handleToggleShow">{{
        ifShow ? t("common.table.putAway") : 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";

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: formulasProp[];
  showFormula?: boolean;
}
const props = withDefaults(defineProps<WidgetProps>(), {
  requestAuto: true,
  hideClose: false,
  data: () => {}
  // showFooter: true
});
const emit = defineEmits(["close-toast", "toggle-formula", "refresh"]);
const ifShow = ref(false);

// 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 getOaFlowItem = async (docid: number) => {
  // 流转状况
  let { datatable } = await CommonDynamicSelect({
    dsname: "web_oa_flow_status_view_bill",
    queryparams: {
      docid: docid
    }
  });
  console.log("getOaFlowItem datatable :>> ", datatable);
  itemData.value = datatable;

  console.log("currentOaflow :>> ", currentOaflow.value);
};
const handleClickTabs = () => {
  console.log(tabsValue.value);
  // console.log("handleClickTabs pane :>> ", pane);
  let _index: any = tabsValue.value ?? 0;
  console.log("oaFlowList.value :>> ", oaFlowList.value);
  console.log("_index :>> ", _index);
  let { docid } = oaFlowList.value[_index];
  getOaFlowItem(docid);
};

onMounted(async () => {
  console.log("onMounted props.data 初始化:>> ", props.data);
  ifShow.value = props.showFormula;
});

const handleToggleShow = () => {
  ifShow.value = !ifShow.value;
  emit("toggle-formula", ifShow.value);
};
</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>
