<template>
  <div class="statistic-card card">
    <header>
      <LjHeader
        class="flx-1"
        :title="$t('business.home.layout.toOutStatistic')"
        :label="'(' + $t('business.home.layout.details') + ')'"
      />
      <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>
    <div class="statistic-card__main flx-justify-between">
      <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">
        <div class="statistic-item flx-col flx-1" v-for="(item, index) in statisticList" :key="index">
          <el-statistic :value="item.mxCnt">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                {{ item.label || $t("business.home.saletaskMxStatistic.toOut") }}
              </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>{{ formatToDate(item.startTime, "YYYY-MM-DD") }}</span>
              <span>{{ toFormatEndDate(item.startTime, item.endTime) }}</span>
            </div>
            <div class="footer-item">
              <!-- <span class="text-disable">筛选</span> -->
              <el-icon :size="14">
                <ArrowRight />
              </el-icon>
            </div>
          </div>
        </div>
      </template>
      <div v-else class="empty text-disable flx-center" @click="toEmpty">{{ $t("business.home.layout.emptyDataTips") }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup name="home_widget-dashboard-toOut">
import { ref, onMounted, watch, nextTick } 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 { formatToDate } from "@/utils/dateUtil";
import dayjs from "dayjs";
import { useI18n } from "vue-i18n";

interface toOutStatisticProps extends homeWidgetProps {
  toOutType: any;
}

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

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

const paramCallback = () => {
  return prop.toOutType.map((item: any) => {
    return {
      ...item,
      type: "toOut",
      mxCnt: 0,
      cnt: 0
    };
  });
};

const dataCallback = (data: any) => {
  if (!data) return [];
  return data.map((item: any) => {
    let orItem = prop.toOutType.find((itm: any) => itm.startTime == item.startTime && itm.endTime == item.endTime);
    return {
      ...orItem,
      ...item
    };
  });
};

const toFormatEndDate = (startTime: any, endTime: any) => {
  let _start = dayjs(startTime);
  let _end = dayjs(endTime);
  if (_start.year() != _end.year()) return ` ${t("common.to")} ` + _end.format("YYYY-MM-DD");
  if (_start.month() != _end.month()) return ` ${t("common.to")} ` + _end.format("MM-DD");
  if (_start.day() != _end.day()) return ` ${t("common.to")} ` + _end.format("DD");
  return "";
};

const onRefresh = async (data: any) => {
  let _data = data;
  if (!data) _data = { cuscomid: comid.value };
  // let res = await getSaletaskStatistic({ cuscomid: _data.cuscomid, statistic: paramCallback() });
  // console.log("dashboard-toOut res :>> ", res);
  // statisticList.value = dataCallback(res.statistic);
  // console.log("dashboard-toOut affff data.value :>> ", statisticList.value);
  // 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-dashboard-toOut toOut :>> ", prop);
  // statisticList.value = prop.toOutType;
  // 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>
