<template>
  <div class="router">
    <el-card>
      <!-- 过滤条件框 -->
      <el-form :model="filterForm" style="width: 100%" label-width="135px">
        <el-row :gutter="24">
          <el-col :span="10">
            <el-form-item label="选择时间">
              <el-date-picker v-model="dateTime" type="datetimerange" range-separator="至" start-placeholder="开始时间"
                end-placeholder="结束时间" @change="dateChange" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="名称" width="60px">
              <el-input v-model="filterForm.name" placeholder="请输入名称" clearable />
            </el-form-item>
          </el-col>
          <el-col></el-col>
          <el-col :span="10">
            <el-form-item label="同步时长/毫秒">
              <div class="input-class" id="input-class" @mouseover="mouseover" @mouseleave="mouseleave">
                <input type="text" class="range-input" placeholder="开始同步时长" v-model="filterForm.costTimeFrom"
                  @focus="onFocus" @blur="onBlur" @input="handleNumberChangeFrom" />
                <span class="range-separator">至</span>
                <input type="text" class="range-input" placeholder="结束同步时长" v-model="filterForm.costTimeTo"
                  @focus="onFocus" @blur="onBlur" @input="handleNumberChangeTo" />
                <el-icon class="range-icon" id="range-icon" @click="handleClickIcon">
                  <CircleClose />
                </el-icon>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="唯一标识" width="60px">
              <el-input v-model="filterForm.queueId" placeholder="请输入唯一标识" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4" style="text-align: center">
            <el-button type="primary" @click="handleScreen">筛选</el-button>
          </el-col>
        </el-row>
      </el-form>

      <el-divider />

      <!-- 表格 -->
      <el-table v-loading="loading" :data="tableList" border stripe style="width: 100%" @filter-change="filterChange">
        <el-table-column type="index" :index="indexMethod(1)" />
        <el-table-column prop="flag" label="是否成功" :filters="[
          { text: '成功', value: '1' },
          { text: '失败', value: '0' },
        ]" :filter-multiple="false" filter-placement="bottom-end" align="center" width="135px">
          <template #default="scope">
            <el-tag :type="scope.row.flag === 1 ? 'success' : ''" disable-transitions>{{ scope.row.flag === 1 ? "成功" :
                "失败"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="单据名称" align="center" />
        <el-table-column prop="costTime" label="同步时长/毫秒" align="center" />
        <el-table-column prop="queueId" label="唯一标识" align="center" />
        <el-table-column prop="message" label="错误信息" align="center">
          <template #default="scope">
            <el-tooltip class="box-item" effect="dark" placement="left" popper-class="tooltip-class">
              <template #content>
                <textarea v-model="scope.row.message" class="paperview-input-text" rows="10" cols="30" readonly>
                </textarea>
              </template>
              <span style="white-space: nowrap">{{ scope.row.message }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" />
        <el-table-column label="操作" align="center" width="155px">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleDetails(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin-top: 20px">
        <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 15, 20]"
          layout="->, total,sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" hide-on-single-page />
      </div>
    </el-card>
    <!-- 详情页面 -->
    <el-dialog v-model="visible" title="详情页面" width="40%">
      <el-form :model="detailForm" label-width="135px" :disabled="(disabled = true)">
        <el-form-item label="单据名称：">
          <el-input v-model="detailForm.name" placeholder="单据名称为" />
        </el-form-item>
        <el-form-item label="是否成功：">
          <el-tag :type="detailForm.flag === 1 ? 'success' : ''" disable-transitions>{{ detailForm.flag === 1 ? "成功" :
              "失败"
          }}</el-tag>
        </el-form-item>
        <el-form-item label="同步时长/毫秒：">
          <el-input v-model="detailForm.costTime" placeholder="同步时长为" />
        </el-form-item>
        <el-form-item label="唯一标识：">
          <el-input v-model="detailForm.queueId" placeholder="唯一标识为" />
        </el-form-item>
        <el-form-item label="创建时间：">
          <el-input v-model="detailForm.createTime" placeholder="创建时间为" />
        </el-form-item>
        <el-form-item label="请求参数：">
          <el-input type="textarea" :rows="5" v-model="detailForm.request" placeholder="请求参数为" />
        </el-form-item>
        <el-form-item label="响应信息：">
          <el-input type="textarea" :rows="5" v-model="detailForm.response" placeholder="响应信息为" />
        </el-form-item>
        <el-form-item label="错误信息：">
          <el-input type="textarea" :rows="4" v-model="detailForm.message" placeholder="错误信息为" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelVisible1">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from "vue";
import moment from "moment";
import { ElMessage, ElTable } from "element-plus";
import { store } from '@/store';
import { getkingdeeLog } from "@/services/api/systemApi/log/logApi";
import { usekingdeeLogTableList } from "../system/tableConfigData/useXyunLog";

interface List {
  flag: Boolean;
  name: string;
  createTime: string;
}
const dateTime = ref();
const filterForm = ref<any>({
  dateFrom: "",
  dateTo: "",
  name: "",
  costTimeFrom: undefined,
  costTimeTo: undefined,
  queueId: "",
});
const detailForm = ref<any>({
  flag: "",
  name: "",
  request: "",
  response: "",
  message: "",
  queueId: "",
});
const indexMethod = (index: number) => {
  return index++;
};
const visible = ref(false);

// 分页
const disabled = ref(false);
const filters = ref();
const { tableList, total, loading, pageSize, currentPage } =
  usekingdeeLogTableList();

// 同步筛选
const filterChange = (value: any) => {
  let i = "";
  Object.values(value).forEach((e: any) => {
    i = e[0];
  });
  nextTick(() => {
    filters.value = i;
    page(
      currentPage.value,
      pageSize.value,
      filterForm.value.dateFrom,
      filterForm.value.dateTo,
      filterForm.value.name,
      filters.value,
      filterForm.value.costTimeFrom,
      filterForm.value.costTimeTo,
      filterForm.value.queueId
    );
  });
};
const dateChange = (value: any) => {
  if (value) {
    filterForm.value.dateFrom = moment(value[0]).format("YYYY-MM-DD HH:mm:ss");
    filterForm.value.dateTo = moment(value[1]).format("YYYY-MM-DD HH:mm:ss");
  } else {
    filterForm.value.dateFrom = "";
    filterForm.value.dateTo = "";
  }
};

// 详情
const handleDetails = (scope: any) => {
  console.log(filterForm.value);
  detailForm.value = scope;
  visible.value = true;
};
// 对话框取消按钮
const cancelVisible1 = () => {
  const arr: any = [];
  detailForm.value = arr;
  visible.value = false;
};
// 筛选按钮
const handleScreen = () => {
  console.log(filterForm.value.costTimeFrom, filterForm.value.costTimeTo);

  if (+filterForm.value.costTimeFrom < +filterForm.value.costTimeTo ||
    filterForm.value.costTimeFrom === undefined ||
    filterForm.value.costTimeTo === undefined ||
    filterForm.value.costTimeFrom === '' ||
    filterForm.value.costTimeTo === '') {
    store.commit('search/setkingdeeSearch', filterForm.value)
    page(
      currentPage.value,
      pageSize.value,
      filterForm.value.dateFrom,
      filterForm.value.dateTo,
      filterForm.value.name,
      filters.value,
      filterForm.value.costTimeFrom,
      filterForm.value.costTimeTo,
      filterForm.value.queueId
    );
  } else {
    filterForm.value.costTimeFrom = "";
    filterForm.value.costTimeTo = "";
    ElMessage({
      type: "warning",
      message: "开始同步时长不得大于结束同步时长",
    });
  }

};

// 每页新条数
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  page(
    currentPage.value,
    pageSize.value,
    filterForm.value.dateFrom,
    filterForm.value.dateTo,
    filterForm.value.name,
    filters.value,
    filterForm.value.costTimeFrom,
    filterForm.value.costTimeTo,
    filterForm.value.queueId
  );
};
// 新页数
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  page(
    currentPage.value,
    pageSize.value,
    filterForm.value.dateFrom,
    filterForm.value.dateTo,
    filterForm.value.name,
    filters.value,
    filterForm.value.costTimeFrom,
    filterForm.value.costTimeTo,
    filterForm.value.queueId
  );
};

const handleNumberChangeFrom = () => {
  if (filterForm.value.costTimeFrom) {
    let regPos = /^\+?[1-9][0-9]*$/; // 非负整数
    if (!regPos.test(filterForm.value.costTimeFrom)) {
      filterForm.value.costTimeFrom = "";
      ElMessage({ type: "warning", message: "请输入整数" });
    }
  }
};
const handleNumberChangeTo = () => {
  if (filterForm.value.costTimeTo) {
    let regPos = /^\+?[1-9][0-9]*$/; // 非负整数
    if (!regPos.test(filterForm.value.costTimeTo)) {
      filterForm.value.costTimeTo = "";
      ElMessage({ type: "warning", message: "请输入整数" });
    }
  }
};

const initfilter = () => {
  let data: any = store.state.search.kingdeeSearch
  setTimeout(() => {
    filterForm.value = data
    dateTime.value = [new Date(data.dateFrom), new Date(data.dateTo)]
    page(currentPage.value,
      pageSize.value,
      filterForm.value.dateFrom,
      filterForm.value.dateTo,
      filterForm.value.name,
      filters.value,
      filterForm.value.costTimeFrom,
      filterForm.value.costTimeTo,
      filterForm.value.queueId)
  }, 50)
}
initfilter()

const onFocus = () => {
  activeElement.value = document.activeElement?.tagName
  document.getElementById('input-class')?.setAttribute('style', 'box-shadow: 0 0 0 1px #409EFF inset !important')
}

let activeElement = ref()
const onBlur = () => {
  activeElement.value = document.activeElement?.tagName
  document.getElementById('input-class')!.style.boxShadow = '0 0 0 1px #dcdfe6 inset'
}

const mouseover = () => {
  document.getElementById('input-class')!.style.boxShadow = '0 0 0 1px #b1b3b8 inset'

  if (filterForm.value.costTimeFrom || filterForm.value.costTimeTo) document.getElementById('range-icon')!.style.display = 'block'

}

const mouseleave = () => {
  document.getElementById('range-icon')!.style.display = 'none'
  if (activeElement.value === 'INPUT') document.getElementById('input-class')?.setAttribute('style', 'box-shadow: 0 0 0 1px #409EFF inset !important')
  else document.getElementById('input-class')!.style.boxShadow = '0 0 0 1px #dcdfe6 inset'
}

const handleClickIcon = () => {
  filterForm.value.costTimeFrom = ''
  filterForm.value.costTimeTo = ''
  document.getElementById('range-icon')!.style.display = 'none'
}
// 筛选
const page = (
  pageNo?: number,
  pageSize?: number,
  dateFrom?: string,
  dateTo?: string,
  name?: string,
  flag?: any,
  costTimeFrom?: number,
  costTimeTo?: number,
  queueId?: string
) => {
  getkingdeeLog(
    pageNo,
    pageSize,
    dateFrom,
    dateTo,
    name,
    flag,
    costTimeFrom,
    costTimeTo,
    queueId
  ).then((res: any) => {
    if (res.code === 200) {
      tableList.value = res.data.records;
      total.value = res.data.total;
    }
  });
};
</script>
<style lang="scss" scoped>
@import './scss/kingdeeLog.scss'
</style>
