<template>
  <div class="statistics-order-visit-count-container layout-pd">
    <!-- 搜索  -->
    <el-card shadow="never">
      <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
        <el-form-item label="回访员" prop="VisitName">
          <el-input v-model="state.queryParams.VisitName" placeholder="回访员名称" clearable @keyup.enter="queryList" class="keyword-input" />
        </el-form-item>
        <el-form-item label="时间段" prop="crTime">
          <el-date-picker
            v-model="state.queryParams.crTime"
            type="datetimerange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :shortcuts="shortcuts"
            @change="queryList"
            value-format="YYYY-MM-DD[T]HH:mm:ss"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryList" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
          <el-button @click="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
            <SvgIcon name="ele-Refresh" class="mr5" />重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <ProTable
          ref="proTableRef"
          :columns="columns"
          :data="state.tableData"
          @updateTable="queryList"
          :loading="state.loading"
          show-summary
          border
          row-key="orgId"
          :pagination="false"
          :summary-method="getSummaries"
      >
      </ProTable>
    </el-card>
  </div>
</template>
<script setup lang="tsx" name="statisticsOrderVisitCount">
import { onMounted, reactive, ref } from 'vue';
import { ElButton, FormInstance } from 'element-plus';
import { throttle } from '@/utils/tools';
import { departmentVisit } from '@/api/statistics/order';
import { shortcuts } from '@/utils/constants';
import dayjs from 'dayjs';
// 定义变量内容

const columns = ref<any>([
  { type: 'index', fixed: 'left', width: 55, label: '序号', align: 'center' },
  { prop: 'visitName', label: '回访员', align: 'center' },
  { prop: 'aiVisitCount', label: '智能回访量', align: 'center' },
  { prop: 'artificialVisitCount', label: '人工回访量', align: 'center' },
  { prop: 'sumCount', label: '总回访量', align: 'center' },
]);
const ruleFormRef = ref<RefType>(); // 表单ref
const state = reactive({
  queryParams: {
    // 查询条件
    VisitName: null, // 关键词
    crTime: [dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'), dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')], // 时间默认今天开始到今天结束
  },
  tableData:[],
  loading: false, // 加载
  total: 0, // 总数
});
/** 获取列表 */
const queryList = throttle(() => {
  state.loading = true;
  let StartDate = null;
  let EndDate = null;
  if (state.queryParams?.crTime) {
    StartDate = state.queryParams?.crTime[0];
    EndDate = state.queryParams?.crTime[1];
  }
  const request = {
    StartDate,
    EndDate,
    VisitName: state.queryParams.VisitName,
  };
  departmentVisit(request)
    .then((res: any) => {
      state.tableData = res.result;
      state.loading = false;
    })
    .catch(() => {
      state.loading = false;
    });
}, 300);
/** 重置按钮操作 */
const resetQuery = throttle((formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  queryList();
}, 300);
// 合计
const getSummaries = (param: any) => {
  const { columns, data } = param;
  const sums: string[] = [];
  columns.forEach((column: { property: string }, index: number) => {
    if (index === 0) {
      sums[index] = '合计';
      return;
    }
    const values = data.map((item: { [x: string]: any }) => Number(item[column.property]));
    if (['visitName'].includes(column.property)) {
      //百分比不能计算
      sums[index] = '';
      return '';
    } else if (!values.every((value: unknown) => Number.isNaN(value))) {
      sums[index] = `${values.reduce((prev: any, curr: any) => {
        const value = Number(curr);
        if (!Number.isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0)}`;
    } else {
      sums[index] = ' ';
    }
  });
  return sums;
};
onMounted(() => {
  queryList();
});
</script>
