<template>
  <container>
          <br />
      <a-alert banner closable type="error">
        <template slot="message">后端bug:任何操作的操作类型都是增加</template>
      </a-alert>
       <br />
      <a-alert banner closable type="warning">
        <template slot="message">详情的确认按钮没功能</template>
      </a-alert>
      <br />
    <a-card :bordered="false">
      <Auth auth="sysApp:page">
        <div class="yo-query-bar">
          <a-form-model :model="query" layout="inline">
            <a-form-model-item label="角色名称">
              <a-input placeholder="请输入角色名称" v-model="query.name" />
            </a-form-model-item>
            <a-form-model-item label="唯一编号">
              <a-input placeholder="请输入唯一编码" v-model="query.code" />
            </a-form-model-item>
            <a-form-model-item>
              <a-button-group>
                <a-button @click="onQuery" type="primary">查询</a-button>
                <a-button
                  @click="
                    () => {
                      (query = {}), onQuery();
                    }
                  "
                  >重置</a-button
                >
              </a-button-group>
            </a-form-model-item>
          </a-form-model>
        </div>
      </Auth>

      <yo-table :columns="columns" :load-data="loadData" ref="table">
        <div class="yo-action-bar" slot="title">
          <Auth auth="sysApp:delete">
            <div class="yo-action-bar--actions">
              <a-popconfirm
                @confirm="sysVisLogDelete()"
                placement="topRight"
                title="确认清空日志？"
              >
                <a-button>清空日志</a-button>
              </a-popconfirm>
            </div>
          </Auth>
        </div>
        <span slot="opType" slot-scope="text">
          {{ opTypeFilter(text) }}
        </span>
        <span slot="success" slot-scope="text">
          {{ successFilter(text) }}
        </span>
        <span slot="action" slot-scope="text, record">
          <yo-table-actions>
            <a @click="onOpen('details-Form', record)">详情</a>
          </yo-table-actions>
        </span>
      </yo-table>
      <details-Form ref="details-Form" />
    </a-card>
    <br />
  </container>
</template>
<script>
import detailsForm from "./detailsForm";
export default {
  components: {
    detailsForm,
  },
  data() {
    return {
      query: {},
      columns: [
        {
          title: "日志名称",
          dataIndex: "name",
        },
        {
          title: "操作类型",
          dataIndex: "opType",
          scopedSlots: { customRender: "opType" },
        },
        {
          title: "是否成功",
          dataIndex: "success",
          scopedSlots: { customRender: "success" },
        },
        {
          title: "ip",
          dataIndex: "ip",
        },
        {
          title: "请求地址",
          dataIndex: "url",
          scopedSlots: { customRender: "url" },
        },
        {
          title: "操作时间",
          dataIndex: "opTime",
          scopedSlots: { customRender: "opTime" },
        },
        {
          title: "操作人",
          dataIndex: "account",
        },
        {
          title: "详情",
          dataIndex: "action",
          width: "150px",
          scopedSlots: { customRender: "action" },
        },
      ],
      opTypeDict: [],
      successDict: [],
    };
  },
  created() {
    this.onLoadCodes();
  },
  methods: {
    opTypeFilter(result) {
      // eslint-disable-next-line eqeqeq
      const values = this.opTypeDict.filter((item) => item.code == result);
      if (values.length > 0) {
        return values[0].value;
      }
    },
    sysVisLogDelete() {
      this.$api.sysOpLogDelete().then((res) => {
        if (res.success) {
          this.$message.success("清空成功");
          this.onReloadData();
        } else {
          this.$message.error("清空失败：" + res.message);
        }
      });
    },
    successFilter(result) {
      // eslint-disable-next-line eqeqeq
      const values = this.successDict.filter((item) => item.code == result);
      if (values.length > 0) {
        return values[0].value;
      }
    },
    /**
     * 必要的方法
     * 传给yo-table以示意数据接口及其参数和返回的数据结构
     */
    loadData(params) {
      return this.$api
        .sysOpLogPage({
          ...params,
          ...this.query,
        })
        .then((res) => {
          return res.data;
        });
    },

    /**
     * 有查询功能时的必要方法
     * 加载数据时初始化分页信息
     */
    onQuery() {
      this.$refs.table.onReloadData(true);
    },

    /**
     * 必要方法
     * 重新列表数据
     */
    onReloadData() {
      this.$refs.table.onReloadData();
    },

    /**
     * 加载字典数据时的必要方法
     */
    onLoadCodes() {
      this.$api
        .$queue([
          this.$api.sysDictTypeDropDownWait({ code: "yes_or_no" }),
          this.$api.sysDictTypeDropDownWait({ code: "op_type" }),
        ])
        .then(([yesOrNo, commonStatus]) => {
          this.opTypeDict = commonStatus.data;
          this.successDict = yesOrNo.data;
        });
    },
    bindCodeValue(code, name) {
      const c = this.codes
        .find((p) => p.code == name)
        .values.find((p) => p.code == code);
      if (c) {
        return c.value;
      }
      return null;
    },

    /**
     * 有编辑新增功能的必要方法
     * 从列表页调用窗口的打开方法
     */
    onOpen(formName, record) {
      this.$refs[formName].onOpen(record);
    },

    onResult(success, message, successMessage) {
      if (success) {
        this.$message.success(successMessage);
        this.onReloadData();
      } else {
        this.$refs.table.onLoaded();
        this.$message.error(message);
      }
    },

    onSetDefault(record) {
      this.$refs.table.onLoading();
      this.$api
        .sysAppSetAsDefault({ id: record.id })
        .then(({ success, message }) => {
          this.onResult(success, message, "设置成功");
        });
    },

    onDelete(record) {
      this.$refs.table.onLoading();
      this.$api.sysRoleDel(record).then(({ success, message }) => {
        this.onResult(success, message, "删除成功");
      });
    },
  },
};
</script>