<template>
  <div class="lj-toast-hisprice flx-col">
    <header class="flx">
      <span class="flx-1 text-h5-b">{{ `${t("business.detail.historyPrice")}(${title})` }}</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 }">
      <el-skeleton animated :loading="loading">
        <template #template>
          <el-skeleton-item variant="text" style="height: 22px; width: 128px" />
          <div class="flx-justify-between ml-24">
            <div class="flx-col flx-center" v-for="itm in 4" :key="itm">
              <el-skeleton-item variant="text" class="mt-4" style="height: 20px; width: 64px" />
              <el-skeleton-item variant="text" class="mt-4" style="height: 24px; width: 90px" />
            </div>
          </div>
        </template>
        <div class="lj-toast-hisprice__main-content">
          <HisItem
            :data-ref="'item' + index"
            v-for="(itm, index) in data"
            :item="itm"
            :index="index"
            :key="index"
            @click="emit('todetail', itm)"
          />
        </div>
      </el-skeleton>
      <!-- <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";
import { t } from "@/utils/i18n";

// 接收父组件参数并设置默认值
interface WidgetProps {
  /**
   * @description 单据id
   */
  id?: any;
  /**
   * @description 单据类型id
   */
  typeid?: any;
  /**
   * @description 状态enum
   */
  statusEnum?: any;
  /**
   * @description 是否隐藏关闭按钮
   */
  hideClose?: boolean;
  title: string;
}
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 loading = ref(false);

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

      if (tips) {
        ElMessage.success(t("sys.api.sueccessToRefresh"));
      }
    })
    .catch(err => {
      loading.value = false;
    });
};

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: 600px;

  :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-b1);
      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>
