<template>
  <div>
    <PageTable ref="bizTable" action="LogMgQueryOperateLogList" :columns="columns" style="overflow-x                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               : auto">
      <Form :model="formSearch" slot="search-bar" label-position="top" class="ivu-form-no-margin-bottom" inline>
        <Form-item :label="$t('module.operateLog.operator')">
          <Input type="text" maxlength="30" v-model="formSearch.operator" :placeholder="$t('module.operateLog.enterAccount')" size="small"></Input>
        </Form-item>
        <Form-item :label="$t('module.operateLog.operateTime')">
          <DatePicker type="daterange" placement="bottom-end" :placeholder="$t('module.operateLog.selectDate')" :value=defaultDate style="width:185px" size="small" @on-change="handleDateChange" @on-clear="handleDateClear"></DatePicker>
        </Form-item>
        <Form-item label="IP">
          <Input type="text" maxlength="200" v-model="formSearch.operateIp" :placeholder="$t('module.operateLog.enterIp')" size="small"></Input>
        </Form-item>
        <Form-item :label="$t('module.operateLog.businessName')">
          <Input type="text" maxlength="50" v-model="formSearch.instanceName" :placeholder="$t('module.operateLog.businessName')" 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 OperateLogHistoryPage from './OperateLogHistory.vue';
export default {
  name: 'operate-log-manage',
  components: {},
  data() {
    return {
      modal: false,
      tableData: [],
      addOrEditWinTitle: this.$t('module.operateLog.logDetail'),
      formInfo: {
        operator: "",
        operateIp: "",
        createDate: "",
        instanceName: "",
        method: "",
        requestUri: "",
        params: ""
      },
      baseData: [],
      defaultDate: [],
      formSearch: {
        operator: "",
        operateIp: "",
        beginDate: "",
        endDate: "",
        instanceName: ""
      },
      columns: [
        {
          title: this.$t('module.operateLog.operateType'),
          key: "operateType",
          width: 110,
          align: "center"
        },
        {
          title: this.$t('module.operateLog.operateDesc'),
          key: "operateName",
          width: 150,
          render: (h, params) => {
            return h(
              "span",
              {
                attrs: {
                  title: params.row.operateName
                }
              },
              params.row.operateName
            );
          }
        },
        {
          title: this.$t('module.operateLog.operator'),
          key: "operator",
          width: 120,
          render: (h, params) => {
            return h(
              "span",
              {
                attrs: {
                  title: params.row.operator
                }
              },
              params.row.operator
            );
          }
        },
        {
          title: this.$t('module.operateLog.operateRole'),
          key: "operatorRole",
          width: 120,
          render: (h, params) => {
            return h(
              "span",
              {
                attrs: {
                  title: params.row.operatorRole
                }
              },
              params.row.operatorRole
            );
          }
        },
        {
          title: this.$t('module.operateLog.operateTime'),
          key: "operateTime",
          width: 180,
          render: (h, params) => {
            return h(
              "span",
              {
                attrs: {
                  title: params.row.operateTime
                }
              },
              params.row.operateTime
            );
          }
        },
        {
          title: "IP",
          key: "operateIp",
          width: 120,
          render: (h, params) => {
            return h(
              "span",
              {
                attrs: {
                  title: params.row.operateIp
                }
              },
              params.row.operateIp
            );
          }
        },
        {
          title: this.$t('module.operateLog.operateURI'),
          key: "requestMapping",
          width: 180,
          ellipsis: true,
          render: (h, params) => {
            return h(
              "span",
              {
                attrs: {
                  title: params.row.requestMapping
                }
              },
              params.row.requestMapping
            );
          }
        },
        {
          title: this.$t('module.operateLog.businessName'),
          key: "instanceName",
          width: 180,
          render: (h, params) => {
            return h(
              "span",
              {
                attrs: {
                  title: params.row.instanceName
                }
              },
              params.row.instanceName
            );
          }
        },
        {
          title: this.$t('module.operateLog.operateResult'),
          key: "operateResult",
          width: 170,
          align: "center"
        },
        {
          title: this.$t('module.operateLog.operateResultInfo'),
          key: "operateResultMessage",
          ellipsis: true,
          width: 190,
          render: (h, params) => {
            return h(
              "span",
              {
                attrs: {
                  title: params.row.operateResultMessage
                }
              },
              params.row.operateResultMessage
            );
          }
        },
        {
          title: this.$t('common.operating'),
          align: "center",
          width: 170,
          render: (h, params) => {
            return h("RowTools", {
              props: {
                data: [
                  {
                    type: "button",
                    text: this.$t('module.operateLog.checkHistory'),
                    handle: () => {
                      new this.$sidelipPage(OperateLogHistoryPage, {
                        props: {
                          instanceId: params.row.instanceId
                        }
                      }); 
                    }
                  }
                ]
              }
            });
          }
        }
      ]
    };
  },
  computed: {},
  created: function () {
  },
  beforeMount: function () { },
  mounted: function () { },
  beforeDestroy: function () { },
  destroyed: function () { },
  methods: {
    handleDateChange(date) {
      this.formSearch.beginDate = date[0];
      this.formSearch.endDate = date[1] ? date[1] : "";
    },
    handleDateClear() {
      this.formSearch.beginDate = "";
      this.formSearch.endDate = "";
    },
    search() {
      this.$refs["bizTable"].load(this.formSearch);
    },
    reset() {
      this.formSearch.operator = "";
      this.formSearch.operateIp = "";
      this.formSearch.beginDate = "";
      this.formSearch.endDate = "";
      this.formSearch.instanceName = "";
      this.defaultDate = [];
      this.$refs["bizTable"].load(this.formSearch);
    }
  },
  watch: {},
  directives: {}
};
</script>
