<template>
  <div style="width: 100%;">
    <template>
      <div class="search">
        <div class="left"></div>
        <div class="right">
          <div>
            <el-select
              v-model="search.transCode"
              placeholder="请选择接口交易码"
              clearable
              style="width: 200px;"
            >
              <el-option
                v-for="item in transCodeList"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </div>
          <div class="leftBtn">
            <el-button type="primary" @click="fetchData">查询</el-button>
          </div>
        </div>
      </div>
      <cy-comm-table
        ref="commTable"
        v-loading="loading"
        :columns="columns"
        :table-options="tableOptions"
        :data="tableData"
        :count="total"
        parent-component="LogManage"
      />
    </template>
  </div>
</template>

<script>
import { getAllTransCode, getSmbList } from '@/api/systemManage/smbLogManage/smbLogManage'

export default {
  name: 'SmbLogManage',
  data() {
    return {
      search: {
        transCode: ''
      },
      transCodeList: [],
      total: 20,
      loading: false,
      tableData: [],
      tableOptions: {
        sortTable: true,
        maxHeight: 'calc(100vh - 335px)',
        height: 'calc(100vh - 335px)'
      },
      columns: [
        {
          label: '序号',
          index: true
        },
        {
          label: '接口交易码',
          prop: 'transCode',
          showTooltip: true
        },
        {
          label: '长银请求流水号',
          prop: 'channelSerialNo',
          showTooltip: true
        },
        {
          label: '苏商银行请求流水号',
          showTooltip: true,
          prop: 'smbSerialNo'
        },
        {
          label: '请求业务数据',
          prop: 'requestPayload',
          showTooltip: true
        },
        {
          label: '响应业务数据',
          prop: 'responsePayload',
          showTooltip: true
        },
        {
          label: '请求结果',
          prop: 'success',
          showTooltip: true,
          render: (h, row) => {
            return <div>{ row.success ? '成功' : '失败' }</div>
          }
        },
        {
          label: '请求失败原因',
          prop: 'remark',
          showTooltip: true
        },
        {
          label: '创建时间',
          prop: 'gmtCreate',
          showTooltip: true
        },
        {
          label: '修改时间',
          prop: 'gmtModified',
          showTooltip: true
        }
      ]
    }
  },
  // mounted() {
  //   this.fetchData()
  // },
  methods: {
    async fetchData() {
      const params = {
        page: this.page,
        rows: this.size,
        transCode: this.search.transCode
      }

      this.loading = true

      const res = await getSmbList(params)

      this.loading = false

      if (res.success) {
        this.tableData = res.rows || []
        this.total = res.records
      }
    },
    async queryAllTransCode() {
      const res = await getAllTransCode()

      if (res.data.length) {
        this.transCodeList = res.data
      }
    }
  }
}
</script>

<style lang="scss">

</style>
