<template>
  <div>
    <FormSearch
      :form-arr="formArr"
      :form-data="formData"
      @outOperation="outOperation"
      @searchSubmit="searchSubmit"
      @reset="resetForm"
    />
    <div class="tableBox">
      <PublicTable
        ref="table"
        class="table"
        row-key="id"
        :loading="loading"
        :has-index="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>
</template>

<script>
import FormSearch from '../../../components/formSearch/index.vue';
import PublicTable from '../../../components/table/index.vue';
import mockData from './mockData';
export default {
  components: {
    FormSearch,
    PublicTable,
  },
  data() {
    return {
      formArr: [
        {
          // input: true,
          type: 'input',
          prop: 'input1',
          span: 6,
          attrs: {
            label: '关键字',
          },
        },
      ],
      // 默认值
      formData: {},
      // 获取列表前是否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'),
        },
      ],
      // 表格行单机双击事件
      events: {
        'row-dblclick': (row) => {
          // 双击表格 行 触发的函数
          // console.log('row-dblclick',row);
        },
        'row-click': (row) => {
          // 单机表格 行 触发的函数
          // console.log("row-click", row);
        },
      },
      // 操作栏自定义按钮
      operations: [
        {
          text: this.$t('button.edit'),
          type: 'text',
          class: 'el-text-color',
          callback: (row) => {
            this.handleAddOrEdit('edit', row);
          },
        },
        {
          text: this.$t('button.delete'),
          type: 'text',
          class: 'el-text-color',
          callback: (row) => {
            this.handleAddOrEdit('edit', row);
          },
        },
        {
          text: this.$t('field.history'),
          type: 'text',
          class: 'el-text-color',
          callback: (row) => {
            this.historyVersionOpen();
          },
        },
      ],
      tableTopButton: [
        {
          text: this.$t('button.add'),
          type: 'primary',
          class: 'el-text-color',
          callback: () => {
            this.handleAddOrEdit('add');
          },
        },
        {
          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);
          },
        },
      ],
      // 搜索查询的参数
      pageParams: {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      },
      operatedString: '',
    };
  },

  async mounted() {
    this.queryPage();
  },
  methods: {
    searchSubmit(val) {
      console.log('search结果', val);
    },
    resetForm() {
      this.formData = {};
    },
    outOperation(val, index, prop, num) {
      console.log(val, index, prop, num);
    },
    // 页面展示条数改变事件-pageSize
    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize;
    },
    // 页面切换事件-pageNum
    handleCurrentChange(pageNum) {
      // console.log('');
      this.pageParams.pageNum = pageNum;
    },
    handleAddOrEdit(type, row) {
      this.$router.push('/808107/pub/newHoliday');
    },
    // 数据列确定修改事件
    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);
    },
    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('请求成功');
      // }
      const res = this.deepRemoveLeftQuotes(mockData);
      this.tableData = res.datals;
      this.pageParams.total = Number(res.total);
      this.pageParams.pageSize = Number(res.pageSize);
    },
    // 去除对象数据左方的引用号，处理返回复制的返回数据用
    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>
</style>
