<template>
	<div class="dataShare-timeliness-container layout-padding">
    <div class="layout-padding-auto layout-padding-view pd20 h100">
        <el-card shadow="never">
          <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
            <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="handleQuery"
                  value-format="YYYY-MM-DD[T]HH:mm:ss"
                  :default-time="defaultTimeStartEnd"
                  :clearable="false"
              />
            </el-form-item>
            <el-form-item label-width="0">
              <el-button type="primary" @click="handleQuery" :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-row :gutter="20" style="flex:1;overflow:auto;" class="backToTop">
          <el-divider><el-text tag="b" class="font16">工单</el-text></el-divider>
          <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
            <el-card shadow="never" v-loading="state.loading" class="statistics-item">
              <el-statistic :value="state.data.orderCountNum">
                <template #title>
                  <span class="color-info font14">工单总量</span>
                </template>
              </el-statistic>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
            <el-card shadow="never" v-loading="state.loading" class="statistics-item">
              <el-statistic :value="state.data.handleEndOrderNum">
                <template #title>
                  <span class="color-info font14">办结件数</span>
                </template>
              </el-statistic>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
            <el-card shadow="never" v-loading="state.loading" class="statistics-item">
              <el-statistic :value="state.data.handleEndOrderOnTime">
                <template #title>
                  <span class="color-info font14">按时办结数量</span>
                </template>
              </el-statistic>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
            <el-card shadow="never" v-loading="state.loading" class="statistics-item">
              <el-statistic :value="state.data.handleEndOrderRate">
                <template #title>
                  <span class="color-info font14">办结率</span>
                </template>
                <template #suffix>%</template>
              </el-statistic>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
            <el-card shadow="never" v-loading="state.loading" class="statistics-item">
              <el-statistic :value="state.data.handleEndOrderOnTimeRate">
                <template #title>
                  <span class="color-info font14">按时办结率</span>
                </template>
                <template #suffix>%</template>
              </el-statistic>
            </el-card>
          </el-col>
          <el-divider><el-text tag="b" class="font16">工单及时率</el-text> </el-divider>
          <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
            <el-card shadow="never" v-loading="state.loading" class="statistics-item">
              <el-statistic :value="state.data.orderTimely">
                <template #title>
                  <span class="color-info font14">工单及时上传</span>
                </template>
              </el-statistic>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
            <el-card shadow="never" v-loading="state.loading" class="statistics-item">
              <el-statistic :value="state.data.orderNotTimely">
                <template #title>
                  <span class="color-info font14">工单未及时上传</span>
                </template>
              </el-statistic>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
            <el-card shadow="never" v-loading="state.loading" class="statistics-item">
              <el-statistic :value="state.data.orderTimelinessRate">
                <template #title>
                  <span class="color-info font14">工单及时率</span>
                </template>
                <template #suffix>%</template>
              </el-statistic>
            </el-card>
          </el-col>
          <el-divider><el-text tag="b" class="font16">电话数量</el-text></el-divider>
          <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
            <el-card shadow="never" v-loading="state.loading" class="statistics-item">
              <el-statistic :value="state.data.telCountNum">
                <template #title>
                  <span class="color-info font14">电话总量</span>
                </template>
              </el-statistic>
            </el-card> </el-col
          ><el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
          <el-card shadow="never" v-loading="state.loading" class="statistics-item">
            <el-statistic :value="state.data.telConnectCountNum">
              <template #title>
                <span class="color-info font14">电话接通数</span>
              </template>
            </el-statistic>
          </el-card> </el-col
        ><el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
          <el-card shadow="never" v-loading="state.loading" class="statistics-item">
            <el-statistic :value="state.data.telNotConnectCountNum">
              <template #title>
                <span class="color-info font14">电话未接通数</span>
              </template>
            </el-statistic>
          </el-card>
        </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
            <el-card shadow="never" v-loading="state.loading" class="statistics-item">
              <el-statistic :value="state.data.telConnectRate">
                <template #title>
                  <span class="color-info font14">电话接通率</span>
                </template>
                <template #suffix>%</template>
              </el-statistic>
            </el-card>
          </el-col>
          <el-divider><el-text tag="b" class="font16">电话及时率</el-text></el-divider>
          <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
            <el-card shadow="never" v-loading="state.loading" class="statistics-item">
              <el-statistic :value="state.data.telTimely">
                <template #title>
                  <span class="color-info font14">电话及时上传</span>
                </template>
              </el-statistic>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
            <el-card shadow="never" v-loading="state.loading" class="statistics-item">
              <el-statistic :value="state.data.telNotTimely">
                <template #title>
                  <span class="color-info font14">电话未及时上传</span>
                </template>
              </el-statistic>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
            <el-card shadow="never" v-loading="state.loading" class="statistics-item">
              <el-statistic :value="state.data.telTimelinessRate">
                <template #title>
                  <span class="color-info font14">电话及时率</span>
                </template>
                <template #suffix>%</template>
              </el-statistic>
            </el-card>
          </el-col>
          <el-divider><el-text tag="b" class="font16">匹配率</el-text></el-divider>
          <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
            <el-card shadow="never" v-loading="state.loading" class="statistics-item">
              <el-statistic :value="state.data.rgdhOrderCount">
                <template #title>
                  <span class="color-info font14">电话来源工单数量</span>
                </template>
              </el-statistic>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
            <el-card shadow="never" v-loading="state.loading" class="statistics-item">
              <el-statistic :value="state.data.containTel">
                <template #title>
                  <span class="color-info font14">匹配通话记录数</span>
                </template>
              </el-statistic>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
            <el-card shadow="never" v-loading="state.loading" class="statistics-item">
              <el-statistic :value="state.data.notContainTel">
                <template #title>
                  <span class="color-info font14">未匹配通话记录数</span>
                </template>
              </el-statistic>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
            <el-card shadow="never" v-loading="state.loading" class="statistics-item">
              <el-statistic :value="state.data.matchingRate">
                <template #title>
                  <span class="color-info font14">匹配率</span>
                </template>
                <template #suffix>%</template>
              </el-statistic>
            </el-card>
          </el-col>
          <el-divider><el-text tag="b" class="font16">回访</el-text></el-divider>
          <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
            <el-card shadow="never" v-loading="state.loading" class="statistics-item">
              <el-statistic :value="state.data.visitCountNum">
                <template #title>
                  <span class="color-info font14">回访总量</span>
                </template>
              </el-statistic>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
            <el-card shadow="never" v-loading="state.loading" class="statistics-item">
              <el-statistic :value="state.data.satisfactionCountNum">
                <template #title>
                  <span class="color-info font14">满意总量</span>
                </template>
              </el-statistic>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
            <el-card shadow="never" v-loading="state.loading" class="statistics-item">
              <el-statistic :value="state.data.notSatisfiedCountNum">
                <template #title>
                  <span class="color-info font14">不满意总量</span>
                </template>
              </el-statistic>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
            <el-card shadow="never" v-loading="state.loading" class="statistics-item">
              <el-statistic :value="state.data.satisfactionRate">
                <template #title>
                  <span class="color-info font14">满意率</span>
                </template>
                <template #suffix>%</template>
              </el-statistic>
            </el-card> </el-col
          ><el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
          <el-card shadow="never" v-loading="state.loading" class="statistics-item">
            <el-statistic :value="state.data.notSatisfiedRate">
              <template #title>
                <span class="color-info font14">不满意率</span>
              </template>
              <template #suffix>%</template>
            </el-statistic>
          </el-card>
        </el-col>
          <el-divider><el-text tag="b" class="font16">知识库</el-text></el-divider>
          <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
            <el-card shadow="never" v-loading="state.loading" class="statistics-item">
              <el-statistic :value="state.data.knowledgeCount">
                <template #title>
                  <span class="color-info font14">知识库总量</span>
                </template>
              </el-statistic>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
            <el-card shadow="never" v-loading="state.loading" class="statistics-item">
              <el-statistic :value="state.data.updateKnowledgeCount">
                <template #title>
                  <span class="color-info font14">更新知识库量</span>
                </template>
              </el-statistic>
            </el-card>
          </el-col>
        </el-row>
      <el-backtop target=".backToTop" />
		</div>
	</div>
</template>
<script setup lang="tsx" name="dataShareTimeliness">
import { onMounted, reactive, ref } from 'vue';
import { FormInstance } from 'element-plus';
import { defaultDateTime, defaultTimeStartEnd, shortcuts } from "@/utils/constants";
import { formatDate } from '@/utils/formatTime';
import { getTimeRateNew } from '@/api/dataShare';
import Other from '@/utils/other';
const proTableRef = ref<RefType>(); // 表格ref
// 表格配置项
const columns = ref<any[]>([
	{ prop: 'provinceNo', label: '省本地编码', align: 'center' },
	{
		prop: 'firstTime',
		label: '初次推送时间',
		align: 'center',
		width: 170,
		render: (scope) => {
			return <span>{formatDate(scope.row.firstTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
		},
	},
	{
		prop: 'lastTime',
		label: '最近一次推送时间',
		align: 'center',
		width: 170,
		render: (scope) => {
			return <span>{formatDate(scope.row.lastTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
		},
	},
	{
		prop: 'sendTimes',
		label: '推送次数',
		align: 'center',
	},
	{
		prop: 'isSuccess',
		label: '推送状态',
		align: 'center',
		render: (scope) => {
			return <span>{scope.row.isSuccess ? '成功' : '失败'}</span>;
		},
	},
	{
		prop: 'platformSource',
		label: '平台名称',
		align: 'center',
	},
	{ prop: 'taskType', label: '任务类型', align: 'center' },
	{ prop: 'request', label: '请求参数', align: 'center' },
	{
		prop: 'generationTime',
		label: '生成时间',
		align: 'center',
		width: 170,
		render: (scope) => {
			return <span>{formatDate(scope.row.generationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
		},
	},
	{
		prop: 'creationTime',
		label: '创建时间',
		align: 'center',
		width: 170,
		render: (scope) => {
			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
		},
	},
]);
// 定义变量内容
const ruleFormRef = ref<RefType>(); // 表单ref
const state = reactive<any>({
	queryParams: {
		crTime: defaultDateTime,
		StartTime: null,
		EndTime: null,
	},
	loading: false, // 加载
	data: {
		orderCountNum: 0, // 工单总量
		handleEndOrderNum: 0, // 办结件数
		handleEndOrderOnTime: 0, // 按时办结数量
		orderTimely: 0, // 按时办结率
		orderNotTimely: 0, // 不按时办结数量
		orderTimelinessRate: 0, // 按时办结率
		handleEndOrderRate: 0, // 办结率
		handleEndOrderOnTimeRate: 0, // 按时办结率
		telCountNum: 0, // 电话总量
		telConnectCountNum: 0, // 电话接通数
		telNotConnectCountNum: 0, // 电话未接通数
		telTimely: 0, // 按时接通率
		telNotTimely: 0, // 不按时接通数量
		telTimelinessRate: 0, // 按时接通率
		telConnectRate: 0, // 接通率
		rgdhOrderCount: 0, // 电话来源工单数量
		containTel: 0, // 包含电话数量
		notContainTel: 0, // 不包含电话数量
		matchingRate: 0, // 匹配率
		visitCountNum: 0, // 回访总量
		satisfactionCountNum: 0, // 满意总量
		notSatisfiedCountNum: 0, // 不满意总量
		satisfactionRate: 0, // 满意率
		notSatisfactionRate: 0, // 不满意率
		knowledgeCount: 0, // 知识库总量
		updateKnowledgeCount: 0, // 更新知识库量
	},
});
/** 搜索按钮操作 */
const handleQuery = () => {
	// state.queryParams.PageIndex = 1;
	queryList();
};
/** 获取列表 */
const queryList = () => {
	state.loading = true;
	let request = Other.deepClone(state.queryParams);
	request.StartTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[0];
	request.EndTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
	Reflect.deleteProperty(request, 'crTime');
	getTimeRateNew(request)
		.then((res: any) => {
			state.data = res.result ?? {};
			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
		});
};
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	queryList();
};
onMounted(() => {
	queryList();
});
</script>
<style scoped lang="scss">
.dataShare-timeliness-container {
	.el-divider--horizontal {
		margin: 24px 0;
	}
	.statistics-item {
		margin-bottom: 10px;
	}
  :deep(.layout-padding-view){
    background-color: transparent;
  }
  :deep(.el-divider__text){
    background-color: var(--hotline-bg-main-color);
  }
}
</style>
