<template>
    <div class="app-container pageTopForm">
        <el-form :model="queryParams" ref="queryRef" v-show="showSearch" size="small" label-width="130px">
          <el-col :span="6">
              <el-form-item label="节点名称" prop="nodeName">
                  <el-select
                      v-model="queryParams.nodeName"
                      placeholder="请选择节点名称"
                      clearable>
                      <el-option
                          v-for="dict in dict.type.sys_normal_disable"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"/>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="硬件SN" prop="hardwareSn">
                  <el-input
                      v-model="queryParams.hardwareSn"
                      placeholder="请输入硬件SN"
                      clearable
                      @keyup.enter="handleQuery"/>
              </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="lastBtnSty">
                <el-button type="primary" size="mini" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
        <!-- 表格数据 -->
      <TableList :columns="columns" :config="config" :queryParams="queryParams" :tableList="tableList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange"></TableList>
    </div>
</template>

<script setup name="RevenueMethod">
    import TableList from "@/components/table/index.vue"
    import {listRecord} from "@/api/disRevenue/earnManage"
    export default {
      name: 'revenueMethod',
      dicts: ['sys_normal_disable'],
      components: {TableList},
      data() {
        return {
          // 角色表格数据
          tableList: [],
          // 遮罩层
          loading: true,
          // 显示搜索条件
          showSearch: true,

          // 列显隐信息
          columns: {
            id: {label: `ID`, visible: false},
            createTime: {label: `修改时间`, visible: true},
            nodeName: {label: `节点名称`, minWidth: '130',  visible: true},
            hardwareSn: {label: `硬件SN`},
            changeContent: {label: `修改内容`, minWidth: '350', visible: true},
            creatBy: {label: `修改人`, width: '80', visible: true},
          },
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            total: 0
          },
          config: {
            tableButton: {
              top: [
                {content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'disRevenue:earnManage:revenueMethod:export'},
              ]
            }
          }
        }
      },
      created() {
        this.getList();
      },
      methods: {
        /** 查询角色列表 */
        getList() {
          this.loading = true;
          listRecord(this.queryParams).then(response => {
            this.tableList = response.rows;
            this.queryParams.total = response.total;
            this.loading = false;
          })
        },

        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList()
        },

        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm("queryRef");
          this.handleQuery();
        },
        // 处理子组件传递的新值
        handleValueChange(newValue) {
          // 父组件更新自身数据，实现同步
          this.showSearch = newValue;
          // console.log('父组件拿到新值:', newValue);
        },
        callback(result, rowData, selectChange) {
          if (result && result.fnCode) {
            switch (result.fnCode) {
              case 'export':
                let dataList = [];
                Object.keys(this.columns).forEach(item => {
                  if (item.visible) {
                    dataList.push(item.prop);
                  }
                });
                this.download("/system/record/export", {
                  properties: dataList,
                }, `收益方式修改记录_${new Date().getTime()}.xlsx`);
                break;
              default:
            }
          }
        }
      }
    }
</script>

<style scoped>
  ::v-deep .lastBtnSty .el-form-item__content {
    margin-left: 10px!important;
  }
</style>
