<template>
  <div class="app-container">
    <div class="setting_title">操作日志</div>
    <el-divider></el-divider>

    <div class="mymain-container">
      <div class="btn-group clearfix">
        <div class="fl">
          
        </div>
        <div class="fr">
		  <el-input type="text" v-model="screenForm.companyWechatName" @change="getList()" size="small" style="width: 240px;margin-right: 20px;" placeholder="输入商户名称"></el-input>
          <el-select v-model="screenForm.moduleName" placeholder="全部" size="small" style="width: 140px;" @change="getListByScreen">
            <el-option label="选择模块" value=""></el-option>
            <el-option :label="item" :value="item" v-for="(item, index) in moduleList" :key="index"></el-option>
          </el-select>

          <el-date-picker
            v-model="screenForm.date"
            @change="getListByScreen"
            type="daterange"
            size="small"
            style="margin-left: 20px; width: 250px !important;"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
		  <el-button style="margin-left: 10px" size="small" @click="screenForm.companyWechatName = '';screenForm.moduleName = '';screenForm.date = '';getListByScreen()">清空</el-button>
		  <el-button size="small" type="primary" @click="getListByScreen">搜索</el-button>
        </div>
      </div>

      <div class="table">
        <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="所在模块">
                  <span>{{ scope.row.moduleName }}</span>
                </el-form-item>
                <el-form-item label="操作类型">
                  <span>{{ scope.row.shop }}</span>
                </el-form-item>
                <el-form-item label="IP">
                  <span>{{ scope.row.ip }}</span>
                </el-form-item>
                <el-form-item label="用户">
                  <span>{{ scope.row.nickName +'('+scope.row.userName+')' }}</span>
                </el-form-item>
                <el-form-item label="记录时间">
                  <span>{{ scope.row.createTime }}</span>
                </el-form-item>
                <el-form-item label="操作">
                  <span>{{ scope.row.content }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
		  <el-table-column align="center" label="商户" prop="companyName" min-width="140"></el-table-column>
          <el-table-column align="center" label="所在模块" prop="moduleName" min-width="140"></el-table-column>
          <el-table-column align="center" label="记录时间" prop="createTime" min-width="160"></el-table-column>
          <el-table-column align="center" label="用户" prop="nickName" min-width="140">
            <template slot-scope="scope">
              {{ scope.row.nickName +'('+scope.row.userName+')' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="IP" prop="ip" min-width="160"></el-table-column>
        </el-table>
      </div>
      
      <div class="pagination clearfix">
        <div class="fr">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal">
          </el-pagination>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { getOplogList, getModuleList } from '@/api/setting'

export default {
  data() {
    return {
      dataList: null, // 列表数据
      moduleList: null, // 模块列表
      listLoading: true, // 列表加载loading
      screenForm: { // 筛选表单数据
				companyWechatName: '', // 商户名称
        moduleName: '', // 模块名称
        date: '', // 日期
      },
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
    }
  },
  created() {
    this.getList();
    this.getModuleList();
  },
  methods: {
    getList() {
      this.listLoading = true;

      let params = {
		companyWechatName: this.screenForm.companyWechatName,
        moduleName: this.screenForm.moduleName,
        startTime: this.screenForm.date ? this.screenForm.date[0] : '',
        endTime: this.screenForm.date ? this.screenForm.date[1] : '',
        pageNo: this.currentPage,
        pageSize: this.pageSize
      };

      getOplogList(params).then(res => {
        this.dataList = res.data.records;
        this.listTotal = res.data.total;
        this.listLoading = false;
      })
    },

    getModuleList() {
      getModuleList().then(res => {
        this.moduleList = res.data;
      })
    },

    // 筛选后重新获取列表
    getListByScreen() {
      this.currentPage = 1;
      this.getList();
    },

    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getList();
    },

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },

  }
}
</script>

<style scoped lang="scss">

</style>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 80px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
</style>