<template>
  <div class="operation_log_container body_container">
    <a-row>
      <a-col :span="20">
        <a-input-search
          allowClear
          class="middle"
          v-model="pager.queryParams.F_title_like"
          :placeholder="$t('请输入模块标题')"
          @search="querySearch"
        />

        <a-input-search
          allowClear
          class="middle"
          v-model="pager.queryParams.F_operName_like"
          :placeholder="$t('请输入操作人员')"
          @search="querySearch"
        />

        <a-range-picker
          style="width: 360px"
          :locale="locale"
          :default-value="[moment().startOf('day'), moment().endOf('day')]"
          :disabled-date="disabledDate"
          :placeholder="[$t('请选择'), $t('请选择')]"
          :show-time="{ format: 'HH:mm:ss' }"
          format="YYYY-MM-DD HH:mm:ss"
          :separator="$t('至')"
          :allowClear="false"
          @change="onTimeChange"
        >
          <a-icon
            slot="suffixIcon"
            type="dashboard"
          />
        </a-range-picker>
      </a-col>
      <a-col
        :span="4"
        align="right"
      >
        <a-button
          type="primary"
          icon="search"
          @click="querySearch"
          >{{ $t('查询') }}</a-button
        >
      </a-col>
    </a-row>
    <a-spin :spinning="loading">
      <div class="table_list">
        <vxe-table
          show-overflow
          show-header-overflow
          border
          resizable
          :row-config="{ isHover: true }"
          :data="lists"
          height="auto"
        >
          <vxe-column
            type="seq"
            :title="$t('序号')"
            width="60"
            align="center"
          ></vxe-column>
          <vxe-column
            field="title"
            :title="$t('系统模块')"
          ></vxe-column>
          <vxe-column
            field="operName"
            :title="$t('操作人员')"
          ></vxe-column>
          <vxe-column
            field="businessType"
            :title="$t('操作类型')"
          >
            <template #default="{ row }">
              <a-tag :class="'tag_' + row.businessType">{{ row.businessName }}</a-tag>
            </template>
          </vxe-column>
          <vxe-column
            field="requestMethod"
            :title="$t('请求方式')"
          ></vxe-column>
          <vxe-column
            field="operIp"
            :title="$t('操作地址')"
          ></vxe-column>
          <vxe-column
            field="operLocation"
            :title="$t('操作地点')"
          ></vxe-column>
          <vxe-column
            field="status"
            :title="$t('操作状态')"
          >
            <template #default="{ row }">
              <a-tag
                class="tag_or"
                v-if="row.status == '0'"
                >{{ $t('正常') }}</a-tag
              >
              <a-tag
                class="tag_entry"
                v-else
                >{{ $t('异常') }}</a-tag
              >
            </template>
          </vxe-column>
          <vxe-column
            field="createTime"
            :title="$t('操作时间')"
            width="160"
          ></vxe-column>
          <vxe-column
            :title="$t('操作')"
            align="center"
            width="160"
          >
            <template #default="{ row }">
              <a-button
                class="btn"
                type="link"
                @click="clickDetail(row)"
                >{{ $t('详情') }}</a-button
              >
              <a-popconfirm
                :title="$t('确定要删除吗')"
                :ok-text="$t('是')"
                :cancel-text="$t('否')"
                placement="left"
                @confirm="deleteLog(row)"
              >
                <a-button
                  class="btn a_danger"
                  type="link"
                  >{{ $t('删除') }}</a-button
                >
              </a-popconfirm>
            </template>
          </vxe-column>
          <template #empty>
            <a-empty
              :image-style="{
                height: '80px',
              }"
            >
              <span slot="description">{{ $t('暂无数据') }}</span>
            </a-empty>
          </template>
        </vxe-table>
      </div>
      <vxe-pager
        background
        :current-page.sync="pager.pageNum"
        :page-size.sync="pager.pageSize"
        :total="total"
        @page-change="getFlowList"
        :layouts="['Total', 'PrevJump', 'JumpNumber', 'NextJump', 'FullJump']"
      >
      </vxe-pager>
    </a-spin>
    <detail
      :show.sync="detailInfo.show"
      :info="detailInfo.info"
    ></detail>
  </div>
</template>
<script>
  const $appService = require('w-vue-basis/src/api/appService');
  const detail = require('./components/detail.vue').default;
  export default {
    components: { detail },
    data() {
      return {
        loading: false,
        total: 0,
        lists: [],
        appName: $t('数据工厂'),
        pager: {
          pageNum: 1,
          pageSize: 15,
          queryParams: {
            F_title_like: undefined,
            F_operName_like: undefined,
            F_createTime_gt: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
            F_createTime_lt: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
          },
        },
        detailInfo: {
          show: false,
          info: {},
        },
      };
    },
    created() {
      this.getFlowList();
    },
    methods: {
      /**
       * @Author: y_zp
       * @description: 设置不可选日期
       */
      disabledDate(cur) {
        return cur && cur > moment().endOf('day');
      },
      /**
       * @Author: y_zp
       * @description: 获取列表
       */
      getFlowList() {
        this.loading = true;
        $appService
          .operLogList(this.appName, this.pager)
          .then((req) => {
            this.total = Number(req.count);
            this.lists = req.data.map((item) => {
              return {
                ...item,
                businessName: this.filterBusType(item.businessType),
              };
            });
          })
          .finally(() => {
            this.loading = false;
          });
      },
      filterBusType(val) {
        switch (val) {
          case 0:
            return $t('其它');
          case 1:
            return $t('新增');
          case 2:
            return $t('修改');
          case 3:
            return $t('删除');
          case 4:
            return $t('授权');
          case 5:
            return $t('导出');
          case 6:
            return $t('导入');
          case 7:
            return $t('强退');
          case 8:
            return $t('新增或修改');
          case 9:
            return $t('清空数据');
          case 10:
            return $t('前台');
          default:
            return $t('其他');
        }
      },
      /**
       * @Author: y_zp
       * @description: 查询
       */
      querySearch() {
        this.pager.pageNum = 1;
        this.getFlowList();
      },
      /**
       * @Author: y_zp
       * @description: 选择时间
       */
      onTimeChange(date, dateString) {
        this.pager.queryParams.F_createTime_gt = dateString[0];
        this.pager.queryParams.F_createTime_lt = dateString[1];
        this.querySearch();
      },
      /**
       * @Author: y_zp
       * @description: 详情
       */
      clickDetail(row) {
        this.detailInfo = {
          show: true,
          info: row,
        };
      },
      /**
       * @Author: y_zp
       * @description: 删除
       */
      deleteLog(row) {
        $appService.delOperLog(row.operId).then((req) => {
          this.$message.success($t('日志删除成功'));
          this.getFlowList();
        });
      },
    },
  };
</script>
<style lang="less" scoped>
  .operation_log_container {
    .ant-input-search.middle {
      width: 180px;
    }
    .table_list {
      width: 100%;
      height: calc(100vh - 230px);
      display: inline-block;
      margin-top: 16px;
    }
  }
</style>
