<template>
  <div class="interfaceLog">
    <div class="interfaceLog_head flex">
      <div class="interfaceLog_head_time flex-wrap">
        <div class="interfaceLog_head_time_start mr10">
          <el-date-picker
            v-model="timeStart"
            size="default"
            type="datetime"
            placeholder="选择开始日期时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            :clearable="false"
            @change="timeSelectHandler"
          />
        </div>
        <div class="interfaceLog_head_time_end">
          <el-date-picker
            v-model="timeEnd"
            size="default"
            type="datetime"
            placeholder="选择结束日期时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            :clearable="false"
            @change="timeSelectHandler"
          />
        </div>
      </div>
      <div class="interfaceLog_head_btn">
        <Search
          v-permission="['log_management_search_button']"
          :is-title="false"
          @get-search-data="getSearchData"
          @clear-search-data="clearSearchData"
        />
      </div>
    </div>
    <div class="interfaceLog_content">
      <el-row :gutter="24">
        <el-col :span="19">
          <div class="app-containers">
            <DataTable
              :table-header="tableColumns"
              :table-data="tableData"
              :table-property="{ rowKey: 'ID' }"
              @load="load"
              @row-click="rowClickHandler"
            />
          </div>
        </el-col>
        <el-col :span="5">
          <div class="interfaceLog_content_progress">
            <el-timeline>
              <el-timeline-item
                v-for="(item, index) in progressList"
                :key="index"
              >
                <div class="list">
                  <div class="list_status"></div>
                  <div class="list_title">{{ item.logType }}</div>
                  <div class="list_code">{{ item.resultCode }}</div>
                  <div class="list_time">{{ item.logTime }}</div>
                  <!-- <div class="list_detial">{{ item.resultDetails }}</div> -->
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts">
import DataTable from '@/components/tableTemp/index.vue'
import { ElMessage } from 'element-plus'
import { Query } from '@/api/webApi'
import { CommonTableColumn } from '~/common';

type TableColumn = {
  label: string
  key: string
}
type progressItem = {
  logType: string
  resultCode: string
  logTime: string
  resultDetails?: string
}

const getSearchData = (text: string) => {
  console.log(text)
}
const clearSearchData = () => {}

let page = 0
const loading = ref(false)
const noMore = ref(false)
const loadDisabled = computed(() => loading.value || noMore.value)
//表头
const tableColumns = ref<CommonTableColumn[]>([])
//列表
const tableData = ref<any[]>([])
const resetTable = () => {
  page = 0
  loading.value = false
  noMore.value = false
  tableData.value = []
}
onMounted(() => {
  getToday()
  getTableData()
})
const getTableData = async () => {
  try {
    loading.value = true
    const {
      code,
      returnData: { columnSet, listValues },
    } = await Query({
      id: DATACONTENT_ID.sysLogTable,
      needPage: ++page,
      dataContent: [timeStart.value, timeEnd.value],
    })
    if (Number(code) === 0) {
      tableColumns.value = columnSet.map(column => ({
        label: column.columnLabel,
        key: column.columnName,
        ...column,
      }))
      if (listValues.length === 0) {
        page--
        noMore.value = true
      }
      tableData.value.push(...listValues)
      loading.value = false
    } else {
      throw new Error('获取数据失败')
    }
  } catch (error: any) {
    page--
    loading.value = false
    ElMessage.error(error.message)
  }
}
const load = () => {
  if (loadDisabled.value) {
    return
  }
  getTableData()
}

const timeStart = ref('')
const timeEnd = ref('')
const getToday = () => {
  function numberFormat(number) {
    const string = '0' + number
    return string.slice(-2)
  }
  const now = new Date()
  const year = now.getFullYear()
  const month = now.getMonth() + 1
  const date = now.getDate()
  const today = `${year}-${numberFormat(month)}-${numberFormat(date)}`
  timeStart.value = `${today} 00:00:00`
  timeEnd.value = `${today} 23:59:59`
}
const timeSelectHandler = () => {
  const startTime = new Date(timeStart.value).getTime()
  const endTime = new Date(timeEnd.value).getTime()
  if (startTime > endTime) {
    ElMessage.error('开始时间不能大于结束时间')
    timeEnd.value = ''
    return
  }
  if (startTime < endTime - (3 * 24 * 60 * 60 - 1) * 1000) {
    ElMessage.error('间隔时间不能大于三天')
    timeEnd.value = ''
    return
  }
  resetTable()
  getTableData()
}

const progressList = ref<progressItem[]>([])
// progressList.value.push(
//   ...Array.from({ length: 3 }).map(() => ({
//     logType: '更新 Github 模板',
//     resultCode: '989665554',
//     logTime: '2022-4-26 15:48:55',
//   }))
// )
const rowClickHandler = (row, column, event) => {
  progressList.value = []
  if (row.logObject) {
    tableData.value.forEach(record => {
      if (record.logObject == row.logObject) {
        progressList.value.push(record)
      }
    })
  } else {
    progressList.value.push(row)
  }
}
</script>
<style lang="scss" scoped>
.interfaceLog {
  padding: 8px 32px 12px 8px;
  .mr10 {
    margin-right: 10px;
  }
  :deep .interfaceLog_head_time {
    .el-input__prefix {
      left: 10px;
      color: #101116;
      top: 10px;
    }
    // .el-input--prefix .el-input__inner {
    //   padding-left: 50px;
    // }
  }
  .interfaceLog_head_btn {
    :deep .el-button {
      margin-right: 0;
    }
  }
  .interfaceLog_content {
    margin-top: 8px;
    :deep .table {
      color: #101116;
      thead {
        color: #101116;
      }
      .success {
        color: #33bf47;
      }
      .error {
        color: #df4545;
      }
    }
    &_progress {
      // width: 368px;
      background: #fafcff;
      margin-left: 8px;
      padding: 13px 32px;
      overflow: hidden;
      :deep .el-timeline {
        padding: 0;
        .el-timeline-item {
          position: relative;
          &::after {
            position: absolute;
            content: '';
            height: 1px;
            width: calc(100% + 4px);
            background-color: #dfe3ea;
            left: 28px;
            bottom: 20px;
          }
          &:last-child {
            &::after {
              height: 0;
            }
          }
        }
        .el-timeline-item__node--normal {
          z-index: 2;
          background-color: #fff;
          width: 10px;
          height: 10px;
          left: 0px;
          top: 2px;
        }
        .el-timeline-item__tail {
          border-left: 4px solid #dfe3ea;
          left: 3px;
        }
        .el-timeline-item:last-child .el-timeline-item__tail {
          height: 1000%;
          display: block;
        }
        .list {
          &_status {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #ac014d;
            left: -5px;
            border-radius: 50%;
            z-index: 1;
          }
          &_title,
          &_code {
            margin-bottom: 7px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #101116;
          }
          &_time {
            font-size: 12px;
            font-family: Helvetica;
            font-weight: 400;
            color: #afb4bf;
          }
        }
      }
    }
  }
}
.interfaceLog_content_progress {
  height: 100%;
}
// :deep.el-timeline .list_status {
//   background: #ac014d !important;
// }
</style>
