<template>
  <div :class="`${prefixCls} card`" ref="MyCustRef">
    <header>
      <LjHeader class="flx-1" :title="$t('business.home.layout.myCust')" />
      <div class="control flx-center">
        <el-button v-if="selectMyCust" text round @click="handleClick(selectMyCust)">
          <template #icon>
            <i class="iconfont iconfilter-funnel-01"></i>
          </template>
        </el-button>
        <el-button class="refresh-btn" text round @click="toRefresh">
          <template #icon>
            <i class="iconfont iconRefresh_light"></i>
          </template>
        </el-button>
      </div>
    </header>
    <main class="flx-col">
      <div v-if="loading">
        <el-skeleton animated>
          <template #template>
            <el-skeleton-item variant="text" style="height: 64px" />
            <el-skeleton-item variant="text" class="mt-8" style="height: 64px" />
            <el-skeleton-item variant="text" class="mt-8" style="height: 64px" />
          </template>
        </el-skeleton>
      </div>
      <template v-else>
        <div v-if="!dataList.length" class="empty text-disable">暂没有供应厂商</div>
        <div v-else :class="`${prefixCls}__grid`">
          <section
            :class="`${prefixCls}__cust-item ${selectMyCust == item.comid || !selectMyCust ? 'is-active' : ''}`"
            v-for="(item, index) in dataList"
            :key="index"
            @click="handleClick(item.comid)"
          >
            <header class="flx-justify-between">
              <div class="title flx-start">
                <div :class="`${prefixCls}__cust-item-avatars flx-center flx-shrink`">
                  <i class="iconfont iconbuilding-05"></i>
                </div>
                <div class="name flx-1">
                  {{ item.simplename || item.comname }}
                  <div class="tag-list mt-2">
                    <span class="text-body-m text-secondary-text">
                      <span class="text-f-c">
                        {{ $t("business.home.myCust.recentTransactions") + ":" }}
                      </span>
                      {{ item.recentTaskDate }}
                    </span>
                  </div>
                </div>
              </div>
              <div class="flx-col" style="text-align: right">
                <span class="text-h4-r text-primary-text">
                  {{ numberFormat(item.waitqty, 0) }}
                </span>
                <span class="text-f-c text-secondary-text">
                  {{ $t("business.home.myCust.toBeDelivered") }}
                </span>
              </div>
            </header>
            <!-- <main>
              <el-row class="pb-8">
                <el-col :span="12" :class="`${prefixCls}__cust-item-dashboard`">
                  <el-statistic :value="item.waitqty">
                    <template #title>
                      <div style="display: inline-flex; align-items: center">
                        {{ $t("business.home.myCust.toBeDelivered") }}
                        <el-tooltip effect="dark" content="Number of users who logged into the product in one day" placement="top">
                          <el-icon style="margin-left: 4px" :size="12">
                            <Warning />
                          </el-icon>
                        </el-tooltip>
                      </div>
                    </template>
                  </el-statistic>
                </el-col>
                <el-col :span="12" :class="`${prefixCls}__cust-item-dashboard`">
                  <el-statistic :value="item.recentTaskDate">
                    <template #title>
                      <div style="display: inline-flex; align-items: center">
                        {{ $t("business.home.myCust.recentTransactions") }}
                      </div>
                    </template>
                  </el-statistic>
                </el-col>
              </el-row>
            </main> -->
          </section>
        </div>
      </template>
    </main>
  </div>
</template>

<script setup lang="ts" name="home_widget-mycust">
import { ref, onMounted, onUnmounted, nextTick, inject } from "vue";
import { RefreshRight, User } from "@element-plus/icons-vue";
import LjHeader from "@/components/LjHeader/index.vue";
import { useDesign } from "@/hooks/useDesign";
import { useI18n } from "vue-i18n";
import { homeWidgetProps } from "../../interface";
// import { getMyCustList } from "@/api/modules/user";
import { numberFormat } from "@/utils/index";

const prop = withDefaults(defineProps<homeWidgetProps>(), {
  id: "",
  initParam: {}
});

const { prefixCls } = useDesign("home_widget-mycust");
const { t } = useI18n();
const MyCustRef = ref();
const loading = ref();
const emit = defineEmits(["getMyCust", "selectMyCust"]);
const dataList = inject("myCustList", ref<any>([]));
const selectMyCust = ref<number | null>(null);

// 刷新
const toRefresh = async () => {
  loading.value = true;
  await refresh(() => {
    nextTick(() => {
      setTimeout(() => {
        loading.value = false;
      }, 400);
    });
  });
};

const refresh = async (callback?: any) => {
  emit("getMyCust", () => callback && callback());
  // let data = await getMyCustList();
  // console.log("onMounted data :>> ", data);
  // dataList.value = data.List ?? [];
  // callback && callback();
};

/**
 * @description 筛选客户
 */
const handleClick = (id: number) => {
  if (selectMyCust.value == id) {
    selectMyCust.value = null;
  } else {
    selectMyCust.value = id;
  }
  emit("selectMyCust", selectMyCust.value);
};

/**
 * @description 根据容器宽邸,自适应布局
 */
const adaptiveFunc = () => {
  let _width = MyCustRef.value.offsetWidth;
  console.log("_width :>> ", _width);
  let cls = "";

  switch (true) {
    case _width >= 1200:
      cls = " adaptive_4"; // 25
      break;
    case _width >= 992:
      cls = " adaptive_3"; // 33.33
      break;
    case _width >= 768:
      cls = " adaptive_2"; // 50
      break;
    default:
      cls = " adaptive_1"; // 100
      break;
  }
  let classArray = MyCustRef.value.className.split(" ");
  let index = classArray.findIndex((item: any) => item.indexOf("adaptive") > -1);
  if (index > -1) {
    classArray.splice(index, 1);
  }
  MyCustRef.value.className = classArray.join(" ");
  MyCustRef.value.className += cls;
};

onMounted(() => {
  toRefresh();

  adaptiveFunc();
  window.addEventListener("resize", adaptiveFunc);
});

onUnmounted(() => {
  window.onresize = null;
  window.removeEventListener("resize", adaptiveFunc);
});
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
