<template>
  <div class="statistic-card card">
    <header>
      <LjHeader class="flx-1" :title="$t('business.home.layout.saletaskMxStatistic')" />
      <div class="control flx-center">
        <i class="iconfont iconfilter-funnel-01 mr-12 text-disable" style="font-size: 12px" v-if="comid"></i>
        <el-button class="refresh-btn" text bg round size="small" @click.stop="onRefresh(comid)">
          <template #icon>
            <i class="iconfont iconTimeCircle_light"></i>
          </template>
          {{ refreshDate }}
        </el-button>
      </div>
    </header>
    <el-row class="statistic-card__main">
      <el-skeleton v-if="loading" animated>
        <template #template>
          <div class="flx-start mt-12 mb-12">
            <div class="flx-col flx-1 mr-16" v-for="item in 4" :key="item">
              <el-skeleton-item variant="h1" class="mb-4" style="width: 50%" />
              <el-skeleton-item variant="h1" style="width: 80px; height: 33.5px" />
              <el-skeleton-item variant="text" class="mt-12" style="width: 80%; height: 16.5px" />
            </div>
          </div>
        </template>
      </el-skeleton>
      <template v-else-if="statisticList.length">
        <!-- <el-button class="refresh-btn" text bg round size="small" @click.stop="onRefresh">
          <template #icon>
            <i class="iconfont iconRefresh_light"></i>
          </template>
          {{ refreshDate }}
        </el-button> -->
        <el-col :span="24 / statisticList.length" v-for="(item, index) in statisticList" :key="index">
          <div class="statistic-item">
            <el-statistic :value="item.mxCnt">
              <template #title>
                <div class="text-secondary-text text-body-r" style="display: inline-flex; align-items: center">
                  {{ $t(`business.home.saletaskMxStatistic.${item.type}`) }}
                </div>
              </template>
              <template #suffix>
                <span class="text-f-c text-disable">{{ $t("business.home.layout.items") }}</span>
              </template>
            </el-statistic>
            <div class="statistic-footer" @click="handleClick(item)">
              <div class="footer-item">
                <span>{{ $t("business.home.layout.moreTips") }}</span>
              </div>
              <div class="footer-item">
                <el-icon :size="14">
                  <ArrowRight />
                </el-icon>
              </div>
            </div>
          </div>
        </el-col>
      </template>
      <div v-else class="empty text-disable flx-center" @click="toEmpty">{{ $t("business.home.layout.emptyDataTips") }}</div>
    </el-row>
  </div>
</template>

<script lang="ts" setup name="home_widget-dashboard-index">
import { ref, reactive, nextTick, onMounted, computed } from "vue";
import { ArrowRight, CaretBottom, CaretTop, Warning } from "@element-plus/icons-vue";
// import { getSaletaskStatistic } from "@/api/modules/saletask";
import LjHeader from "@/components/LjHeader/index.vue";
import { Saletask } from "@/api/interface/index";
import { homeWidgetProps } from "../../interface/index";
import dayjs from "dayjs";
import { useI18n } from "vue-i18n";

interface saletaskMxStatisticProps extends homeWidgetProps {
  /**
   * @description 数据统计入参
   */
  statistic: any;
}

const prop = withDefaults(defineProps<saletaskMxStatisticProps>(), {
  id: "",
  statistic: []
});

const statisticList = ref<any>([]);
const refreshDate = ref<any>("");
const emit = defineEmits(["emptyClick", "statisticClick"]);
const loading = ref(false);
/**
 * @description 当前客户id
 */
const comid = ref(0);

const dataCallback = () => {
  return prop.statistic.map((item: any) => {
    return {
      type: item
    };
  });
};

const onRefresh = async (data: any) => {
  let _data = data;
  if (!data) _data = { cuscomid: comid.value };
  // let res = await getSaletaskStatistic({ cuscomid: _data.cuscomid, statistic: dataCallback() });
  // console.log("dashboard-toOut res :>> ", res);
  // statisticList.value = res.statistic;
  // comid.value = _data.cuscomid;
  refreshDate.value = dayjs().format("HH:mm");
  console.log("refreshDate.value :>> ", refreshDate.value);
};

const toEmpty = () => {
  emit("emptyClick", prop.id);
};

const handleClick = (data: any) => {
  emit("statisticClick", data);
};

onMounted(() => {
  loading.value = true;
  console.log("home_widget-dashboard-index prop :>> ", prop);
  // let _statistic = [
  //   {
  //     type: "toReceive",
  //     cnt: 0,
  //     mxCnt: 200
  //   },
  //   {
  //     type: "toResponse",
  //     mxCnt: 200
  //   },
  //   {
  //     type: "toOut",
  //     mxCnt: 200
  //   }
  // ];
  // statisticList.value = _statistic.filter(item => prop.statistic.indexOf(item.type) > -1);
  // for (let item of statisticList.value) {
  //   item.mxCnt = 230;
  // }
  onRefresh(0).then(() => {
    nextTick(() => {
      setTimeout(() => {
        loading.value = false;
      }, 200);
    });
  });
});

defineExpose({
  onRefresh
});
</script>

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