<template>
  <a-row>
    <a-col :md="11">
      <div class="linese"></div>
      <!-- 查询区域 -->
      <a-form layout="inline" @keyup.enter.native="gettagTables" style="margin-top: 10px;padding:10px; background: #e6e9f1;">
        <a-row>
          <a-col :span="10">
            <a-form-item label="标签类型" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
              <a-select placeholder="选择标签类型" option-filter-prop="children" v-model="queryRefsParam.tagId">
                <a-select-option v-for="d in datatagSources" :key="d.id">
                  {{ d.tagName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="10">
            <a-form-item label="关键词" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-input placeholder="请输入搜索关键词" v-model="queryRefsParam.tableName"></a-input>
            </a-form-item>
          </a-col>
          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="4" :sm="3">
              <a-button type="primary" style="left: 10px" @click="gettagTables" icon="search">查询</a-button>
            </a-col>
          </span>
        </a-row>
      </a-form>
      <!-- table区域-begin -->
      <div style="height:calc(100vh - 360px);background: #e6e9f1;">
        <a-table ref="tagtable" size="middle" :loading="tagloading" :row-selection="tagrowSelection" bordered rowKey="id" :pagination="false" :scroll="{ x: false, y: tableScrollY }" :columns="tagcolumns" :dataSource="dataRefsSources">
        </a-table>
      </div>
      <div class="linese"></div>
    </a-col>
    <a-col :md="2">
      <div style="padding-top: 100%; padding-left: 15%;">
        <a-button type="primary" @click="addtag"> <a-icon type="left" />添加标签 </a-button>
        <div style="height: 50px;"></div>
        <a-button type="primary" @click="detag">移除标签<a-icon type="right" /> </a-button>
      </div>
    </a-col>
    <a-col :md="11" style="padding:0 20px;">
      <div class="linese"></div>
      <a-form layout="inline" @keyup.enter.native="getalltable" style="margin-top: 10px;padding:10px; background: #e6e9f1;">
        <a-row :gutter="24">
          <a-col :md="20" :sm="1">
            <a-form-item label="关键词">
              <a-input placeholder="请输入搜索关键词" v-model="queryParam.tableName"></a-input>
            </a-form-item>
          </a-col>
          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="4" :sm="3">
              <a-button type="primary" style="left: 10px" @click="getalltable" icon="search">查询</a-button>
            </a-col>
          </span>
        </a-row>
      </a-form>
      <!-- table区域-begin -->
      <div ref="tableContainer" style="height:calc(100vh - 360px);background: #e6e9f1;">
        <a-table ref="table" size="middle" :row-selection="rowSelection" bordered :loading="loading" :rowKey="getRowKey" :pagination="false" :scroll="{ x: false, y: tableScrollY }" :columns="columns" :dataSource="dataSource">
        </a-table>
      </div>
      <div class="linese"></div>
    </a-col>
  </a-row>

</template>

<script>
import store from '@/store/'
import { getAction } from '@/api/manage'
import {
  idcTableTagRef,
  getTableTagRefs,
  getAllTable,
  idcTableTagRefdelete
} from '@/api/idcTableTagRef'
import { idcTableTaglist } from '@/api/tag'
export default {
  name: "dataManage",
  components: {
  },
  data() {
    return {
      description: '标准库',
      contentList: [],
      percent: 0,
      websock: {},
      queryRefsParam: {
        tableName: "",
        tagId: "",
        pageNum: 1,
        pageSize: 9999999,
      },
      queryParam: {
        tableName: "",
        tagId: "",
        pageNum: 1,
        pageSize: 9999999,
      },
      datatagSources: [],
      dataRefsSources: [],
      dataSource: [
      ],
      tagloading: false,
      loading: false,
      columns: [
        {
          title: '表名',
          align: "left",
          width: 220,
          dataIndex: 'tableName',
        },
        {
          title: '报文名',
          align: "left",
          dataIndex: 'tableMessName'
        },
      ],
      tagcolumns: [
        {
          title: '#',
          dataIndex: '',
          key: 'id',
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '表名',
          align: "left",
          width: 220,
          dataIndex: 'tableName',
        },
        {
          title: '报文名',
          align: "left",
          dataIndex: 'tableMessName'
        },
      ],
      tagqueryParam: {
        pageNum: 1,
        pageSize: 20,
        tagName: ""
      },
      selectedRowKeys: [],
      tagselectedRowKeys: [],
      selectedRowData: [],
      tagselectedRowData: [],
      tableScrollY: 0,
    }
  },
  mounted() {
    this.getdatatagSources()
    this.calculateScrollY();
  },
  computed: {
    getRowKey(record) {
      return `${record.schemaName}_${record.tableName}`
    },
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.handleSelectChange,
        preserveSelectedRowKeys: true,  // 保持选中项key
        type: 'checkbox',  // 多选模式
        columnWidth: 60,   // 选择列宽度
        getCheckboxProps: record => ({
          // 可以在这里设置禁用条件
          // disabled: record.disabled  
        })
      }
    },
    tagrowSelection() {
      return {
        selectedRowKeys: this.tagselectedRowKeys,
        onChange: this.taghandleSelectChange,
        preserveSelectedRowKeys: true,  // 保持选中项key
        type: 'checkbox',  // 多选模式
        columnWidth: 60,   // 选择列宽度
        getCheckboxProps: record => ({
          // 可以在这里设置禁用条件
          // disabled: record.disabled  
        })
      }
    }
  },
  destroyed: function () {
  },
  created() {

  },
  methods: {
    calculateScrollY() {
      // 获取父容器高度（需减去表格内其他元素的高度，如分页栏）
      const container = this.$refs.tableContainer;
      const paginationHeight = 64; // 根据实际分页栏高度调整
      this.tableScrollY = container.clientHeight - paginationHeight;
    },
    handleSelectChange(selectedRowKeys, row) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRowData = row
    },
    taghandleSelectChange(selectedRowKeys, row) {
      this.tagselectedRowKeys = selectedRowKeys
      this.tagselectedRowData = row
    },
    gattable() {
      this.getalltable();
      this.gettagTables();
    },
    getdatatagSources() {
      idcTableTaglist(this.tagqueryParam).then((res) => {
        if (res.success) {
          this.datatagSources = res.result.records;
          this.queryRefsParam.tagId = res.result.records[0].id;
          this.gattable();
        } else {
          this.$message.warning(res.message);
        }
      });
    },
    dataAdd() {
      getAction("/dataSpecial/special").then((res) => {
        if (res.success) {
          this.$message.success(res.message);
        }
      });
    },

    addtag() {
      var that = this;
      this.selectedRowData.forEach(item => {
        idcTableTagRef({
          "tagId": that.queryParam.tagId,
          "tableName": item.tableName,
          "schemaName": item.schemaName
        }).then((res) => {
          if (res.success) {
            that.gattable();
          } else {
            that.$message.warning(res.message);
          }
        });
      })
      this.selectedRowData = [];
      this.selectedRowKeys = [];
    },
    detag() {
      var that = this;
      this.tagselectedRowKeys.forEach(item => {
        idcTableTagRefdelete({ id: item }).then((res) => {
          if (res.success) {
            that.gattable();
          } else {
            that.$message.warning(res.message);
          }
        });
      });
      this.tagselectedRowKeys = [];
      this.tagselectedRowData = [];
    },
    getalltable() {
      this.queryParam.tagId = this.queryRefsParam.tagId
      this.loading = true;
      getAllTable(this.queryParam).then((res) => {
        if (res.success) {
          this.dataSource = res.result;
        } else {
          this.$message.warning(res.message);
        }
        this.loading = false;
      });
    },
    gettagTables() {
      this.tagloading = true;
      getTableTagRefs(this.queryRefsParam).then((res) => {
        if (res.success) {
          this.dataRefsSources = res.result.records;
        } else {
          this.$message.warning(res.message);
        }
        this.tagloading = false;
      });
    },
  }
}
</script>
<style scoped>
/deep/ .ant-table-bordered .ant-table-header>table {
  border: none !important;
}
</style>