<template>
  <div class="elmain">
    <!-- 大div   -->
    <div class="main-content">
      <div class="page-view">
        <app-filter ref="app-filter" :model="filters" class="bg-white px-15 border-radius-5" label-width="100px" @query="onQuery" @reset="onReset">
          <app-filter-item :filter-config="{ operation: 'EQUAL' }" :span="6" el-type="input" label="共享资源名称">
            <el-input v-model="filters.code" clearable placeholder="请输入" @keyup.enter.native="$refs['app-filter'].query" />
          </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>

        <!-- 列表组件 -->
        <div class="pa-11 bg-white h-100 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="editData"
          />
        </div>

        <!-- dialog组件 -->
        <detail-dialog v-model="dialogVisible" :data="currentRow" :title="dialogTitle" @confirm="onCompanyConfirm" />
        <!--        <drawer-dialog :drawer-visible="drawer" />-->
      </div>
    </div>
  </div>
</template>

<script>
import tableMixin from '@/mixins/table.js'; // 列表mixins
export default {
  mixins: [tableMixin],
  data() {
    const TABLE_CONFIG = {
      // 列表表头
      columns: [
        { label: '数据库别名', prop: 'alias', width: '200px' },
        { label: '接口名称', prop: 'name', width: '200px' },
        { label: '接口描述', prop: 'desc', width: '300px' },
        { label: '接口地址', prop: 'url', width: '300px' },
        { label: '请求方式', prop: 'mode' },
      ],
    };

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

    return {
      ...TABLE_CONFIG, // table相关
      ...DIALOG_CONFIG, // 主列表dialog相关
      drawerVisible: false, // 控制抽屉显示和隐藏的变量
      value: '',
      activeName: 'first',
      input1: '',
      select: '1',
    };
  },
  mounted() {},
  methods: {
    // 联通接口后 该方法可用table.js  Mixins里的getData方法替代 ，此处只为静态页面开发使用
    getData() {
      this.tableLoading = true;
      setTimeout(() => {
        this.tableData = [
          {
            id: '1',
            alias: '数据库1',
            name: '接口1',
            desc: 'MarcoMa',
            url: 'i24Jh2jN',
            mode: 'GET',
            qurey: 1,
            sql: '接口地址1',
            head: '参数1',
            reqpara: 'GET',
            reqexam: 'mysql',
            stat: '仅一次',
            respara: '11',
            resexa: '22',
            status: '正式',
            createdTime: '2024.10.10 08:43:30',
          },
        ];
        this.tableLoading = false;
      }, 1000);
    },
    addData() {
      this.dialogTitle = '新增';
      this.currentRow = null;
      this.dialogVisible = true;
    },
    editData(row) {
      this.dialogTitle = `编辑 - ${row.name}`;
      this.currentRow = row;
      this.dialogVisible = true;
    },
    delCompany(row) {
      this.$confirm(`此操作将永久删除该汇聚方（${row.name}）, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const ind = this.tableData.findIndex((o) => o.id == row.id);
        ind >= 0 && this.tableData.splice(ind, 1);
      });
    },
    onCompanyConfirm(data) {
      const id = `${this.tableData.length + 1}`;
      if (data?.id) {
        console.log(data);
        const ind = this.tableData.findIndex((o) => o.id == data.id);
        ind >= 0 && this.tableData.splice(ind, 1, data);
      } else {
        this.tableData.push({ ...data, id });
      }
      console.log(this.tableData);
      this.dialogVisible = false;
    },
    //   分页
    //   onPaginationChange(page){
    //
    //   }
    show(row) {
      this.dialogTitle = '数据详情';
      this.currentRow = row;
      this.dialogVisible = true;
    },
    goTodataService() {
      this.$router.push('/bizPlat/dataResource/dataServices/dataServiceLog');
    },
    showDrawer() {
      this.drawerVisible = true;
      console.log(1111);
    },
    handleConfirm() {
      // 处理确定按钮点击事件的逻辑
      this.drawerVisible = false; // 确定后隐藏抽屉
      // ... 其他逻辑，比如提交表单等
    },
  },
};
</script>

<style lang="scss" scoped>
.elmain {
  display: flex;
  flex: 1;
  //border: solid 1px burlywood;
  flex-direction: column; /* 使用列方向布局 */
  height: 100vh;
  background-color: #fff;
  margin-left: 10px;
  overflow: auto; //内容超出显示底部滚动条
}

.page-view {
  padding: 0px 10px 10px 5px;
}

.main-content {
  display: flex;
  flex-direction: column;
  height: 92vh;
}

.drawer-content {
  width: 100%;
  height: 100%;
  margin-left: 20px;
  //border: solid 1px #114d77;
  align-items: center;
}

.drawer-url {
  margin-top: 20px;
}

.drawer-select-input {
  margin-left: 4px;
}

.drawer-footer {
  margin-top: 40px;
}

//复合型输入框
.el-select {
  width: 130px;
}

.el-input {
  width: 500px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>
