<template>
  <div class="page-view">
    <app-filter ref="app-filter" :model="filters" class="bg-white px-15 border-radius-5" label-width="90px"
                @query="onQuery" @reset="onReset"
    >
      <app-filter-item :span="2">
        <el-button @click="gotodataCatalog"><span><&nbsp;</span>返回</el-button>
      </app-filter-item>
      <app-filter-item :span="6" label="接口名称">
        <el-input v-model="filters.name" clearable placeholder="请输入"
                  @keyup.enter.native="$refs['app-filter'].query"
        />
      </app-filter-item>
      <app-filter-item label="接口状态">
        <el-radio-group v-model="filters.status">
          <el-radio-button v-for="radio in createdList" :key="radio.value" :label="radio.value">{{ radio.label }}
          </el-radio-button>
        </el-radio-group>
      </app-filter-item>
    </app-filter>

    <!-- 列表组件 -->
    <div class="pa-11 bg-white h-100 flex-col mt-11 border-radius-5">
      <div class="mb-15">
        <el-button icon="el-icon-plus" size="mini" type="primary" @click="addData"> 新增</el-button>
        <el-button :disabled="!selectDataList.length > 0" icon="el-icon-delete" size="mini" type="danger"
                   @click="delCompany"
        >删除
        </el-button>
      </div>
      <app-table
        :column="columns"
        :pagination="pagination"
        :table-data="tableData"
        :table-loading="tableLoading"
        :total="total"
        checkbox
        @pagination-change="onPaginationChange"
        @selection-change="handleSelectionChange"
        @row-dblclick="editData"
      >
        <!-- 插槽 -->
        <template #url="scope">
          <el-link type="primary">{{ scope.row.url }}</el-link>
        </template>
        <template #status="scope">
          <el-tag :type="!!scope.row.status ? '' : 'warning'">{{ scope.row.status ? '正式' : '下架' }}</el-tag>
        </template>
      </app-table>
    </div>

    <!-- dialog组件 -->
    <add-edit-dialog v-model="dialogVisible" :data="currentRow" :title="dialogTitle" @confirm="onCompanyConfirm" />
    <!--接口详情-->
    <show-dialog v-model="dialogDetails" :data="currentRow" :title="dialogDetailsTitle" />
  </div>
</template>

<script>
import tableMixin from '@/mixins/table.js'; // 列表mixins
import AddEditDialog from './AddEditDialog.vue';
import ShowDialog from './ShowDialog.vue';

export default {
  components: { ShowDialog, AddEditDialog },
  mixins: [tableMixin],
  data() {
    const TABLE_CONFIG = {
      tableData: [
        {
          id: '1',
          name: '接口1',
          url: 'http://127.0.0.1:8080/',
          mode: 'GET',
          qurey: '方式1',
          alias: '数据源1',
          status: 1,
        },
      ],
      createdList: [
        { label: '正式', value: 1 },
        { label: '下架', value: 0 },
      ],
      // 列表表头
      columns: [
        { label: '接口名称', prop: 'name', align: 'center' },
        { label: '接口地址', dataType: 'slot', slot: 'url', prop: 'url', width: '250px', align: 'center' },
        { label: '请求方式', prop: 'mode', width: '200px', align: 'center' },
        { label: '接口查询方式', prop: 'qurey', width: '200px', align: 'center' },
        { label: '数据库别名', prop: 'alias', width: '200px', align: 'center' },
        { label: '接口状态', prop: 'status', dataType: 'slot', slot: 'status', width: '100px', align: 'center' },
        {
          dataType: 'option',
          label: '操作',
          width: '230px',
          fixed: 'right',
          align: 'center',
          operation: [
            {
              name: '接口信息',
              icon: 'el-icon-document',
              clickFun: (row) => {
                this.detailsShow(row);
              },
            },
            {
              name: '删除',
              icon: 'el-icon-delete',
              color: 'red',
              clickFun: (row) => {
                this.delCompany(row);
              },
            },
          ],
        },
      ],
    };

    const DIALOG_CONFIG = {
      dialogVisible: false,
      dialogTitle: '新增',
      dialogDetails: false,
      dialogDetailsTitle: '接口详情',
    };

    return {
      ...TABLE_CONFIG, // table相关
      ...DIALOG_CONFIG, // 主列表dialog相关
      selectDataList: [],
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.selectDataList = val;
      console.log(val);
    },
    addData() {
      this.dialogTitle = '新增';
      this.currentRow = null;
      this.dialogVisible = true;
    },
    editData(row) {
      this.dialogTitle = `编辑 - ${row.apiName}`;
      this.currentRow = row;
      this.dialogVisible = true;
    },
    delCompany(row) {
      this.$confirm(`此操作将永久删除该接口（${row.apiName}）, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
      });
    },
    onCompanyConfirm(data) {
    },
    gotodataCatalog() {
      this.$router.back();
    },

    // 接口文档查看
    detailsShow(row) {
      this.dialogDetailsTitle = `接口详情- ${row.apiName}`;
      this.currentRow = row;
      this.dialogDetails = true;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table__cell:first-child .cell {
  text-align: center;
}
</style>
