<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <schema-table
      ref="table"
      :schema="schema"
      @row-click="onClick"
    >
      <template #header="{ condition }">
        <div class="l-flex__auto c-option-grid">
          <el-date-picker
            v-model="beginTime"
            class="c-option-grid__item"
            type="datetime"
            placeholder="开始时间"
            default-time="00:00:00"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm:ss"
            :editable="false"
            @focus="onDateTimeFocus('beginTime')"
            @change="onDateTimeChange('beginTime')"
          />
          <el-date-picker
            v-model="endTime"
            class="c-option-grid__item"
            type="datetime"
            placeholder="结束时间"
            default-time="23:59:59"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm:ss"
            :editable="false"
            @focus="onDateTimeFocus('endTime')"
            @change="onDateTimeChange('endTime')"
          />
          <search-input
            v-model.trim="condition.userName"
            placeholder="操作者"
            @search="onChange"
          />
          <schema-select
            v-model="condition.business"
            :schema="businessSelectSchema"
            @change="onChange"
          />
          <search-input
            v-model.trim="condition.description"
            placeholder="操作描述"
            @search="onChange"
          />
          <schema-select
            v-model="condition.status"
            :schema="statusSelectSchema"
            @change="onChange"
          />
          <div>
            <button
              class="c-sibling-item o-button"
              @click="onChange"
            >
              搜索
            </button>
            <button
              class="c-sibling-item o-button"
              @click="onReset"
            >
              重置
            </button>
          </div>
        </div>
      </template>
    </schema-table>
    <el-dialog
      title="操作日志详情"
      :visible.sync="showDetail"
      custom-class="c-dialog"
    >
      <div class="c-detail-grid">
        <div class="box title">操作者</div>
        <div class="box value">{{ log.userName }}</div>
        <div class="box title">操作时间</div>
        <div class="box value">{{ log.operTime }}</div>
        <div class="box title">操作模块</div>
        <div class="box value">{{ log.business }}</div>
        <div class="box title">执行状态</div>
        <div class="box value">{{ log.status }}</div>
        <div class="box title">请求IP</div>
        <div class="box value">{{ log.ip }}</div>
        <div class="box title">耗时</div>
        <div class="box value">{{ log.costTime }}ms</div>
        <div class="box title">操作描述</div>
        <div class="box value fill">{{ log.description }}</div>
        <div class="box title">调用方法</div>
        <div class="box value fill">{{ log.method }}</div>
        <div class="box title">参数</div>
        <div class="box value fill">{{ log.params }}</div>
        <div class="box title">http请求方式</div>
        <div class="box value fill">{{ log.requestMethod }}</div>
        <div class="box title">错误原因</div>
        <div class="box value fill">{{ log.errorMsg }}</div>
      </div>
    </el-dialog>
  </wrapper>
</template>

<script>
import {
  getLogs,
  getLog,
  getBusiness
} from '@/api/platform'

export default {
  name: 'Logger',
  data () {
    return {
      showDetail: false,
      log: {},
      businessSelectSchema: {
        placeholder: '全部业务',
        remote: getBusiness,
        value: 'business',
        label: 'name'
      },
      statusSelectSchema: {
        placeholder: '全部状态',
        options: [
          { value: 0, label: '失败' },
          { value: 1, label: '成功' }
        ]
      },
      beginTime: '',
      endTime: '',
      schema: {
        condition: {
          beginTime: '',
          endTime: '',
          userName: '',
          business: void 0,
          description: '',
          status: void 0
        },
        list: getLogs,
        cols: [
          { prop: 'userName', label: '操作中' },
          { prop: 'business', label: '业务模块' },
          { prop: 'description', label: '操作描述' },
          { label: '执行状态', type: 'tag', render ({ status }) {
            return {
              type: ['danger', 'success'][status],
              label: ['失败', '成功'][status]
            }
          } },
          { prop: 'operTime', label: '操作时间' }
        ]
      }
    }
  },
  methods: {
    onChange () {
      this.$refs.table.pageTo(1)
    },
    onReset () {
      this.beginTime = ''
      this.endTime = ''
      this.$refs.table.mergeCondition({
        beginTime: '',
        endTime: '',
        userName: '',
        business: void 0,
        description: '',
        status: void 0
      })
    },
    onClick ({ id }) {
      getLog(id).then(({ data }) => {
        data.status = data.status ? '成功' : '失败'
        data.requestMethod = ['GET', 'POST', 'PUT', 'DELETE'][data.requestMethod]
        this.log = data
        this.showDetail = true
      })
    },
    checkDateTime (type) {
      const beginTime = this.beginTime
      const endTime = this.endTime
      if (beginTime && endTime && new Date(endTime) < new Date(beginTime)) {
        this.$message({
          type: 'warning',
          message: type === 'beginTime' ? '开始时间不能大于结束时间' : '结束时间不能小于开始时间'
        })
        return false
      }
      return true
    },
    onDateTimeFocus (type) {
      this[`$${type}`] = this[type]
      if (type === 'endTime' && !this.endTime && this.beginTime) {
        this.$nextTick(() => {
          this.endTime = `${this.beginTime.split(' ')[0]} 23:59:59`
        })
      }
    },
    onDateTimeChange (type) {
      const time = this[type]
      if (time) {
        if (!this.checkDateTime(type)) {
          this[type] = this[`$${type}`]
          return
        }
      } else {
        this[type] = ''
      }
      this.$refs.table.mergeCondition({ [type]: this[type] })
    }
  }
}
</script>

<style lang="scss" scoped>
.c-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-gap: 10px;
  align-items: flex-start;

  &__item {
    width: 200px;
  }
}

.c-detail-grid {
  display: grid;
  grid-template-columns: 120px 1fr 120px 1fr;
  color: $black;
  font-size: 14px;
  border-right: 1px solid $gray;
  border-bottom: 1px solid $gray;

  .box {
    padding: 8px 10px;
    border-top: 1px solid $gray;
    border-left: 1px solid $gray;
  }

  .fill {
    grid-column-start: span 3;
  }

  .title {
    display: inline-flex;
    align-items: center;
    text-align: left;
  }

  .value {
    text-align: center;
  }
}
</style>
