<template>
  <div class="eibs-tab currentPage">
    <el-form :model="auzlvl" ref="auzlvlForm" label-width="100px" label-position="right" size="small">
      <c-col :span="12" class="col-left">
        <c-col :span="24">
          <c-form-item label="业务机构" prop="branch">
            <el-select v-model="auzlvl.branch" style="width: 100%" filterable clearable>
              <el-option v-for="item in branchCodes" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </c-form-item>
        </c-col>
        <c-col :span="24">
          <c-form-item label="授权档次" prop="authlevel">
            <c-select v-model="auzlvl.authlevel" style="width: 100%" dbCode="ATHLVL">
            </c-select>
          </c-form-item>
        </c-col>
      </c-col>
      <c-col :span="12" class="col-left">
        <c-col :span="24">
          <c-form-item label="业务/交易" prop="type">
            <c-select v-model="auzlvl.type" style="width: 100%" dbCode="ATHTYP" @change="changeType()">
            </c-select>
          </c-form-item>
        </c-col>
        <c-col :span="24">
          <c-form-item label="业务编码" v-if="auzlvl.type == '0'" prop="code">
            <c-select v-model="auzlvl.code" style="width: 100%" dbCode="BUSTXT" uil="CN" :isShowKeyAndLabel="true">
            </c-select>
          </c-form-item>
          <c-form-item label="交易编码" v-if="auzlvl.type == '1'" prop="code">
            <c-select v-model="auzlvl.code" style="width: 100%" dbCode="ATPTXT" uil="CN" :isShowKeyAndLabel="true">
            </c-select>
          </c-form-item>
        </c-col>
      </c-col>
      <c-col :span="24">
        <span style="float: left">
          <el-button v-if="showInsertBtn" ref="auzlvlInsertBtn" type="primary" size="small" @click="addInfo()">新增
          </el-button>
          <el-button v-if="showInsertBtn" ref="auzlvlBatchDelBtn" type="danger" size="small" @click="batchDeleteInfo()">
            批量删除</el-button>
        </span>
        <span style="float: right">
          <el-button size="small" @click="resetFormFields('auzlvlForm')">重置</el-button>
          <el-button type="primary" icon="el-icon-search" size="small" :loading="searchLoading" @click="searchTable()">
            查询</el-button>
        </span>
      </c-col>
      <c-col :span="24">
        <c-paging-table :data="tableData" ref="auzlvlTableRef" :pageSize="auzlvl.pageSize" :pageNumber="auzlvl.pageNum"
          :total="auzlvl.total" @queryFunc="queryFunc" :border="true">
          <el-table-column label="" min-width="5%">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isselected" true-label="1" false-label="0" @change="changeStatus">
              </el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="业务机构" prop="bchname" min-width="15%">
            <template slot-scope="scope">{{scope.row.bchname}}</template>
          </el-table-column>
          <el-table-column label="授权档次" prop="authlevelname" min-width="10%">
            <template slot-scope="scope">{{scope.row.authlevelname}}</template>
          </el-table-column>
          <el-table-column label="业务/交易" prop="typename" min-width="10%">
            <template slot-scope="scope">{{scope.row.typename}}</template>
          </el-table-column>
          <el-table-column label="业务/交易编码" prop="codename" min-width="15%">
            <template slot-scope="scope">{{ scope.row.codename }}</template>
          </el-table-column>
          <el-table-column label="授权币种" prop="relcurname" min-width="10%">
            <template slot-scope="scope">{{ scope.row.relcurname }}</template>
          </el-table-column>
          <el-table-column label="授权金额" prop="relamt" min-width="10%">
            <template slot-scope="scope">{{ scope.row.relamt }}</template>
          </el-table-column>
          <el-table-column label="单次授权金额" prop="autamt" min-width="10%">
            <template slot-scope="scope">{{ scope.row.autamt }}</template>
          </el-table-column>
          <el-table-column label="操作" min-width="15%">
            <template slot-scope="scope">
              <el-button v-if="showInfoBtn" ref="auzlvlDisplayBtn" @click="getInfoDialog(scope.row.inr)" type="info"
                size="mini">详情</el-button>
              <el-button v-if="showUpdateBtn" ref="auzlvlUpdateBtn" @click="updateInfoDialog(scope.row.inr)"
                type="primary" size="mini">修改</el-button>
              <el-button v-if="showDeleteBtn" ref="auzlvlDeleteBtn" @click="deleteInfoDialog(scope.row.inr)"
                type="danger" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </c-paging-table>
      </c-col>
    </el-form>
    <el-dialog :visible.sync="dialogFormVisible" :title=dialogFormTitle :modal-append-to-body="false"
      :lock-scroll="false" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false"
      v-dialogDrag>
      <el-form ref="dialogForm" :model="auzlvlDialog" label-width="120px" label-position="right" label-suffix="："
        :rules="rules">
        <el-row>
          <el-col :span="11">
            <el-form-item label="业务机构" prop="branch">
              <c-select v-model="auzlvlDialog.branch" style="width: 100%" :disabled="branchFieldDisable">
                <el-option v-for="item in branchCodes" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </c-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="授权档次" prop="authlevel">
              <c-select v-model="auzlvlDialog.authlevel" style="width: 100%" :disabled="branchFieldDisable"
                dbCode="ATHLVL">
              </c-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="业务/交易" prop="type">
              <c-select v-model="auzlvlDialog.type" style="width: 100%" :disabled="dialogFieldDisable" dbCode="ATHTYP"
                @change="changeDialogType()">
              </c-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="业务编码" v-if="auzlvlDialog.type == '0'" prop="code">
              <c-select v-model="auzlvlDialog.code" style="width: 100%" dbCode="BUSTXT" :isShowKeyAndLabel="true"
                :disabled="dialogFieldDisable">
              </c-select>
            </el-form-item>
            <el-form-item label="交易编码" v-if="auzlvlDialog.type == '1'" prop="code">
              <c-select v-model="auzlvlDialog.code" style="width: 100%" dbCode="ATPTXT" :isShowKeyAndLabel="true"
                :disabled="dialogFieldDisable">
              </c-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="授权币种" prop="relcur">
              <c-select v-model="auzlvlDialog.relcur" style="width: 100%" :disabled="dialogFieldDisable" dbCode="CURTXT"
                sort="SRT" :isShowKeyAndLabel="true">
              </c-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="授权金额" prop="relamt">
              <c-input-currency v-model="auzlvlDialog.relamt" :disabled="dialogFieldDisable"></c-input-currency>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="单次授权金额" prop="autamt">
              <c-input-currency v-model="auzlvlDialog.autamt" :disabled="dialogFieldDisable"></c-input-currency>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog" v-if="operType != 'info'">取 消</el-button>
        <el-button @click="cancelDialog" v-if="operType == 'info'">返 回</el-button>
        <el-button type="primary" @click="submitDialog" v-show="dialogSubBtnVisible" :loading="loadingStatus">确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import AuzModel, {
    Pattern
  } from "./AuzlvlModel.js";
  import {
    queryByPage,
    saveInfo,
    getInfo,
    deleteInfo,
    batchDelete,
    listBch
  } from "~/service/manage/auzlvl.js";
  import Utils from "~/utils";
  import commonFunctions from "~/mixin/commonFunctions.js";
  export default {
    mixins: [commonFunctions],
    data() {
      return {
        auzlvl: new AuzModel().data.auzlvl,
        auzlvlDialog: new AuzModel().data.auzlvl,
        rules: Pattern,
        tableData: [],
        dialogFormVisible: false,
        dialogFormTitle: '新增权限档次信息',
        dialogFieldDisable: false,
        branchFieldDisable: false,
        dialogSubBtnVisible: true,
        deleteInr: null,
        branchCodes: [],
        deleteInrList: [],
        showInfoBtn: true,
        showInsertBtn: false,
        showDeleteBtn: false,
        showUpdateBtn: false,
        loadingStatus: false,
        operType: '',
        searchLoading: false,
      }
    },
    mounted() {
      this.getBchList();
      this.searchTable();
      this.getHiddenButtonVue();
    },
    methods: {
      getHiddenButtonVue() {
        const loading = this.loading();
        this.$buttonControlService.hiddenBtnList()
          .then((res) => {
            let hasAddOrBatchAdd = res.some((item) => {
              return item.ITEMID === 'auzlvlInsertBtn' || item.ITEMID === 'auzlvlBatchDelBtn';
            })
            if (hasAddOrBatchAdd) {
              this.showInsertBtn = false;
            } else {
              this.showInsertBtn = true;
            }

            let hasDelete = res.some((item) => {
              return item.ITEMID === 'auzlvlDeleteBtn';
            })
            if (hasDelete) {
              this.showDeleteBtn = false;
            } else {
              this.showDeleteBtn = true;
            }

            let hasUpdate = res.some((item) => {
              return item.ITEMID === 'auzlvlUpdateBtn';
            })
            if (hasUpdate) {
              this.showUpdateBtn = false;
            } else {
              this.showUpdateBtn = true;
            }
            loading.close();
          })

      },

      // 重置表单数据
      resetFormFields(formName) {
        this.$refs[formName].resetFields();
      },

      // 数据格式化
      typeFormat(row, column) {
        if (row.type == '0') {
          return '业务';
        }
        if (row.type == '1') {
          return '交易';
        }
      },

      // 清空业务、交易编码
      changeType() {
        this.auzlvl.code = '';
      },

      // 清空模态框业务、交易编码
      changeDialogType() {
        this.auzlvlDialog.code = '';
      },

      // 获取机构列表
      getBchList() {
        listBch()
          .then((res) => {
            this.branchCodes = res.data.map(item => ({
              value: item.branch,
              label: item.branch + ' - ' + item.bchname
            }));
          })
      },

      // 获取分页组件数据，为请求数据赋值
      queryFunc(pageNumber, pageSize) {
        this.auzlvl.pageNum = pageNumber;
        this.auzlvl.pageSize = pageSize;
        this.searchTable();
      },

      // 列表查询
      searchTable() {
        this.searchLoading = true;
        queryByPage(this.auzlvl)
          .then((res) => {
            this.tableData = res.data.list;
            this.auzlvl.total = res.data.total;
            this.auzlvl.pageNum = res.data.pageNumber;
            this.auzlvl.pageSize = res.data.pageSize;
            this.initSelected();
            this.searchLoading = false;
          })
          .catch((err) => {
            this.searchLoading = false;
            this.$notify.error("查询失败!");
          });
      },

      // 【新增】按钮
      addInfo() {
        this.dialogFieldDisable = false;
        this.branchFieldDisable = false;
        this.dialogFormVisible = true;
        this.dialogSubBtnVisible = true;
        this.dialogFormTitle = '新增权限档次信息';
        this.operType = "add";
      },

      // 【批量删除】按钮
      batchDeleteInfo() {
        if (this.deleteInrList.length <= 0) {
          this.$notify.warning("请至少选择一条数据!");
          return;
        }
        this.$confirm("是否确认删除?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            batchDelete(this.deleteInrList)
              .then((res) => {
                if (res.respCode == 'AAAAAA') {
                  this.$notify.success("删除成功!");
                  this.deleteInrList = [];
                } else {
                  this.$notify.error(res.respMsg);
                }
                // 刷新列表
                this.searchTable();
              })
              .catch((err) => {
                this.$notify.error("删除失败!");
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      // 改变复选框状态
      changeStatus() {
        for (var i = 0; i < this.tableData.length; i++) {
          let inr = this.tableData[i].inr
          if (this.tableData[i].isselected == '1') {
            if (!this.deleteInrList.includes(inr)) {
              this.deleteInrList.push(inr);
            }
          } else {
            if (this.deleteInrList.includes(inr)) {
              this.deleteInrList.splice(this.deleteInrList.indexOf(inr), 1);
            }
          }
        }
        console.log(this.deleteInrList);
      },

      // 初始化选中状态
      initSelected() {
        for (var i = 0; i < this.tableData.length; i++) {
          if (this.deleteInrList.includes(this.tableData[i].inr)) {
            this.$set(this.tableData[i], 'isselected', '1')
          } else {
            this.$set(this.tableData[i], 'isselected', '0')
          }
        }
      },

      // 【取消】按钮
      cancelDialog() {
        // 关闭弹框
        this.dialogFormVisible = false;
        this.auzlvlDialog.inr = '';
        this.auzlvlDialog.branch = '';
        this.auzlvlDialog.authlevel = '';
        this.auzlvlDialog.type = '';
        this.auzlvlDialog.code = '';
        this.auzlvlDialog.relcur = '';
        this.auzlvlDialog.relamt = '';
        this.auzlvlDialog.autamt = '';
        this.operType = '';
        this.$refs['dialogForm'].resetFields();
      },

      // 【确定】按钮
      submitDialog() {
        this.$refs.dialogForm.validate((validated) => {
          if (validated) {
            this.loadingStatus = true;
            saveInfo(this.auzlvlDialog)
              .then((res) => {
                if (res.respCode == 'AAAAAA') {
                  this.$notify.success("保存成功!");
                } else {
                  this.$notify.error(res.respMsg);
                }
                // 关闭弹框
                this.cancelDialog();
                // 刷新列表
                this.searchTable();
                this.loadingStatus = false;
              })
              .catch((err) => {
                this.loadingStatus = false;
                this.$notify.error("保存失败!");
              });
          } else {
            Utils.formValidateTips(this.$refs.dialogForm.fields)
          }
        })
      },

      // 【详情】按钮
      getInfoDialog(inr) {
        // 开启弹窗
        this.dialogFormVisible = true;
        // 字段禁用
        this.dialogFieldDisable = true;
        this.branchFieldDisable = true;
        // 确定按钮隐藏
        this.dialogSubBtnVisible = false;
        this.dialogFormTitle = '查看权限档次信息';
        this.operType = "info";
        this.getInformation(inr);
      },

      // 【修改】按钮
      updateInfoDialog(inr) {
        this.dialogFormVisible = true;
        this.dialogFieldDisable = false;
        this.branchFieldDisable = true;
        this.dialogSubBtnVisible = true;
        this.dialogFormTitle = '修改权限档次信息';
        this.operType = "edit";
        this.getInformation(inr);
      },

      // 【删除】按钮
      deleteInfoDialog(inr) {
        this.operType = "delete";
        this.deleteInr = inr;
        this.$confirm("是否确认删除?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.deleteDialogInfo();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },

      // 查看权限档次详情
      getInformation(inr) {
        this.auzlvlDialog.inr = inr;
        getInfo(this.auzlvlDialog)
          .then((res) => {
            this.auzlvlDialog = res.data;
          })
          .catch((err) => {
            this.$notify.error("查询失败!");
          });
      },

      // 【删除-确定】删除权限档次详情
      deleteDialogInfo() {
        this.auzlvlDialog.inr = this.deleteInr;
        deleteInfo(this.auzlvlDialog)
          .then((res) => {
            this.$notify.success("删除成功!");
            this.deleteInr = null;
            // 刷新列表
            this.searchTable();
          })
          .catch((err) => {
            this.$notify.error("删除失败!");
          });
      }
    }
  }
</script>
<style lang="less" scoped>
  .currentPage {
    .el-table--enable-row-hover {
      .el-table__body {
        tr:hover>td {
          background-color: #c694dc !important;
        }
      }
    }

    ::v-deep .el-checkbox {
      float: none;
    }
  }
</style>