<template>
  <div class="fullheight">
    <ht-table
      @load="loadData"
      :data="data"
      :page-sizes="[10, 20, 50, 100, 200, 300]"
      :pageResult="pageResult"
      quick-search-props="id,opeName,executor,ip,reqUrl"
      :default-sorter="[{direction: 'DESC', property: 'executionTime'}]"
      ref="htTable"
      :show-export="false"
      @row-click="rowClick"
      @selection-change="handleSelectionChange"
    >
      <template v-slot:toolbar>
        <el-button-group>
          <ht-delete-button
            :url="deleteUrl"
            :htTable="$refs.htTable"
            @after-delete="afterDelete"
            :disabled="isDisabled"
            >删除</ht-delete-button
          >
        </el-button-group>
      </template>

      <template>
        <ht-table-column type="index" width="70" align="center" label="序号" />
        <ht-table-column
          prop="id"
          width="180"
          align="center"
          label="日志编号"
          show-overflow-tooltip
        />
        <ht-table-column
          prop="opeName"
          label="操作名称"
          :sortable="true"
          show-overflow-tooltip
        >
          <template v-slot="{row}">
            <el-link
              type="primary"
              @click="handleLogShow(row.id)"
              title="查看"
              >{{ row.opeName }}</el-link
            >
          </template>
        </ht-table-column>
        <ht-table-column
          prop="executionTime"
          label="操作时间"
          :sortable="true"
          width="180"
        />
        <ht-table-column
          prop="executor"
          label="操作人"
          width="160"
          show-overflow-tooltip
        />
        <ht-table-column
          prop="ip"
          label="客户端IP"
          width="120"
          show-overflow-tooltip
        />
        <ht-table-column
          prop="reqUrl"
          label="请求地址"
          width="300"
          show-overflow-tooltip
        />
        <ht-table-column
          prop="elapsedTime"
          label="接口耗时（秒）"
          width="120"
          show-overflow-tooltip
        >
          <template v-slot="{row}">
            <label v-if="row.elapsedTime || row.elapsedTime=='0'">
              {{row.elapsedTime}}s
            </label>
            <label v-else>-</label>
          </template>
        </ht-table-column>
        <ht-table-column
          prop="logType"
          label="日志类型"
          width="100"
          :render-header="renderHeaderMethod"
          :filters="typeArray"
        >
          <template v-slot="{row}">
            <el-tag
              v-show="row.logType == s.value"
              type="info"
              v-for="s in typeArray"
              :key="s.value"
              >{{ s.text }}</el-tag
            >
          </template>
        </ht-table-column>
        <ht-table-column
          prop="moduleType"
          label="模块类型"
          width="150"
          :render-header="renderHeaderMethod"
          :filters="logModelArray"
        >
          <template v-slot="{row}">
            <el-tag type="info">{{ logModelArray.filter((l)=> l.value ==row.moduleType).length > 0 ? logModelArray.filter((l)=> l.value ==row.moduleType)[0].text : row.moduleType}}</el-tag>
          </template>
        </ht-table-column>
      </template>
    </ht-table>
    <ht-sidebar-dialog
      width="38%"
      :close-on-click-modal="false"
      :visible="logDialogVisible"
      :before-close="handleLogClose"
      :append-to-body="true"
      title="日志详情"
      class="log"
    >
      <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="操作人">
          {{ log.executor }}
        </el-form-item>
        <el-form-item label="请求地址">
          {{ log.reqUrl }}
        </el-form-item>
        <el-form-item label="内容">
          <textarea
            :disabled="true"
            cols="73"
            rows="41"
            style="font-size: 14px"
            >{{ log.opeContent }}</textarea
          >
        </el-form-item>
      </el-form>
    </ht-sidebar-dialog>
  </div>
</template>
<script>
  import req from '@/request.js'
  import tableHeaderFilter from '@/mixins/tableHeaderFilter.js'
  export default {
    components: {},
    mixins: [tableHeaderFilter],
    data() {
      return {
        isDisabled:true,
        selectedList: [],
        log: {
          opeName: '日志暂未消费请稍后查看',
          opeContent: '日志暂未消费请稍后查看',
        },
        logDialogVisible: false,
        defaultProps: {
          children: 'children',
          label: 'name',
        },
        data: [],
        pageResult: {
          page: 1,
          pageSize: 50,
          total: 0,
        },
        curRow: {},
        dialogVisible: false,
        typeArray: [],
        logModelArray: [],
        logModelMap:{}
      }
    },
    watch: {
      selectedList:{
        handler(val){
          this.isDisabled = val.length < 1 ? true : false
        },
        deep:true
      }
    },
    computed: {
      deleteUrl: function () {
        return window.context.portal + '/sys/sysLogs/v1/removes'
      },
    },
    created(){
      this.getLogSetting()
    },
    methods: {
      getLogSetting(){
       const param = {pageBean:{page:1,pageSize:'-1'}}
       req.post(window.context.portal + "/sys/sysLogsSettings/v1/list", param)
        .then(data => {
          if (data.data && data.data.rows) {
            data.data.rows.forEach(r => {
              this.logModelArray.push({text:r.moduleName,value:r.moduleType})
            });
          }
        })

      req.get(window.context.portal + "/sys/sysLogs/v1/getLogTypes")
        .then(data => {
          if (data.data && data.data.value) {
            data.data.value.forEach(r => {
              this.typeArray.push({text:r,value:r})
            });
          }
        })

      },
      handleSelectionChange(selection) {
        this.selectedList = selection
      },
      rowClick(row, column, event) {
        this.$refs.htTable.$refs.htTable.toggleRowSelection(row)
      },
      handleLogClose() {
        this.logDialogVisible = false
      },
      handleLogShow(id) {
        this.logDialogVisible = true
        this.$http
          .get(window.context.portal + '/sys/sysLogs/v1/get/' + id)
          .then((res) => {
            this.log = res.data
          })
      },
      handleClose() {
        this.dialogVisible = false
      },
      openDetail(row) {
        this.curRow = row
        this.dialogVisible = true
      },
      loadData(param, cb) {
        req
          .post(window.context.portal + '/sys/sysLogs/v1/list', param)
          .then((data) => {
            let response = data.data
            this.data = response.rows
            this.pageResult = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total,
            }
          })
          .finally(() => cb())
      },
      afterDelete() {
        this.$refs.htTable.load()
      },
      reinvoke(id) {
        let this_ = this
        req
          .post(window.context.portal + '/portal/messageLog/v1/reinvoke/' + id)
          .then(function (response) {
            let data = response.data
            if (data.state) {
              this_.$message.success(data.message)
              this_.$refs.htTable.load()
            } else {
              this_.$message.fail(data.message)
            }
          })
      },
      signSuccess(id) {
        let this_ = this
        req
          .post(window.context.portal + '/portal/messageLog/v1/signSuccess/' + id)
          .then(function (response) {
            let data = response.data
            if (data.state) {
              this_.$message.success(data.message)
              this_.$refs.htTable.load()
            } else {
              this_.$message.fail(data.message)
            }
          })
      },
    },
  }
</script>

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

  ::v-deep{
    .cell>.el-table__column-filter-trigger{
      display: none;
    }
  }

  .aside-width {
    width: $--aside-width !important;
  }
</style>