<template>
  <div class="fullheight">
    <ht-table
      @load="loadData"
      :data="data"
      :pageResult="pageResult"
      :quick-search-props="seacrh"
      :default-sorter="[{direction: 'DESC', property: 'create_Time_'}]"
      ref="htTable"
      :show-export="false"
      :show-custom-column="false"
      @row-click="rowClick"
    >
      <template v-slot:toolbar> </template>

      <template>
        <ht-table-column type="index" width="50" align="center" label="序号" />
        <ht-table-column
          prop="id"
          width="180"
          align="center"
          label="日志编号"
          :show-overflow-tooltip="true"
        />
        <ht-table-column
          prop="operator"
          align="center"
          label="操作人员"
          width="160"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="logType"
          label="日志类别"
          width="150"
          :show-overflow-tooltip="true"
        >
          <template v-slot="{row}">
            <el-link type="primary" @click="handleLogShow(row)" title="查看">
             <span>{{row.logType}}</span>
            </el-link>
          </template>
        </ht-table-column>
        <ht-table-column prop="createTime" label="操作时间" width="160" :show-overflow-tooltip="true">
          <template v-slot="{row}">
            {{row.createTime == '' ? '-' : row.createTime}}
          </template>
        </ht-table-column>
        <!-- <ht-table-column
          prop="action"
          label="内容"
          :show-overflow-tooltip="true"
        /> -->
        <ht-table-column prop="ip" label="客户端IP" width="150" :show-overflow-tooltip="true"/>
        <ht-table-column
          prop="reqUrl"
          label="请求地址"
          :show-overflow-tooltip="true"
        />
      </template>
    </ht-table>
    <ht-sidebar-dialog
      width="30%"
      :close-on-click-modal="false"
      :visible="logDialogVisible"
      :before-close="handleLogClose"
      :append-to-body="true"
      title="日志详情"
    >
      <el-button
        style="float: right;z-index: 15000;position: relative;"
        @click="logDialogVisible = false"
        type="danger"
        icon="el-icon-refresh-left"
        >返回</el-button
      >
      <el-form>
        <el-form-item label="操作人：">
         {{this.actionData.operator}}
        </el-form-item>
        <el-form-item label="请求地址：">
         {{this.actionData.reqUrl}}
        </el-form-item>
        <el-form-item label="内容：">
          <textarea
            :disabled="true"
            cols="55"
            rows="30"
            style="font-size:14px"
            >
           {{this.actionData.action}}
            </textarea
          >
        </el-form-item>
      </el-form>
    </ht-sidebar-dialog>
  </div>
</template>
<script>
import uc from '@/api/uc.js'
import moment from 'moment' //日期格式化插件
export default {
  components: {},
  data() {
    return {
      seacrh: [{label: '登陆人', prop: 'user'}],
      logDialogVisible: false,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0,
        query: {
          pageNum: 0,
          pageSize: 20
        }
      },
      actionData: {}
    }
  },
  computed: {},
  methods: {
    //   格式化时间
    formatTime(time) {
      return moment(time).format('YYYY-MM-DD HH:mm:ss')
    },
    rowClick(row, column, event) {
      this.$refs.htTable.$refs.htTable.toggleRowSelection(row)
    },
    handleLogClose() {
      this.logDialogVisible = false
    },
    loadData(param, cb) {
      console.log(param)
      let data = {}
      let headers = {}
      if (param.query) {
        data.user = param.query[0].value
        data = this.qs.stringify(data)
      } else {
        data = param
      }
      uc.BusinessException(data, headers)
        .then(response => {
          console.log(response, 'response')
          this.data = response.records
          this.pageResult = {
            page: response.page,
            pageSize: response.size,
            total: response.total
          }
        })
        .finally(() => cb())
    },
    handleLogShow(data) {
        this.logDialogVisible = true
        this.actionData = data;
    },
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

.aside-width {
  width: $--aside-width !important;
}
/* 设置滚动条的样式 */
/deep/ ::-webkit-scrollbar {
  width: 8px;
  background-color: #fff;
}

/* 滚动槽 */
/deep/ ::-webkit-scrollbar-track {
  border-radius: 8px;
}

/* 滚动条滑块 */
/deep/ ::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #eee;
}
</style>
