<template>
  <div class="page-view">
    <app-filter ref="app-filter" :model="filters" class="bg-white px-15 border-radius-5" @query="onQuery" @reset="onReset">
      <app-filter-item :span="6" label="调用方名称" prop="consumerName">
        <el-input v-model="filters.consumerName" clearable placeholder="请输入" @keyup.enter.native="$refs['app-filter'].query" />
      </app-filter-item>
      <app-filter-item :span="6" label="调用访问的接口名称" prop="apiName">
        <el-input v-model="filters.apiName" clearable placeholder="请输入" @keyup.enter.native="$refs['app-filter'].query" />
      </app-filter-item>
    </app-filter>
    <div class="flex-1 pa-11 bg-white flex-col mt-11 border-radius-5">
      <app-table
        :column="columns"
        :pagination="pagination"
        :table-data="tableData"
        :table-loading="tableLoading"
        :total="total"
        @pagination-change="onPaginationChange"
        @row-dblclick="editCompany"
      >
        <!-- 插槽-->
        <template #requestStatus="scope">
          <el-tag :type="!!scope.row.requestStatus ? 'success' : 'danger'">{{ scope.row.requestStatus ? '成功' : '失败' }} </el-tag>
        </template>
      </app-table>
    </div>

    <main-dialog v-model="dialogVisible" :data="currentRow" :title="dialogTitle" @confirm="onCompanyConfirm" />
  </div>
</template>

<script>
import tableMixin from '@/mixins/table.js';

import MainDialog from './MainDialog';
import API from '@/api/business/shareLog';

export default {
  components: { MainDialog },
  mixins: [tableMixin],
  data() {
    const TABLE_CONFIG = {
      filters: {},
      columns: [
        { label: '调用方名称', prop: 'consumerName', align: 'center' },
        { label: '调用方系统名称', prop: 'appName', align: 'center' },
        { label: '调用访问的资源名称', prop: 'resourceName', align: 'center' },
        { label: '调用访问的资源编码', prop: 'resourceCode', align: 'center' },
        { label: '调用访问的接口名称', prop: 'apiName', align: 'center' },
        { label: '调用访问的接口地址', prop: 'apiUrl', align: 'center' },
        { label: '请求返回数据量', prop: 'responseNum', align: 'center' },
        {
          label: '请求访问状态',
          prop: 'requestStatus',
          dataType: 'slot',
          slot: 'requestStatus',
          align: 'center',
        },
        {
          dataType: 'option',
          label: '操作',
          align: 'center',
          width: '200px',
          operation: [
            {
              name: '详情',
              type: 'text',
              size: 'mini',
              icon: 'el-icon-view',
              plain: true,
              // showHide: (row) => {},
              clickFun: row => {
                // this.$emit('onTableClick', row, 'dataSource');
                this.showDetail(row);
              },
            },
          ],
        },
      ],
      originalData: [], // 存储原始数据
    };

    const DIALOG_CONFIG = {
      dialogVisible: false,
      dialogTitle: '新增',
      currentRow: null,
    };

    return {
      ...TABLE_CONFIG, // table相关
      ...DIALOG_CONFIG, // 主列表dialog相关
      tableData: [],
      tableLoading: false, // 表格加载状态
      pagination: {
        pageNum: 1, // 当前页码
        pageSize: 10, // 每页显示的条数
      },
    };
  },
  computed: {
    // 配置列表接口方法；只有配置了该计算属性才会执行table mixins中的getData方法
    dataMethod() {
      return API.dataCallLogs;
    },
  },
  mounted() {},
  created() {
    // this.getData();
  },
  methods: {
    showDetail(row) {
      this.dialogTitle = '数据详情';
      this.currentRow = row;
      this.dialogVisible = true;
    },
    editCompany(row) {
      this.dialogTitle = `编辑 - ${row.consumerName}`;
      this.currentRow = row;
      this.dialogVisible = true;
    },
    // onCompanyConfirm(data) {
    //   const id = this.tableData.length++;
    //   if (data?.id) {
    //     const ind = this.tableData.findIndex(o => o.id == data.id);
    //     ind >= 0 && this.tableData.splice(ind, 1, data);
    //   } else {
    //     this.tableData.push({ ...data, id });
    //   }
    //   this.dialogVisible = false;
    // },
  },
};
</script>

<style></style>
