<template>
  <div class="RCSbox">
    <OperateCard
      class="cleft"
      width="300px"
      show-fold
      :icon-left-list="showTreeList?iconLeftList1:iconLeftList2"
      :icon-right-list="showTreeList?iconRightList1:iconRightList2"
      :form-list="formList"
      @handleNodeClick="getNodeInfo"
    />
    <div class="cright">
      <div class="tableBox">
        <PublicTable
          ref="table"
          class="table"
          row-key="id"
          :loading="loading"
          :has-index="false"
          :has-operation="false"
          :need-select="false"
          :table-data="tableData.slice((pageParams.pageNum-1)*pageParams.pageSize,pageParams.pageNum*pageParams.pageSize)"
          :table-info="tableInfo"
          :table-column="columns"
          :events="events"
          operation-width="150px"
          :btn-button="operations"
          :table-top-button="tableTopButton"
          :operation-fixed="true"
          :is-need-pagination="true"
          :current-page="pageParams.pageNum"
          :page-size="pageParams.pageSize"
          :total="pageParams.total"
          :operated-string="operatedString"
          :is-need-customcolumn="false"
          @sizeChange="handleSizeChange"
          @currentChange="handleCurrentChange"
          @customColumnChange="handleCustomColumnChange"
          @handleTableTopColumnIconClick="handleTableTopColumnIconClick"
          @handleSelectionChange="handleSelectionChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import PublicTable from '../../../components/table/index.vue';
import OperateCard from '../../../components/operateCard/index.vue';
import mockData from './mockData';
import mockData2 from './mockData2';
import mockData3 from './mockData3';
export default {
  components: {
    PublicTable,
    OperateCard,
  },
  data() {
    return {
      // 获取列表前是否loading加载
      loading: false,
      // table数据源
      tableData: [],
      // 表格项绑定的属性
      columns: [
        {
          prop: 'code',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.code'),
        },
        {
          prop: 'name',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.shortName'),
        },
        {
          prop: 'localName',
          minWidth: '200px',
          align: 'center',
          label: this.$t('field.name'),
        },
        {
          prop: 'bookIdName',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.bookIdName'),
        },
        {
          prop: 'currencyIdName',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.currencyIdName'),
        },
        {
          prop: 'folderStatusName',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.folderStatusName'),
        },
      ],
      // 表格行单机双击事件
      events: {
        'row-dblclick': (row) => {
          // 双击表格 行 触发的函数
          // console.log('row-dblclick',row);
        },
        'row-click': (row) => {
          // 单机表格 行 触发的函数
          // console.log("row-click", row);
        },
      },
      tableTopButton: [
        {
          text: this.$t('button.export'),
          type: 'primary',
          class: 'el-text-color',
          callback: (value) => {
            this.handletableTopButton(value);
          },
        },
        {
          text: this.$t('button.import'),
          type: 'primary',
          class: 'el-text-color',
          callback: (value) => {
            this.handletableTopButton(value);
          },
        },
      ],
      // 左方操作列图标参数
      // 操作栏自定义按钮
      iconLeftList1: [
        {
          text: '新增实体',
          type: 'el-icon-s-order',
          callback: (row) => {
            this.handleAddOrEdit('add', row);
          },
        },
        {
          text: '新增账簿',
          type: 'el-icon-folder-add',
          callback: (row) => {
            this.handleAddOrEdit('edit', row);
          },
        },
        {
          text: '新增账户',
          type: 'el-icon-document-add',
          callback: (row) => {
            this.handleAddOrEdit('edit', row);
          },
        },
        {
          text: this.$t('button.edit'),
          type: 'el-icon-edit',
          callback: (row) => {
            this.handleAddOrEdit('edit', row);
          },
        },
        {
          text: this.$t('button.delete'),
          type: 'el-icon-delete',
          callback: (row) => {
            this.handleAddOrEdit('edit', row);
          },
        },
        {
          text: '历史版本',
          type: 'el-icon-tickets',
          callback: (row) => {
            this.handleAddOrEdit('edit', row);
          },
        },
      ],
      iconRightList1: [
        {
          type: 'el-icon-menu',
          callback: () => {
            this.changeCardIconList();
          },
        },
      ],
      iconLeftList2: [
        {
          text: this.$t('button.add'),
          type: 'el-icon-plus',
          callback: (row) => {
            this.handleAddOrEdit('add', row);
          },
        },
        {
          text: this.$t('button.edit'),
          type: 'el-icon-edit',
          callback: (row) => {
            this.handleAddOrEdit('edit', row);
          },
        },
        {
          text: this.$t('button.delete'),
          type: 'el-icon-delete',
          callback: (row) => {
            this.handleAddOrEdit('edit', row);
          },
        },
      ],
      iconRightList2: [
        {
          type: 'el-icon-s-fold',
          callback: () => {
            this.changeCardIconList();
          },
        },
      ],
      // 搜索查询的参数
      pageParams: {
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
      ],
      operatedString: '',
      showOpCard: false,
      showTreeList: true,
    };
  },

  async mounted() {
    this.formList = this.getNodeOptions(this.deepRemoveLeftQuotes(mockData));
    this.queryPage();
  },
  methods: {
    // 展示左方操作卡片
    showOperate() {
      this.showOpCard = true;
    },
    closeOperateCard() {
      this.showOpCard = false;
    },
    // 页面展示条数改变事件-pageSize
    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize;
    },
    // 页面切换事件-pageNum
    handleCurrentChange(pageNum) {
      // console.log('');
      this.pageParams.pageNum = pageNum;
    },
    handleAddOrEdit(type, row) {
      console.log('新增编辑', type, row);
    },
    // 数据列确定修改事件
    handleCustomColumnChange(val) {
      // console.log('数据列确定修改事件',val);
      // this.tableData = mockData2;
    },
    // 导入按钮点击事件
    handleDataImport() {},
    // 导出按钮点击事件
    handleDataExport() {},
    // 点击当前列前的图标事件
    handleTableTopColumnIconClick(val) {
      this.operatedString = '我是计算了之后的字符串';
      console.log('当前列 ', val);
    },
    // 多选事件
    handleSelectionChange(val) {
      console.log('多选事件 ', val);
    },
    // 自定义按钮 点击事件
    handletableTopButton(val) {
      console.log('自定义按钮', val);
    },
    getNodeInfo(row) {
      console.log('我是node', row);
      // 通过请求接口查询子节点，如果子节点有数据，需要加一个children属性
      this.addChildrenToNode(row.id, this.getNodeOptions(this.deepRemoveLeftQuotes(mockData2)));
      const res = this.deepRemoveLeftQuotes(mockData3);
      this.tableData = res.datals;
      this.pageParams.total = Number(res.total);
      // this.pageParams.pageSize = Number(res.pageSize);
      this.pageParams.pageSize = 15;
      console.log('我是formList', this.formList);
    },
    getNodeOptions(arr) {
      for (const i in arr) {
        arr[i].label = `${arr[i].code} ${arr[i].localName}`;
      }
      return arr;
    },
    // 在数组中找到特定节点并添加 children
    addChildrenToNode(parentId, newChildren) {
      const findAndAdd = (nodes) => {
        for (let i = 0; i < nodes.length; i++) {
          if (nodes[i].id === parentId) {
            // 使用 Vue.set 确保响应式
            this.$set(nodes[i], 'children', newChildren);
            return true;
          }
          if (nodes[i].children) {
            if (findAndAdd(nodes[i].children)) return true;
          }
        }
        return false;
      };

      findAndAdd(this.formList);
    },
    changeCardIconList() {
      this.showTreeList = !this.showTreeList;
    },
    async queryPage() {
      // const params = {
      //   modelName: 'pubCurrency',
      //   grpType1: 'CU',
      //   queryParam: {
      //     grpid: '',
      //     code: '',
      //     pageStart: this.pageParams.pageNum,
      //     pageLimit: this.pageParams.pageSize,
      //   },
      // };
      // const res = await this.$apis.queryPage(params);
      // if (res.success) {
      //   this.tableData = res.data.result.datals;
      //   this.pageParams.total = res.data.result.total;
      //   this.$message.success('请求成功');
      // }
    },
    // 去除对象数据左方的引用号，处理返回复制的返回数据用
    deepRemoveLeftQuotes(obj) {
      if (typeof obj !== 'object' || obj === null) return obj;

      if (Array.isArray(obj)) {
        return obj.map((item) => this.deepRemoveLeftQuotes(item));
      }

      const newObj = {};
      for (const key in obj) {
        const newKey = key.replace(/^["']|["']$/g, '');
        newObj[newKey] = this.deepRemoveLeftQuotes(obj[key]);
      }

      return newObj;
    },
  },
};
</script>

<style lang="scss" scoped>
.RCSbox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  .cright {
    flex: 1;
    width: 800px;
    margin-left: 12px;
    padding: 0 12px;
  }
}
</style>
