<template>
  <div class="templateList">
    <div class="form-box">
      <el-form
        ref="searchForm"
        :model="searchForm"
        label-position="left"
        size="mini"
        label-width="80px"
        class="form"
      >
        <el-row :gutter="36">
          <el-col :span="12">
            <el-form-item label="业务类型" prop="transType">
              <el-select style="width: 100%" v-model="searchForm.transType" clearable>
                <el-option
                  v-for="item in busiTypeArr"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="层级" prop="level" label-width="40px">
              <el-select style="width: 100%" v-model="searchForm.level" clearable>
                <el-option
                  v-for="item in orgLevelArr"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="button">
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="handleResetSearch">重置</el-button>
      </div>
    </div>

    <div class="control-button">
      <el-button type="primary" icon="el-icon-plus" @click="handleAddTemplate"
        >新增</el-button
      >
      <el-button :disabled="selectedRow.length <= 0" @click="handleBatchDelete"
        >批量删除</el-button
      >
    </div>

    <div class="table-box">
      <el-table
        ref="tableRef"
        :data="tableData"
        size="mini"
        style="widht: 100%"
        ighlight-current-row
        @selection-change="handleChangeSelection"
        v-loading="tableLoading"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="机构号" prop="orgId" min-width="160" />
        <el-table-column label="业务类型" prop="transType" min-width="160" />
        <el-table-column label="层级" prop="level" min-width="160" />
        <el-table-column label="金额" prop="amount" min-width="160" />
        <el-table-column label="创建时间" prop="createTime" min-width="160">
          <template slot-scope="scope">
            {{ parseTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="edit" width="160" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDelete(scope)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handlepageChange"
      />
    </div>

    <el-dialog title="提示" :visible.sync="showTips" width="30%">
      <span>确认删除选中的数据吗？</span>
      <div slot="footer">
        <el-button @click="handleCancelDelete">取消</el-button>
        <el-button type="primary" @click="handleConfirmDelete">确定</el-button>
      </div>
    </el-dialog>

    <add-modal
      :dialogVisible="dialogVisible"
      :busiTypeArr="busiTypeArr"
      :orgLevelArr="orgLevelArr"
      @close="dialogVisible = false"
      @fresh="getData"
    />
  </div>
</template>

<script>
import { getModelList, deleteByIds } from "@/api/configure/paramsSetting.js";
import { parseTime } from "@/utils/ruoyi.js";
import AddModal from "./addRuleModal.vue";
export default {
  data() {
    return {
      searchForm: {},
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      deleteIds: [],
      showTips: false,
      selectedRow: [],
      busiTypeArr: [
        { label: "存款", value: "存款" },
        { label: "贷款", value: "贷款" },
      ],
      orgLevelArr: [
        { label: "客户经理", value: "客户经理" },
        { label: "网点", value: "网点" },
        { label: "支行", value: "支行" },
        { label: "总行", value: "总行" },
      ],
      dialogVisible: false,
      tableLoading: false,
    };
  },
  mounted() {
    this.getData();
  },
  components: {
    AddModal,
  },
  methods: {
    getData() {
      const params = {
        num: (this.currentPage-1)*this.pageSize,
        size: this.pageSize,
        ...this.searchForm
      };
      this.tableLoading = true;
      getModelList(params).then((res) => {
        this.tableData = res.rows || [];
        this.total = res.total;
        this.tableLoading = false;
      }).catch(error => {
        this.tableLoading = false;
      });
    },

    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getData();
    },

    handlepageChange(newPage) {
      this.currentPage = newPage;
      this.getData();
    },

    handleSearch() {
      this.currentPage = 1;
      this.getData();
    },

    handleResetSearch() {
      this.searchForm = {};
      this.handleSearch();
    },

    handleAddTemplate() {
      this.dialogVisible = true;
    },

    handleDelete(scope) {
      this.deleteIds = [scope.row.id];
      this.showTips = true;
    },

    handleCancelDelete() {
      this.deleteIds = [];
      this.showTips = false;
    },

    handleConfirmDelete() {
      const params = this.deleteIds.join(",");
      deleteByIds(params).then((res) => {
        if (res.code === 200) {
          this.showTips = false;
          this.$message.success("删除成功");
          this.currentPage = 1;
          this.pageSize = 10;
          this.total = 0;
          this.getData();
        }
      });
    },

    handleChangeSelection(selection) {
      this.selectedRow = selection;
    },

    handleBatchDelete() {
      this.deleteIds = this.selectedRow.map((item) => item.id);
      this.showTips = true;
    },
  },
};
</script>

<style scoped lang="scss">
.templateList {
  padding: 30px 16px;
  .form-box {
    display: flex;
    justify-content: space-between;
    .form {
      width: 70%;
    }
  }

  .control-button {
    margin-bottom: 16px;
  }

  .table-box {
    .el-pagination {
      float: right;
      margin-top: 8px;
    }
  }
}
</style>
