<template>
  <div>
    <PageTable ref="bizTable" action="QueryLogList" :columnsFn="columns" style="overflow-x: auto">
      <Form :model="formSearch" ref="logForm" slot="search-bar" label-position="top" class="ivu-form-no-margin-bottom" inline>
        <Form-item prop="event" :label="$t('module.logQuery.event')">
          <Select v-model="formSearch.event" :transfer="true" size="small" style="width: 180px" clearable>
            <Option v-for="item in eventList" :title="item.vsiValue" :value="item.vsiKey" :key="item.vsiKey">{{item.vsiValue}}</Option>
          </Select>
        </Form-item>
        <Form-item prop="userId" :label="$t('module.logQuery.userId')">
          <Input type="text" maxlength="30" v-model="formSearch.userId" :placeholder="$t('module.logQuery.enterUserId')" size="small"></Input>
        </Form-item>
        <Form-item prop="userName" :label="$t('module.logQuery.userName')">
          <Input type="text" maxlength="30" v-model="formSearch.userName" :placeholder="$t('module.logQuery.enterUserName')" size="small"></Input>
        </Form-item>
      </Form>
      <div slot="handle-bar">
        <Button size="small" @click.native="search" type="warning" icon="ios-search">{{$t('common.search')}}</Button>
        <Button size="small" @click.native="reset" type="info" icon="md-sync">{{$t('common.reset')}}</Button>
      </div>
    </PageTable>
  </div>
</template>
<script>
import OperateLogDetail from './OperateLogDetail.vue';
export default {
  components: {},
  data() {
    return {
      modal: false,
      eventList: [],
      formSearch: {
        event: "",
        userId: "",
        userName: "",
      },
    };
  },
  computed: {},
  created: function () {
    $store.dispatch("GetValueSetByCode", { code: 'EVENT' }).then(response => {
      this.eventList = response.dataResult
    })
  },
  beforeMount: function () { },
  mounted: function () { },
  beforeDestroy: function () { },
  destroyed: function () { },
  methods: {
    search() {
      this.$refs["bizTable"].load(this.formSearch);
    },
    reset() {
      this.$refs["logForm"].resetFields();
      this.$refs["bizTable"].load(this.formSearch);
    },
    getEventName(event){
      for(let item of this.eventList){
        if(event == item.vsiKey){
          return item.vsiValue
        }
      }
    },
    columns(){
      return [
          {
            title: this.$t('common.operating'),
            align: "center",
            width: 80,
            render: (h, params) => {
              return h("RowTools", {
                props: {
                  data: [
                    {
                      type: "button",
                      text: this.$t('module.logQuery.detail'),
                      handle: () => {
                        new this.$sidelipPage(OperateLogDetail, {
                          props: {
                            logId: params.row.id
                          }
                        }); 
                      }
                    }
                  ]
                }
              });
            }
          },
          {
            title: this.$t('module.logQuery.event'),
            key: "event",
            align: "center",
            // width: 150,
            render: (h, params) => {
              return h(
                "span",
                {
                  attrs: {
                    title: this.getEventName(params.row.event)
                  }
                },
                this.getEventName(params.row.event)
              );
            }
          },
          {
            title: this.$t("module.logQuery.createdTime"),
            key: "timestamp",
            align: "center",
            // width: 120,
            ellipsis: true,
            render: (h, params) => {
              return h(
                "span",
                {
                  attrs: {
                    title: params.row.timestamp
                  }
                },
                params.row.timestamp
              );
            }
          },
          {
            title: this.$t('module.logQuery.userId'),
            key: "userId",
            // width: 120,
            align: "center",
            ellipsis: true,
            render: (h, params) => {
              return h(
                "span",
                {
                  attrs: {
                    title: params.row.userId
                  }
                },
                params.row.userId
              );
            }
          },
          {
            title: this.$t('module.logQuery.userName'),
            key: "userName",
            align: "center",
            // width: 120,
            render: (h, params) => {
              return h(
                "span",
                {
                  attrs: {
                    title: params.row.userName
                  }
                },
                params.row.userName
              );
            }
          },
          {
            title: this.$t('module.logQuery.userIp'),
            key: "userIP",
            align: "center",
            // width: 180,
            render: (h, params) => {
              return h(
                "span",
                {
                  attrs: {
                    title: params.row.userIP
                  }
                },
                params.row.userIP
              );
            }
          },
          {
            title: this.$t('module.logQuery.extra'),
            key: "extra",
            align: "center",
            width: 180,
            ellipsis: true,
            render: (h, params) => {
              return h(
                "span",
                {
                  attrs: {
                    title: params.row.extra
                  }
                },
                params.row.extra
              );
            }
          },
      ]
    }
  },
  watch: {},
  directives: {}
};
</script>
