>

<template>
  <div>
    <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>
    <div class="mb10">
      <el-button type="primary" @click="onAdd" v-auth="'business:order:repeatEvent:add'"> <SvgIcon name="ele-Plus" class="mr5" />创建重复事件 </el-button>
    </div>
    <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>

    <el-dialog v-model="state.dialogVisible" width="500px" draggable title="新增重复性事件" @close="close">
      <el-form :model="state.ruleForm" label-width="80px" ref="ruleFormRef">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="标题" prop="title" :rules="[{ required: true, message: '请输入标题', trigger: 'blur' }]">
              <el-input v-model="state.ruleForm.title" placeholder="请输入标题" clearable show-word-limit maxlength="200"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="关键词" prop="keyword" :rules="[{ required: true, message: '请输入关键词', trigger: 'blur' }]">
              <el-input v-model="state.ruleForm.keyword" placeholder="请输入关键词" clearable type="text" show-word-limit maxlength="200"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="state.dialogVisible = false" class="default-button">取 消</el-button>
					<el-button type="primary" @click="onSubmit(ruleFormRef)" :loading="state.loading">确 定</el-button>
				</span>
      </template>
    </el-dialog>

  </div>
</template>
<script setup lang="ts" name="orderAcceptRepeatEvent">
import {reactive,ref} from "vue";
import {ElButton, ElMessage, FormInstance} from "element-plus";
import {shortcuts} from "/@/utils/constants";
import {throttle} from "/@/utils/tools";
import {auth} from "/@/utils/authFunction";
import {addCommon} from "/@/api/system/commonAdvice";
const state = reactive<any>({
  queryParams: {
    // 查询条件
    PageIndex: 1,
    PageSize: 10,
    Keyword: '', // 关键字
    CreationTimeStart: '', // 创建时间 开始
    CreationTimeEnd: '', // 创建时间 结束
    exTime: [], // 办理期限
  },
  tableData: [], //表格
  loading: false, // 加载
  total: 0, // 总数
  dialogVisible: 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 = ()=>{

}
// 创建重复事件
const onAdd = ()=>{
  state.dialogVisible = true;
}
const ruleFormRef = ref<RefType>();
const close = ()=>{
  ruleFormRef.value.clearValidate();
  ruleFormRef.value.resetFields();
}
const onSubmit = throttle(async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid: boolean) => {
    if (!valid) return;
    state.loading = true;
    addCommon(state.ruleForm)
        .then(() => {
          ElMessage({
            message: '操作成功',
            type: 'success',
          });
          state.dialogVisible = false;
        })
        .catch((error) => {

        })
        .finally(() => {
          state.loading = false;
          state.dialogVisible = false;
        });
  });
}, 300);
</script>
<style scoped lang="scss">

</style>