<template>
  <el-dialog v-model="state.dialogVisible" draggable title="重复性事件" ref="dialogRef" width="60%" append-to-body>
    <el-form :model="state.queryParams" ref="queryParamsRef" :inline="true" @submit.native.prevent>
      <el-form-item label="关键词" prop="Keyword">
        <el-input v-model="state.queryParams.Keyword" placeholder="事件标题/关键词" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="创建时间" prop="exTime">
        <el-date-picker
            v-model="state.queryParams.exTime"
            type="datetimerange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :shortcuts="shortcuts"
            @change="timeStartChangeCr"
            value-format="YYYY-MM-DD[T]HH:mm:ss"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery" :loading="state.loading">
          <SvgIcon name="ele-Search" class="mr5" />查询
        </el-button>
        <el-button @click="resetQuery(queryParamsRef)" :loading="state.loading" class="default-button">
          <SvgIcon name="ele-Refresh" class="mr5" />重置
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="state.tableData"
        v-loading="state.loading"
        max-height="300"
    >
      <el-table-column prop="phoneNo" label="标题" show-overflow-tooltip width="180">
        <template #default="{ row }">
          {{ row.title }}
        </template>
      </el-table-column>
      <el-table-column prop="hotspotName" label="关键词" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="no" label="创建时间" show-overflow-tooltip width="170">
        <template #default="{ row }">

        </template>
      </el-table-column>
      <el-table-column prop="currentStepName" label="创建人" show-overflow-tooltip></el-table-column>
      <el-table-column prop="statusText" label="事件工单数" width="100" fixed="right" align="center"></el-table-column>
    </el-table>
    <template #footer>
				<span class="dialog-footer">
					<el-button class="default-button" @click="state.dialogVisible = false">关 闭</el-button>
				</span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="orderRepeatEvent">
import {reactive, ref} from 'vue';
import type { FormInstance } from 'element-plus';
import {shortcuts} from "/@/utils/constants";
import {ElButton, ElMessage} from "element-plus";
import {throttle} from "/@/utils/tools";
import {auth} from "/@/utils/authFunction";
// 引入组件
// 定义变量内容
const state = reactive<any>({
  dialogVisible: false, // 弹窗显示隐藏
  queryParams: {
    PageIndex: 1, // 当前页
    PageSize: 10, // 每页条数
    Keyword: '',  // 关键字
  },
  tableData: [], // 表格数据
  total: 0,   // 总条数
  loading: false, // 加载状态
  ruleForm: {}, // 表单数据
});
const queryParamsRef = ref<RefType>(); // 查询参数
const handleTimeChange = (val: string[], startKey: string, endKey: string) => {
  if (val) {
    state.queryParams[startKey] = val[0];
    state.queryParams[endKey] = val[1];
  } else {
    state.queryParams[startKey] = '';
    state.queryParams[endKey] = '';
  }
};
// 时间
const timeStartChangeCr = (val: string[]) => {
  handleTimeChange(val, 'CreationTimeStart', 'CreationTimeEnd');
};
/** 搜索按钮操作 */
const handleQuery = throttle(() => {
  state.queryParams.PageIndex = 1;
  queryList();
}, 500);
/** 重置按钮操作 */
const resetQuery = throttle((formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  handleQuery();
}, 300);
const queryList = ()=>{
  if (!auth('business:order:history')) ElMessage.error('抱歉，您没有权限查询历史工单！');
  else {

  }
}
// 打开弹窗
const openDialog = (row: any) => {
  queryList();
  state.dialogVisible = true;
};
const dialogRef = ref<RefType>();
// 关闭弹窗
const closeDialog = () => {
  state.dialogVisible = false;
};
// 暴露变量
defineExpose({
  openDialog,
  closeDialog,
});
</script>
