<template>
  <div class="lj-toast-hisprice flx-col w-full">
    <header class="flx">
      <span class="flx-1 text-h5-b">{{ t("business.detail.historyPrice") }}</span>
      <el-button v-if="!hideClose" circle text :icon="Refresh" @click="refresh(id, typeid, true)"></el-button>
      <el-button v-if="!hideClose" circle text :icon="CloseBold" @click="emit('close-toast')"></el-button>
    </header>
    <main class="w-full lj-toast-hisprice__main" :class="{ 'is-empty': !data.length }">
      <div class="lj-toast-hisprice__main-content" v-if="data.length">
        <HisItem
          :data-ref="'item' + index"
          v-for="(itm, index) in data"
          :t="t"
          :item="itm"
          :index="index"
          :key="index"
          @click="emit('todetail', itm)"
        />
      </div>
      <el-empty v-else :description="t('sys.empty.nodate')" />
    </main>
    <footer></footer>
  </div>
</template>

<script setup lang="ts" name="LjToastOaFlow">
import { ref, onMounted, computed, watch } from "vue";
import { useDesign } from "@/hooks/useDesign";
import { CommonDynamicSelect } from "@/api/modules/common";
import { useUserStore } from "@/stores/modules/user";
import HisItem from "./components/Item.vue";
import { CloseBold, Refresh } from "@element-plus/icons-vue";
import { ElButton, ElMessage } from "element-plus";

// 接收父组件参数并设置默认值
interface WidgetProps {
  /**
   * @description i18n
   */
  t: any;
  /**
   * @description 单据id
   */
  id?: any;
  /**
   * @description 单据类型id
   */
  typeid?: any;
  /**
   * @description 状态enum
   */
  statusEnum?: any;
  /**
   * @description 是否隐藏关闭按钮
   */
  hideClose?: boolean;
}
const props = withDefaults(defineProps<WidgetProps>(), {
  hideClose: false
  // showFooter: true
});
const emit = defineEmits(["close-toast", "refresh", "todetail"]);

const data = ref<any>([]);

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

const refresh = async (id: number, typeid: number, tips?: boolean) => {
  let _params = {
    dsname: "web_his_price",
    queryparams: {
      arg_id: id,
      arg_typeid: typeid
    }
  };
  let res = await CommonDynamicSelect(_params);
  console.log("watch res :>> ", res);
  data.value = res?.datatable?.length ? res?.datatable : [];

  if (tips) {
    ElMessage.success(props.t("sys.api.sueccessToRefresh"));
  }
};

watch(
  [() => props.id, () => props.typeid],
  (val: any) => {
    console.log("watch oaflow val :>> ", val);
    refresh(val[0], val[1]);
    // refresh(0, 1);
  },
  { immediate: true }
);

// onMounted(() => {
//   console.log("onMounted props.data 初始化:>> ", props.data);
//   // if (props.data) {
//   //   oaFlowList.value = props.data;
//   //   oaFlowList.value.length > 0 && handleClickTabs();
//   // }
// });
</script>

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

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

  &__main {
    &-content {
      overflow-y: auto;
      max-height: 60vh;
    }
  }
  &__main:not(.is-empty) {
    position: relative;

    &:before {
      content: "";
      position: absolute;
      left: 0;
      width: 1px;
      top: 0;
      bottom: 0;
      // height: 100%;
      transform: translateX($space-a2);
      z-index: -1;

      background: repeating-linear-gradient(
        to bottom,
        $color-gray-6,
        $color-gray-6 10px,
        transparent 10px,
        transparent 20px
      ); /* 创建一条虚线背景 */
      // height: 1px; /* 设置元素的高度为1像素 */
      // width: 100%; /* 设置元素的宽度为100% */
    }
  }
}
</style>
