<template>
    <el-card shadow="never" class="aui-card--fill">
        <div class="mod-events__interfacelog}">
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
                <el-form-item label="接口名称">
                    <el-input v-model="dataForm.interfaceName" clearable></el-input>
                </el-form-item>
                <el-form-item label="业务类型">
                    <el-select v-model="dataForm.businessType"
                               @change="changeBusinessType">
                        <el-option v-for="item in businessTypeDictList"
                                   :key="item.dictValue"
                                   :label="item.dictName"
                                   :value="item.dictValue">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="dataForm.successFlag" @change="changeSuccessFlag">
                        <el-option :label="$t('logOperation.status0')" :value="0"></el-option>
                        <el-option :label="$t('logOperation.status1')" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <br>
                <el-form-item>
                    <el-input v-model="dataForm.callMsgBody" placeholder="调用消息体" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="dataForm.returnMsgBody" placeholder="调用返回消息体" clearable></el-input>
                </el-form-item>
                <el-form-item label="时间"
                              prop="startTime">
                    <el-date-picker v-model="dataForm.startTime"
                                    type="date"
                                    :picker-options="pickerBeginDateBefore"
                                    value-format="yyyy-MM-dd"
                                    format="yyyy-MM-dd"
                                    placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="至"
                              label-width="25px"
                              prop="endTime">
                    <el-date-picker v-model="dataForm.endTime"
                                    type="date"
                                    :picker-options="pickerBeginDateAfter"
                                    value-format="yyyy-MM-dd"
                                    format="yyyy-MM-dd"
                                    placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button @click="getDataList()">{{ $t('query') }}</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button v-if="$hasPermission('news:interfacelog:save')" type="primary"
                               @click="addOrUpdateHandle()">{{ $t('add') }}
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button v-if="$hasPermission('news:interfacelog:delete')" type="danger" @click="deleteHandle()">
                        {{ $t('deleteBatch') }}
                    </el-button>
                </el-form-item>
            </el-form>
            <el-table v-loading="dataListLoading" :data="dataList" border
                      @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
                <el-table-column v-if="false" type="selection" header-align="center" align="center" width="50"></el-table-column>
                <el-table-column prop="referenceId" label="引用ID" header-align="center" align="center"></el-table-column>
                <el-table-column prop="businessType" label="业务类型" header-align="center"
                                 align="center"
                                 :formatter="showBusinessTypeFormatter"></el-table-column>
                <el-table-column prop="interfaceName" label="接口名称" header-align="center"
                                 align="center"></el-table-column>
                <el-table-column prop="successFlag" label="状态" header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.successFlag === '0'" size="small" type="danger">失败</el-tag>
                        <el-tag v-else size="small" type="success">成功</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="callMsgBody" label="调用消息体" header-align="center"
                                 align="center"></el-table-column>
                <el-table-column prop="returnMsgBody" label="调用返回消息体" header-align="center"
                                 align="center"></el-table-column>
                <el-table-column prop="createdTime" label="调用时间" header-align="center" align="center"></el-table-column>
            </el-table>
            <el-pagination
                    :current-page="page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="limit"
                    :total="total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="pageSizeChangeHandle"
                    @current-change="pageCurrentChangeHandle">
            </el-pagination>
        </div>
    </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/events/interfacelog/page',
        getDataListIsPage: true,
        deleteURL: '/events/interfacelog',
        deleteIsBatch: true
      },
      dataForm: {
        businessType: '',
        interfaceName: '',
        successFlag: '',
        callMsgBody: '',
        returnMsgBody: '',
        startTime: '',
        endTime: ''
      },
      businessTypeDictList: [],
      pickerBeginDateBefore: {
        disabledDate: (time) => {
          let beginDateVal = this.dataForm.startTime
          if (beginDateVal) {
            return time.getTime() > new Date(beginDateVal).getTime()
          }
        }
      },
      pickerBeginDateAfter: {
        disabledDate: (time) => {
          let EndDateVal = this.dataForm.endTime
          if (EndDateVal) {
            return time.getTime() < new Date(EndDateVal).getTime()
          }
        }
      }
    }
  },
  created: function () {
    this.getBusinessTypeDicList()
  },
  methods: {
    // 改变业务类型
    changeBusinessType (item) {
      this.businessType = item
    },
    // 改变状态标志
    changeSuccessFlag (item) {
      this.successFlag = item
    },
    // 获取业务类型字典表business_type
    getBusinessTypeDicList () {
      this.$http.get(`/sys/dict/listSimple/gender`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.businessTypeDictList = res.data
      }).catch(() => { })
    },
    // 列表转换业务类型显示label名称
    showBusinessTypeFormatter: function (row, column) {
      if (row.businessType) {
        let dict = this.businessTypeDictList.filter(item => item.dictValue === row.businessType)[0]
        if (dict) {
          return dict.dictName
        }
      }
      return ''
    }
  }
}
</script>
