<template>
  <div class="RCSbox">

    <OperateCard
      class="cleft"
      width="200px"
      show-fold
      :icon-left-list="iconLeftList"
      :icon-right-list="iconRightList"
      :form-list="formList"
    />

    <div class="cright">
      <el-tabs
        v-model="activeName"
        style="width: 100%;"
        class="tab"
        @tab-click="handleTabClick"
      >
        <el-tab-pane
          label="用户管理"
          name="0"
        >
          <PublicTable
            ref="tableRef"
            row-key="id"
            :loading="loading"
            :has-index="false"
            :need-select="false"
            :table-data="tableData"
            :table-info="tableInfo"
            :table-column="columns"
            :events="events"
            operation-width="150px"
            :btn-button="operations"
            :operation-fixed="true"
            :is-need-pagination="true"
            :current-page="searchParams.pageNum"
            :page-size="searchParams.pageSize"
            :total="total"
            :operated-string="operatedString"
            :is-need-customcolumn="false"
            @sizeChange="handleSizeChange"
            @currentChange="handleCurrentChange"
            @customColumnChange="handleCustomColumnChange"
            @handleTableTopColumnIconClick="handleTableTopColumnIconClick"
            @handleSelectionChange="handleSelectionChange"
          />
        </el-tab-pane>
        <el-tab-pane
          label="配置管理"
          name="1"
        >
          <Params />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Params from './params.vue';
import PublicTable from '@/components/table';
import OperateCard from '@/components/operateCard';
export default {
  components: {
    Params,
    PublicTable,
    OperateCard,
  },
  data() {
    return {
      activeName: '0',
      loading: false,
      tableData: [{}],
      columns: [
        {
          prop: 'name',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.applications'),
        },
        {
          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: 'type',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.type'),
        },
        {
          prop: 'parameters',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.parameters'),
        },
      ],
      operations: [
        {
          text: this.$t('button.edit'),
          callback: (row) => {
            this.handleAddOrEdit('edit', row);
          },
        },
        {
          text: this.$t('button.history'),
          callback: (row) => {
            this.handleAddOrEdit('history', row);
          },
        },
      ],
      searchParams: {
        pageNum: 1,
        pageSize: 20,
      },
      total: 100,
      operatedString: '',
      iconLeftList: [
        {
          text: this.$t('button.add'),
          type: 'el-icon-plus',
          callback: (row) => {
            this.operateCardAddOrEdit('add', row);
          },
        },
        {
          text: this.$t('button.edit'),
          type: 'el-icon-edit',
          callback: (row) => {
            this.operateCardAddOrEdit('edit', row);
          },
        },
        {
          text: this.$t('button.delete'),
          type: 'el-icon-delete',
          callback: (row) => {
            this.operateCardAddOrEdit('edit', row);
          },
        },
      ],
      iconRightList: [],
    };
  },
  async mounted() {
    // this.queryPage();
  },
  methods: {
    operateCardAddOrEdit(type, row) {
      console.log('新增编辑', type, row);
    },
    operateCardClose() {
    },
    handleSizeChange(pageSize) {
      this.searchParams.pageSize = pageSize;
    },
    handleCurrentChange(pageNum) {
      this.searchParams.pageNum = pageNum;
    },
    handleAddOrEdit(type, row) {
      // console.log('新增编辑',type, row);
    },
    handleCustomColumnChange(val) {
    },
    handleDataImport() {},
    handleDataExport() {},
    handleTableTopColumnIconClick(val) {
      this.operatedString = '我是计算了之后的字符串';
      console.log('当前列 ', val);
    },
    handleSelectionChange(val) {
      console.log('多选事件 ', val);
    },
    async queryPage() {
      const params = {
        modelName: 'pubCurrency',
        grpType1: 'CU',
        queryParam: {
          grpid: '',
          code: '',
          pageStart: this.searchParams.pageNum,
          pageLimit: this.searchParams.pageSize,
        },
      };
      const res = await this.$apis.queryPage(params);
      if (res.success) {
        this.tableData = res.data.result.datals;
        this.total = res.data.result.total;
        this.$message.success('请求成功');
      }
    },
    handleTabClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

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