<template>
  <div class="message-manage">
    <div class="search">
      <div class="left"></div>
      <div class="right">
        <div>
          <el-select v-model="search.interfaceName" placeholder="请选择接口名称" clearable>
            <el-option
              v-for="item in constant.bocomApiInterface"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </div>
        <div>
          <el-input v-model="search.keyWord" style="width: 280px" placeholder="请输入关键字" />
        </div>

        <div>
          <el-button type="primary" @click="fetchData('search')">查询</el-button>
        </div>
      </div>
    </div>
    <cy-comm-table
      ref="commTable"
      v-loading="loading"
      :columns="columns"
      :data="tableData"
      :count="total"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getList } from '@/api/cyAccountManage/messageManage'
export default {
  data() {
    return {
      search: {
        interfaceName: '',
        keyWord: ''
      },
      loading: false,
      total: 0,
      tableData: [],
      columns: [
        {
          label: '序号',
          index: true
        },
        {
          label: '接口名称',
          prop: 'url',
          showTooltip: true
        },
        {
          label: '请求报文',
          prop: 'request',
          showTooltip: true
        },
        {
          label: '响应报文',
          prop: 'response',
          showTooltip: true
        },
        {
          label: '请求结果',
          prop: 'success',
          showTooltip: true,
          render: (h, row) => {
            return <div>{ row.success ? '成功' : '失败' }</div>
          }
        },
        {
          label: '创建时间',
          prop: 'gmtCreate',
          showTooltip: true
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['constant'])
  },
  created() {
    this.$store.dispatch('getConstant', ['bocomApiInterface'])
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading = true
      const params = {
        ...this.search,
        page: this.page || 1,
        rows: this.size || 10
      }
      getList(params).then(({ rows, records }) => {
        this.loading = false
        this.tableData = rows
        this.total = records
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
