<template>
  <el-dialog v-model="state.dialogVisible" width="50%" draggable :title="dialogTitle" @close="close" append-to-body destroy-on-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="keyWords" :rules="[{ required: false, message: '请输入关键词', trigger: 'change' }]">
            <el-tag
                v-for="tag in dynamicTags"
                :key="tag"
                class="mr10 mb10"
                size="large"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>
            <el-input
                v-if="inputVisible"
                ref="InputRef"
                v-model="inputValue"
                @keyup.enter="handleInputConfirm"
                @blur="handleInputConfirm"
                style="max-width: 200px"
                class="mb10"
            />
            <el-button v-else @click="showInput" class="mb10"> 添加关键词 </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider content-position="left"><span class="font16"> 重复事件工单 </span></el-divider>
    <div class="mb10">
      <el-button type="primary" @click="onAddRepeatTable">添加 </el-button>
      <el-button type="primary" @click="onRemoveRepeatTable" :disabled="!multipleSelection.length">移除 </el-button>
    </div>
    <el-table :data="state.repeatTable" v-loading="state.loading" row-key="id" @selection-change="handleSelectionChange" ref="multipleTableRef">
      <el-table-column type="selection" label="" width="55" :reserve-selection="true" />
      <el-table-column prop="no" label="工单编码" show-overflow-tooltip width="150"></el-table-column>
      <el-table-column width="100" label="省/市工单" prop="isProvince">
        <template #default="{ row }">
          <span>{{ row.isProvince ? '省工单' : '市工单' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="currentStepName" label="当前办理节点" show-overflow-tooltip width="150"></el-table-column>
      <el-table-column label="工单状态" show-overflow-tooltip width="100" prop="statusText"></el-table-column>
      <el-table-column label="标题" show-overflow-tooltip width="300">
        <template #default="{ row }">
          <span class="color-primary">{{ row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="受理时间" show-overflow-tooltip width="170">
        <template #default="{ row }">
          <span>{{ formatDate(row.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="expiredTime" label="工单期满时间" show-overflow-tooltip width="170">
        <template #default="{ row }">
          <span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="actualHandleOrgName" label="接办部门" show-overflow-tooltip width="170"></el-table-column>
      <el-table-column prop="acceptType" label="受理类型" show-overflow-tooltip width="150"></el-table-column>
      <el-table-column label="紧急程度" show-overflow-tooltip prop="emergencyLevelText" width="100"></el-table-column>
      <el-table-column prop="sourceChannel" label="来源方式" show-overflow-tooltip></el-table-column>
      <el-table-column prop="employeeName" label="受理人" show-overflow-tooltip width="120">
        <template #default="{ row }">
						<span
            >{{ row.acceptorName }} <span v-if="row.acceptorStaffNo">[{{ row.acceptorStaffNo }}]</span>
						</span>
        </template>
      </el-table-column>
    </el-table>

    <!--   从所有工单重选择重复   -->
    <el-dialog v-model="state.dialogVisibleAllTable" width="50%" draggable title="选择重复事件工单" append-to-body destroy-on-close>
      <el-form :model="state.queryParamsAll" ref="queryParamsAllRef" :inline="true" @submit.native.prevent>
        <el-form-item label="关键词" prop="Keyword">
          <el-input v-model="state.queryParamsAll.Keyword" placeholder="工单标题/工单编码" clearable @keyup.enter="queryListAll" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryListAll" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
          <el-button @click="resetQueryAll(queryParamsAllRef)" :loading="state.loading" class="default-button">
            <SvgIcon name="ele-Refresh" class="mr5" />重置
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
          :data="state.allTable"
          v-loading="state.loading"
          row-key="id"
          @selection-change="handleSelectionChangeAll"
          ref="multipleTableAllRef"
      >
        <el-table-column type="selection" label="" width="55" :reserve-selection="true" />
        <el-table-column prop="no" label="工单编码" show-overflow-tooltip width="150"></el-table-column>
        <el-table-column width="100" label="省/市工单" prop="isProvince">
          <template #default="{ row }">
            <span>{{ row.isProvince ? '省工单' : '市工单' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="currentStepName" label="当前办理节点" show-overflow-tooltip width="150"></el-table-column>
        <el-table-column label="工单状态" show-overflow-tooltip width="100" prop="statusText"></el-table-column>
        <el-table-column label="标题" show-overflow-tooltip width="300">
          <template #default="{ row }">
            <span class="color-primary">{{ row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="受理时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="expiredTime" label="工单期满时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="actualHandleOrgName" label="接办部门" show-overflow-tooltip width="170"></el-table-column>
        <el-table-column prop="acceptType" label="受理类型" show-overflow-tooltip width="150"></el-table-column>
        <el-table-column label="紧急程度" show-overflow-tooltip prop="emergencyLevelText" width="100"></el-table-column>
        <el-table-column prop="sourceChannel" label="来源方式" show-overflow-tooltip></el-table-column>
        <el-table-column prop="employeeName" label="受理人" show-overflow-tooltip width="120">
          <template #default="{ row }">
							<span
              >{{ row.acceptorName }} <span v-if="row.acceptorStaffNo">[{{ row.acceptorStaffNo }}]</span>
							</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination
          :total="state.totalAll"
          v-model:page="state.queryParamsAll.PageIndex"
          v-model:limit="state.queryParamsAll.PageSize"
          @pagination="queryListAll"
      />
      <template #footer>
					<span class="dialog-footer">
						<el-button @click="state.dialogVisibleAllTable = false" class="default-button">取 消</el-button>
						<el-button type="primary" @click="onSubmitAll" :loading="state.loading" :disabled="!multipleSelectionAll.length">确 定</el-button>
					</span>
      </template>
    </el-dialog>
    <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>
</template>
<script setup lang="ts" name="repeatEventEdit">
import {formatDate} from "/@/utils/formatTime";
import {nextTick, reactive, ref} from "vue";
import dayjs from "dayjs";
import {ElInput, ElMessage, ElMessageBox, FormInstance} from "element-plus";
import {removeDuplicate} from '/@/utils/arrayOperation';
import {orderList} from '/@/api/business/order';
import {repeatEventAdd, repeatEventDetail, repeatEventUpdate} from "/@/api/business/repeatEvent";
import {throttle} from '/@/utils/tools';

const emit = defineEmits(['updateList']);
const state = reactive<any>({
  queryParams: {
    // 查询条件
    PageIndex: 1,
    PageSize: 10,
    Keyword: null, // 关键字
    CreationTimeStart: dayjs().startOf('day').format('YYYY-MM-DD[T]HH:mm:ss'), // 创建时间 开始
    CreationTimeEnd: dayjs().endOf('day').format('YYYY-MM-DD[T]HH:mm:ss'), // 创建时间 结束
    exTime: [dayjs().startOf('day').format('YYYY-MM-DD[T]HH:mm:ss'), dayjs().endOf('day').format('YYYY-MM-DD[T]HH:mm:ss')], // 创建时间
  },
  tableData: [], //表格
  loading: false, // 加载
  total: 0, // 总数
  dialogVisible: false, // 弹窗
  ruleForm: {},
  repeatTable: [], // 重复事件工单
  dialogVisibleAllTable: false, // 全部工单 重复事件工单弹窗
  allTable: [], // 全部工单
  totalAll: 0,
  queryParamsAll: {
    PageIndex: 1,
    PageSize: 10,
    Keyword: '', // 关键字
  },
});

const inputValue = ref('');
const dynamicTags = ref<EmptyArrayType>([]);
const inputVisible = ref(false);
const InputRef = ref<InstanceType<typeof ElInput>>();
// 删除同义词
const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
};
// 展示输入框
const showInput = () => {
  inputVisible.value = true;
  nextTick(() => {
    InputRef.value!.input!.focus();
  });
};
// 确定添加
const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value);
  }
  inputVisible.value = false;
  inputValue.value = '';
};
// 创建重复事件
const dialogTitle = ref<String>('创建重复性事件');
const openDialog = (row?:any) => {
  if(row) {
    dialogTitle.value = '编辑重复性事件';
    getDetail(row)
  }else{
    dialogTitle.value = '创建重复性事件';
    state.dialogVisible = true;
  }
};
// 查询详情
const getDetail = async (row:any)=>{
  try {
    const {result} = await repeatEventDetail({id:row.id,Keyword:null});
    state.ruleForm = result;
    if(result.keyWords)  dynamicTags.value = result.keyWords?.split(',') ?? [];
    state.repeatTable = result.details.map((item: any) => {
      return {
        ...item,
        ...item?.order,
      };
    })
    state.dialogVisible = true;
  }catch (e) {
    console.log(e);
  }
}
// 打开所有工单列表选择重复工单
const onAddRepeatTable = () => {
  queryListAll();
  state.dialogVisibleAllTable = true;
};
// 获取所有工单列表
const queryListAll = async () => {
  try {
    state.loading = true;
    const res = await orderList(state.queryParamsAll);
    state.allTable = res.result.items ?? [];
    state.totalAll = res.result.total ?? 0;
    state.loading = false;
  } catch (e) {
    console.log(e);
    state.loading = false;
  }
};
// 重置所有工单列表
const queryParamsAllRef = ref<RefType>();
const resetQueryAll = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  queryListAll();
};
const multipleSelection = ref<EmptyArrayType>([]); // 重复件表格选中项
const multipleTableRef = ref<RefType>(); // 重复件表格ref
const handleSelectionChange = (row: any) => {
  multipleSelection.value = row;
};
const multipleSelectionAll = ref<EmptyArrayType>([]); // 所有工单表格选中项
const multipleTableAllRef = ref<RefType>(); // 所有工单表格ref
const handleSelectionChangeAll = (row: any) => {
  multipleSelectionAll.value = row;
};
// 确定选择所有工单到重复工单
const onSubmitAll = () => {
  state.dialogVisibleAllTable = false;
  state.repeatTable = removeDuplicate([...state.repeatTable, ...multipleSelectionAll.value], 'id'); // 添加时去重
  multipleSelectionAll.value = [];
  multipleTableAllRef.value!.clearSelection();
};
// 删除重复工单
const onRemoveRepeatTable = () => {
  const title = multipleSelection.value.map((item: any) => item.title);
  ElMessageBox.confirm(`您确定要删除：【${title}】，是否继续?`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
    cancelButtonClass: 'default-button',
    autofocus: false,
  })
      .then(() => {
        multipleSelection.value.forEach((item1: any) => {
          state.repeatTable.forEach((item: any, index: number) => {
            if (item.id === item1.id) {
              multipleTableRef.value!.toggleRowSelection(item, undefined);
              state.repeatTable.splice(index, 1);
            }
          });
        });
      })
      .catch(() => {});
};
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;
    const details = state.repeatTable.map((item: any) => {
      return {
        orderNo: item.no,
        orderId: item.id,
      };
    });
    const request = {
      ...state.ruleForm,
      keyWords: dynamicTags.value.join(','),
      details,
    };
    if(dialogTitle.value === '创建重复性事件'){
      repeatEventAdd(request)
          .then(() => {
            ElMessage({
              message: '操作成功',
              type: 'success',
            });
            emit('updateList')
            state.dialogVisible = false;
          })
          .catch((error) => {})
          .finally(() => {
            state.loading = false;
            state.dialogVisible = false;
          });
    }else{
      repeatEventUpdate(request)
          .then(() => {
            ElMessage({
              message: '操作成功',
              type: 'success',
            });
            emit('updateList')
            state.dialogVisible = false;
          })
          .catch((error) => {})
          .finally(() => {
            state.loading = false;
            state.dialogVisible = false;
          });
    }
  });
}, 300);
defineExpose({
  openDialog,
});
</script>