<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div class="filter-container">
      <el-date-picker
        v-model="searchParams.time"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm"
        format="yyyy-MM-dd HH:mm"
      />
      <el-select
        v-model="searchParams.type"
      >
        <el-option label="全部" value="" />
        <el-option label="添加代理" value="1" />
        <el-option label="变更级别" value="2" />
        <el-option label="变更推荐人" value="3" />
        <el-option label="删除代理" value="4" />
        <el-option label="审核代理" value="5" />
        <el-option label="变更手机号" value="6" />
        <el-option label="站区变更" value="7" />
        <el-option label="审核" value="8" />
        <el-option label="禁用" value="10" />
      </el-select>
      <el-select
        v-model="searchParams.role"
      >
        <el-option label="全部" value="" />
        <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-button
        type="primary"
        @click="getLogList"
      >
        查询
      </el-button>
    </div>
    <el-table
      :data="tableList"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
    >
      <el-table-column
        prop="admin_name"
        label="操作人"
      />
      <el-table-column
        prop="user"
        label="被更改代理"
      >
        <span slot-scope="{ row:{ user } }">{{ user && user.nickname }}</span>
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="操作时间"
      />
      <el-table-column
        prop="type"
        label="操作类型"
      >
        <span slot-scope="{ row: { type } }">{{ showType(type) }}</span>
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
      />
    </el-table>
    <!-- 分页 -->
    <pagination :total="tableTotal" :limit="searchParams.page_size" :page="searchParams.page_index" @pagination="changePagination" @update:limit="changePagination" />
  </div>
</template>

<script>
// api
import { getLogList } from '@/api/log'
// roleList
import { getRolesList } from '@/api/roles'
export default {
  data() {
    return {
      searchParams: {
        time: [],
        page_size: 10,
        page_index: 1,
        type: '',
        role: ''
      },
      tableList: [],
      tableTotal: 0,
      loadingFull: false,
      roleList: []
    }
  },
  created() {
    this.getRolesList()
    this.getLogList()
  },
  methods: {
    // 获取日志
    async getLogList() {
      this.loadingFull = true
      const { page_index, page_size, type, role, time } = this.searchParams
      await getLogList({
        page_index, page_size, type, role,
        start_time: (time && time.length > 0) ? time[0] : '',
        end_time: (time && time.length > 0) ? time[1] : ''
      }).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.tableList = res.data.list
          this.tableTotal = res.data.total
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    async getRolesList() {
      this.loadingFull = true
      await getRolesList().then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.roleList = res.data
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.searchParams.page_size = limit
      this.searchParams.page_index = page
      this.getLogList()
    },
    showType(type) {
      let out
      switch (type) {
        case 1:
          out = '添加代理'
          break
        case 2:
          out = '变更级别'
          break
        case 3:
          out = '变更推荐人'
          break
        case 4:
          out = '删除代理'
          break
        case 5:
          out = '审核代理'
          break
        case 6:
          out = '变更手机号'
          break
        case 7:
          out = '站区变更'
          break
        case 8:
          out = '审核'
          break
        case 10:
          out = '禁用'
          break
        default:
          out = '其他操作'
      }
      return out
    }
  }
}
</script>
