<template>
  <div class="main-page log">
    <div class="main-page-header">
      <p class="title">日志管理</p>
      <el-form
        :inline="true"
        :model="searchForm"
        ref="searchForm"
        size="small"
      >
        <el-form-item
          prop="operateType"
          label="操作类型"
        >
          <el-select
            v-model="searchForm.operateType"
            placeholder="请选择操作类型"
            style="width: 100%"
            :clearable="true"
          >
            <el-option
              v-for="item in logTypeList"
              :label="item.name"
              :key="item.id"
              :value="item.val"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="model"
          label="模块"
        >
          <el-select
            v-model="searchForm.model"
            placeholder="请选择模块"
            style="width: 100%"
            :clearable="true"
          >
            <el-option
              v-for="item in modelTypeList"
              :label="item.name"
              :key="item.id"
              :value="item.val"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="time"
          label="时间"
        >
          <el-date-picker
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            v-model="searchForm.time"
            style="width: 100%;"
            prefix-icon="el-icon-date"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <div class="btns">
          <el-button
            type="primary"
            size="small"
            @click="search"
          >查询</el-button>
          <el-button
            size="small"
            @click="resetForm('searchForm')"
          >重置</el-button>
        </div>
      </el-form>
    </div>
    <div class="main-page-body">
      <div class="mainContent">
        <table-mixin
          :pageSize="pageSize"
          :pageNum="pageNum"
          :total="total"
          :pagination="pagination"
          :handleSizeChange="handleSizeChange"
          :handleCurrentChange="handleCurrentChange"
        >
          <el-table
            v-loading="tableData.loading"
            :data="tableData.body"
            @sort-change="handleSortChange"
          >
            <div
              slot="empty"
              class="noData"
            ></div>
            <el-table-column
              label="序号"
              type="index"
              min-width="50"
            >
            </el-table-column>
            <el-table-column
              v-for="(item,index) in tableData.head"
              :prop="item.key"
              :label="item.name"
              align="left"
              :formatter="item.formatter"
              :sortable="item.sortable"
              :fixed="item.fixed"
              :key="index"
              :min-width="item.width"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
          </el-table>
        </table-mixin>
      </div>
    </div>
  </div>
</template>
<script>
import { tableDataMixin } from '../../common/js/mixin'
import { logList } from '@/api/log'
import { getDic } from '../../util/dict'
export default {
  name: 'LogPage',
  mixins: [tableDataMixin],
  data() {
    return {
      searchForm: {
        operateType: '',
        time: []
      },
      logTypeList: [],
      modelTypeList: [],
      tableData: {
        loading: false,
        head: [
          {
            name: '操作时间',
            key: 'createTime',
            sortable: false,
            width: '150',
            fixed: false
          },
          {
            name: '操作人',
            key: 'createUserName',
            sortable: false,
            width: '100',
            fixed: false
          },
          {
            name: '描述',
            key: 'description',
            sortable: false,
            width: '200',
            fixed: false,
          },
          {
            name: '提交参数',
            key: 'operateParam',
            sortable: false,
            width: '500',
            fixed: false
          },
          {
            name: '模块',
            key: 'model',
            sortable: false,
            width: '100',
            fixed: false,
            formatter: this.modelTypeFormatter
          },
          {
            name: '操作类型',
            key: 'operateType',
            sortable: false,
            width: '100',
            fixed: false,
            formatter: this.logTypeFormatter
          }
        ],
        body: [],
        option: [],
        condition: []
      }
    }
  },
  mounted() {
    // 获取字典
    getDic(['log_type', 'model_type']).then(res => {
      this.logTypeList = res.log_type || []
      this.modelTypeList = res.model_type || []
    })
    this.search()
  },
  methods: {
    getTableData() {
      this.tableData.loading = true
      const params = {
        operateType: this.searchForm.operateType,
        model: this.searchForm.model,
        pageNo: this.pageNum,
        pageSize: this.pageSize
      }
      if (this.searchForm.time && this.searchForm.time.length === 2) {
        params.createTime = this.searchForm.time[0] + "_" + this.searchForm.time[1]
      }
      logList(params).then((res) => {
        if (res.msg == 201) {
          this.dealTableResponse(res)
        } else {
          this.$message.error(res.content)
        }
      })
    },
    modelTypeFormatter(row, column, cellValue, index) {
      const item = this.modelTypeList.find(i => i.val === cellValue)
      return item ? item.name : cellValue
    },
    logTypeFormatter(row, column, cellValue, index) {
      const logType = this.logTypeList.find(i => i.val === cellValue)
      return logType ? logType.name : cellValue
    },
  }
}
</script>
<style lang="scss" scoped>
.mainContent {
  padding: 20px;
}
</style>
<style>
.el-tooltip__popper {
  max-width: 500px;
}
</style>
