<template>
  <SearchTable
    class="page-search-system-log"
    title="日志查询"
    ref="searchTableRef"
    v-model="formData"
    @submit="handleSubmit"
    @reset="handleReset"
  >
    <template #slot-form>
      <el-col :span="isTablet ? 12 : 6">
        <el-form-item label="组织" label-width="80px" prop="orgId">
          <Organ v-model="formData.orgId" :type="0" />
        </el-form-item>
      </el-col>
      <el-col :span="isTablet ? 12 : 6">
        <el-form-item label="用户名" prop="account" label-width="80px">
          <el-input v-model="formData.account" placeholder="请输入用户名" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="isTablet ? 12 : 6" :style="{ marginTop: isTablet ? '16px' : '0px' }">
        <el-form-item label="手机号" prop="phone" label-width="80px">
          <el-input v-model="formData.phone" maxlength="11" placeholder="请输入手机号" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="isTablet ? 12 : 6" :style="{ marginTop: isTablet ? '16px' : '0px' }">
        <el-form-item label="日志类型" prop="logCategory" label-width="80px">
          <el-select v-model="formData.logCategory" placeholder="请选择日志类型" clearable @change="formData.logOpt = ''">
            <el-option v-for="(logType, index) in logCategorys" :label="logType.logCategory" :value="logType.logCategory" :key="index" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="isTablet ? 12 : 6" style="margin-top: 16px;">
        <el-form-item label="操作类型" prop="vin" label-width="80px">
          <el-select v-model="formData.logOpt" placeholder="请选择操作类型" clearable>
            <el-option v-for="(type, index) in logOpts" :label="type" :value="type" :key="index" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="isTablet ? 24 : 6" style="margin-top: 16px;">
        <el-form-item label="时间" prop="createTime" label-width="80px">
          <el-date-picker
            v-model="formData.createTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
          />
        </el-form-item>
      </el-col>
    </template>
    <template #slot-table>
      <el-table-column label="用户名" prop="account" min-width="200" />
      <el-table-column label="手机号码" prop="phone" min-width="200" />
      <el-table-column label="日志类型" prop="logCategory" min-width="200" />
      <el-table-column label="操作类型" prop="logOpt" min-width="200" />
      <el-table-column label="操作内容" prop="logContent" min-width="200" />
      <el-table-column label="IP地址" prop="ip" min-width="200" />
      <el-table-column label="操作时间" prop="createTime" min-width="200" />
    </template>
  </SearchTable>
</template>

<script>
import dayjs from 'dayjs'
import Organ from '@/components/Organ'
import SearchTable from '@/components/SearchTable'
import { mapGetters } from 'vuex'
import { fetchLogCategory, fetchLogList } from '@/api/search'

export default {
  name: 'SystemLog',
  components: { Organ, SearchTable },
  data() {
    // 组织id
    const { organId } = this.$store.getters
    return {
      isTablet: window.OS.isTablet,
      formData: {
        orgId: organId,
        account: '',
        phone: '',
        logCategory: '',
        logOpt: '',
        createTime: []
      },
      logCategorys: [],
      dict: {}
    }
  },
  computed: {
    ...mapGetters(['dict']),
    /**
     * 操作类型
     */
    logOpts() {
      // 日志类型
      const { logCategory } = this.formData
      // 如果选择了日志类型
      if (logCategory) {
        return this.logCategorys.find(category => category.logCategory === logCategory).logOptList
      }
      return []
    }
  },
  async mounted() {
    // 查询日志类型
    const { logDetailList } = await fetchLogCategory() || {}
    // 记录当前日志类型
    this.logCategorys = logDetailList
  },
  methods: {
    /**
     * 点击重置方法
     */
    handleReset() {
      // 组织id
      const { organId } = this.$store.getters
      // 设置组织id
      this.formData.orgId = organId
      // 开始触发提交方法
      this.$refs.searchTableRef.handleSubmit()
    },

    /**
     * 触发提交方法
     * @param formData 当前表单填写的内容
     * @param callback 回调函数
     */
    async handleSubmit(formData, callback) {
      // 如果当前选择了时间
      if (formData.createTime && formData.createTime.length === 2) {
        formData.createTimeStart = dayjs(formData.createTime[0]).startOf('day').valueOf()
        formData.createTimeEnd = dayjs(formData.createTime[1]).endOf('day').valueOf()
        delete formData.createTime
      }
      // 开始请求接口
      const { list, totalCount } = await fetchLogList(formData)
      // 开始渲染页面
      callback({ list, totalCount })
    }
  }
}
</script>

<style lang="scss">
.page-search-system-log {
  .component-search-table-btn-wrap {
    margin-top: 16px;
  }
}
</style>
