<template>
  <div class="app-container">
    <el-form ref="searchForm" :model="queryParams" inline :label-width="'100px'">
      <el-form-item :label="$t('ec.user.tenant')" prop="tenantId" v-if="enableTenant">
        <!--        <el-input v-model="queryParams.tenantId" type="text" placeholder="租户" />-->
        <ec-tenant v-model="queryParams.tenantId" clearable filterable :placeholder="$t('ec.user.tenant')" @change="getData" />
      </el-form-item>
      <el-form-item :label="$t('ec.user.insider')" prop="insider">
        <el-select v-model="queryParams.insider" :placeholder="$t('ec.log.viewAll')" clearable>
          <el-option :label="$t('ec.log.onlyView') + $t('ec.user.insider')" :value="true" />
          <el-option :label="$t('ec.log.notView') + $t('ec.user.insider')" :value="false" />
        </el-select>
      </el-form-item>
<!--      <el-form-item :label="$t('ec.errorLog.user')" prop="userId">-->
<!--        &lt;!&ndash;        <el-input v-model="queryParams.userId" type="text" placeholder="用户Id" />&ndash;&gt;-->
<!--        <ec-contact v-model="queryParams.userId" />-->
<!--      </el-form-item>-->
      <el-form-item :label="$t('ec.user.userName')" prop="username">
        <el-input v-model="queryParams.username" type="text" :placeholder="$t('ec.user.userName')" />
      </el-form-item>
      <el-form-item :label="$t('ec.log.respData')" prop="message">
        <el-input v-model="queryParams.message" type="text" :placeholder="$t('ec.log.respData')" />
      </el-form-item>
      <el-form-item :label="$t('ec.log.optTime')" prop="optTime">
        <ec-date-range v-model="queryParams" begin-key="beginOptTime" end-key="endOptTime" format="yyyy-MM-dd HH:mm:ss" date-type="datetimerange" />
      </el-form-item>
      <el-form-item label="IP" prop="ip">
        <el-input v-model="queryParams.ip" type="text" placeholder="IP" />
      </el-form-item>
      <el-form-item :label="$t('ec.log.location')" prop="location">
        <el-input v-model="queryParams.location" type="text" :placeholder="$t('ec.log.location')" />
      </el-form-item>
      <el-form-item :label="$t('ec.log.device')" prop="device">
        <el-input v-model="queryParams.device" type="text" :placeholder="$t('ec.log.device')" />
      </el-form-item>
      <el-form-item class="searchItem" :label-width="'50px'">
        <el-button type="primary" @click="getData">{{ $t('ec.table.query') }}</el-button>
        <el-button type="default" @click="handleReset">{{ $t('ec.table.reset') }}</el-button>
      </el-form-item>
    </el-form>

    <vxe-grid
      ref="vxe"
      highlight-hover-row
      border
      resizable
      sync-resize
      auto-resize
      align="center"
      header-align="center"
      max-height="1000"
      class="vxe-table-element"
      :loading="loading"
      :start-index="(page.currentPage - 1) * page.pageSize"
      :pager-config="page"
      :columns="columns"
      :data="tableData"
      :toolbar="tableToolbar"
      @page-change="handlePageChange"
    >
      <template v-slot:detail_content="{ row }">
        <el-form>
          <el-row>
            <el-col :span="8">
              <el-form-item label="ID">
                <span>{{ row.id }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('ec.log.userId')">
                <span>{{ row.userId }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('ec.user.userName')">
                <span>{{ row.username }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item :label="$t('ec.user.realName')">
                <span>{{ row.realName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="enableTenant">
              <el-form-item :label="$t('ec.user.tenant')">
                <span>{{ row.tenantName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('ec.log.optTime')">
                <span>{{ row.optTime }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="IP">
                <span>{{ row.ip }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('ec.log.location')">
                <span>{{ row.location }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('ec.log.device')">
                <span>{{ row.device }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item :label="$t('ec.log.msgCode')">
                <span>{{ row.msgCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('ec.log.respData')">
                <span>{{ message }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('ec.log.desc')">
                <span>{{ row.description }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item :label="$t('ec.log.recordType')">
                <span>{{ row.recordType }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('ec.log.recordId')">
                <span>{{ row.recordId }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('ec.log.optType')">
                <span>{{ row.optType }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item :label="$t('ec.log.optCost')">
                <span>{{ row.optCost }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('ec.log.module')">
                <span>{{ row.module }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>

      <template v-slot:toolbar_buttons>
        <el-button @click="handleReset">{{ $t('ec.table.refresh') }}</el-button>
        <el-button @click="showSearch = !showSearch">{{ $t('ec.table.search') }}</el-button>
        <el-button v-permission="['oprationLog:export']" @click="exportExcel">{{ $t('ec.table.export') }}</el-button>
      </template>
    </vxe-grid>
  </div>
</template>

<script>
import mixin from 'ecip-web/utils/common-mixin'
import { getData } from 'ecip-web/api/vue/log/oprationLogApi'
import { getToken } from '@/utils/auth'
import { download } from 'ecip-web/utils'
const enableTenant = window._CONFIG['enableTenant'] === undefined ? true : window._CONFIG['enableTenant']

export default {
  name: 'VueLogOprationLoginLogView',
  mixins: [...mixin],
  data() {
    return {
      enableTenant,
      loading: false,
      banState1: true, // 工具栏编辑按钮是否禁用，只有当且仅当选择一条记录的时候才可编辑
      banState2: true, //  工具栏删除按钮是否禁用，当选中条数为0的时候禁用
      exportUrl: `api/v1/log/oprationLog/exportExcel?token=${getToken()}`,
      tableToolbar: {
        id: 'vue.log.oprationLogView-toolbar',
        custom: true,
        slots: {
          buttons: 'toolbar_buttons'
        },
        zoom: true, // 最大化按钮
        // 列宽操作记录
        resizable: {
          storage: true
        },
        // 列操作记录
        setting: {
          storage: true
        }
      },
      page: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        align: 'left',
        pageSizes: [10, 20, 50, 100, 200, 500],
        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],
        perfect: true
      },
      selections: [],
      tableData: [],
      columns: [
        { type: 'expand', width: 60, align: 'center', slots: { content: 'detail_content' }},
        { title: 'ec.user.realName', field: 'realName', minWidth: 80, showOverflow: true },
        { title: 'ec.user.userName', field: 'username', minWidth: 80, showOverflow: true },
        { title: 'ec.user.tenant', field: 'tenantName', visible: enableTenant, minWidth: 200, showOverflow: true },
        { title: 'IP', field: 'ip', minWidth: 200, showOverflow: true },
        { title: 'ec.log.location', field: 'location', minWidth: 100, showOverflow: true },
        { title: 'ec.log.device', field: 'device', minWidth: 100, showOverflow: true },
        { title: 'ec.log.desc', field: 'description', minWidth: 200, showOverflow: true },
        { title: 'ec.log.loginTime', field: 'optTime', minWidth: 200, showOverflow: true }
      ],
      queryParams: {
        tenantId: '',
        insider: null,
        userId: '',
        username: '',
        message: '',
        beginOptTime: '',
        endOptTime: '',
        ip: '',
        location: '',
        device: ''
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      // 每次查询初始化checkbox selections
      this.loading = true
      this.queryParams.optType = '登录'
      getData(Object.assign({}, {
        size: this.page.pageSize,
        current: this.page.currentPage,
        insider: this.queryParams.insider
      }), this.queryParams).then(res => {
        const data = res.data
        this.tableData = data.records
        this.page.total = data.total
        this.loading = false
      })
    },
    handlePageChange({ currentPage, pageSize }) {
      this.page.currentPage = currentPage
      this.page.pageSize = pageSize
      this.getData()
    },
    async exportExcel() {
      // window.open(this.exportUrl)
      this.queryParams.optType = '登录'
      this.loading = true
      await download({ url: this.exportUrl, method: 'post', params: { insider: this.queryParams.insider }, data: this.queryParams })
      this.loading = false
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.getData()
    }
  }
}
</script>

<style scoped>

</style>
