<template>
  <div class="eibs-tab currentPage">
    <el-form :model="gtxarg" ref="gtxargForm" label-width="100px" label-position="right" size="small">
      <c-col :span="8" class="col-left">
        <c-col :span="24">
          <c-form-item label="变量代码" prop="cod">
            <el-input v-model="gtxarg.cod"></el-input>
          </c-form-item>
        </c-col>

      </c-col>
      <c-col :span="8" class="col-center">
        <c-col :span="24">
          <c-form-item label="变量名称" prop="name">
            <el-input v-model="gtxarg.name"></el-input>
          </c-form-item>
        </c-col>
      </c-col>
      <c-col :span="8" class="col-center">
        <c-col :span="24">
          <c-form-item label="适用交易" prop="trntyp">
            <c-select v-model="gtxarg.trntyp" style="width: 100%" dbCode="TRNTYP">
            </c-select>
          </c-form-item>
        </c-col>
      </c-col>
      <c-col :span="8" class="col-left">
        <c-col :span="24">
          <c-form-item label="是否动态渲染" prop="showflg">
            <c-select v-model="gtxarg.showflg" style="width: 100%" dbCode="SHWTXT">
            </c-select>
          </c-form-item>
        </c-col>
      </c-col>
      <c-col :span="8" class="col-center">
        <c-col :span="24">
          <c-form-item label="是否可编辑" prop="showenable">
            <c-select v-model="gtxarg.showenable" style="width: 100%" dbCode="EDTTXT">
            </c-select>
          </c-form-item>
        </c-col>
      </c-col>
      <c-col :span="8" class="col-center">
        <c-col :span="24">
          <c-form-item label="显示宽度" prop="showwidth">
            <c-select v-model="gtxarg.showwidth" style="width: 100%" dbCode="SHWDTH">
            </c-select>
          </c-form-item>
        </c-col>
      </c-col>
      <c-col :span="24">
        <span style="float: left">
          <el-button ref="gtxargInsertBtn" v-if="showInsertBtn" type="primary" size="small" @click="addInfo()">新增
          </el-button>
        </span>
        <span style="float: right">
          <el-button size="small" @click="resetFormFields('gtxargForm')">重置</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="gtxargTableRef" :pageSize="gtxarg.pageSize" :pageNumber="gtxarg.pageNum"
          :total="gtxarg.total" @queryFunc="queryFunc" :border="true">
          <el-table-column label="变量代码" prop="cod" min-width="10%">
            <template slot-scope="scope">{{scope.row.cod}}</template>
          </el-table-column>
          <el-table-column label="变量名称" prop="name" min-width="10%">
            <template slot-scope="scope">{{scope.row.name}}</template>
          </el-table-column>
          <el-table-column label="变量路径" prop="path" min-width="15%">
            <template slot-scope="scope">{{scope.row.path}}</template>
          </el-table-column>
          <el-table-column label="适用交易" prop="trntypname" min-width="8%">
            <template slot-scope="scope">{{ scope.row.trntypname }}</template>
          </el-table-column>
          <el-table-column label="是否动态渲染" prop="showflgname" min-width="8%">
            <template slot-scope="scope">{{ scope.row.showflgname }}</template>
          </el-table-column>
          <el-table-column label="显示格式" prop="showtypename" min-width="8%">
            <template slot-scope="scope">{{ scope.row.showtypename }}</template>
          </el-table-column>
          <el-table-column label="显示宽度" prop="showwidthname" min-width="8%">
            <template slot-scope="scope">{{ scope.row.showwidthname }}</template>
          </el-table-column>
          <el-table-column label="是否可编辑" prop="showenablename" min-width="8%">
            <template slot-scope="scope">{{ scope.row.showenablename }}</template>
          </el-table-column>
          <el-table-column label="绑定的静态码表" prop="showselect" min-width="10%">
            <template slot-scope="scope">{{ scope.row.showselect }}</template>
          </el-table-column>
          <el-table-column label="操作" width="220px">
            <template slot-scope="scope">
              <el-button v-if="showInfoBtn" ref="gtxargDisplayBtn" @click="getInfoDialog(scope.row.inr)" type="info"
                size="mini">详情</el-button>
              <el-button v-if="showUpdateBtn" ref="gtxargUpdateBtn" @click="updateInfoDialog(scope.row.inr)"
                type="primary" size="mini">修改</el-button>
              <el-button v-if="showDeleteBtn" ref="gtxargDeleteBtn" @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="gtxargDialog" label-width="120px" label-position="right" label-suffix="："
        :rules="rules">
        <el-row>
          <el-col :span="11">
            <el-form-item label="变量代码" prop="cod">
              <el-input v-model="gtxargDialog.cod" :disabled="dialogFieldDisable"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="变量名称" prop="name">
              <el-input v-model="gtxargDialog.name" :disabled="dialogFieldDisable"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="变量路径" prop="path">
              <el-input v-model="gtxargDialog.path" :disabled="dialogFieldDisable"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="适用交易" prop="trntyp">
              <c-select v-model="gtxargDialog.trntyp" style="width: 100%" dbCode="TRNTYP"
                :disabled="dialogFieldDisable">
              </c-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="显示格式" prop="showtype">
              <c-select v-model="gtxargDialog.showtype" style="width: 100%" dbCode="SHFRMT"
                :disabled="dialogFieldDisable">
              </c-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="是否可编辑" prop="showenable">
              <c-select v-model="gtxargDialog.showenable" style="width: 100%" dbCode="EDTTXT"
                :disabled="dialogFieldDisable">
              </c-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="显示宽度" prop="showwidth">
              <c-select v-model="gtxargDialog.showwidth" style="width: 100%" dbCode="SHWDTH"
                :disabled="dialogFieldDisable">
              </c-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="是否动态渲染" prop="showflg">
              <c-select v-model="gtxargDialog.showflg" style="width: 100%" dbCode="SHWTXT"
                :disabled="dialogFieldDisable">
              </c-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="绑定的静态码表" prop="showselect">
              <el-input v-model="gtxargDialog.showselect" :disabled="dialogFieldDisable"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog" v-if="opType != 'info'">取 消</el-button>
        <el-button @click="cancelDialog" v-if="opType == 'info'">返 回</el-button>
        <el-button type="primary" @click="submitAddDialog" v-show="dialogSubAddBtnVisible" :loading="addLoadingStatus">确
          定</el-button>
        <el-button type="primary" @click="submitEditDialog" v-show="dialogSubEditBtnVisible"
          :loading="editLoadingStatus">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import GtxargModel, {
    Pattern
  } from "./GtxargModel.js";
  import {
    queryByPage,
    addInfo,
    editInfo,
    getInfo,
    deleteInfo
  } from "~/service/manage/gtxarg.js";
  import Utils from "~/utils";
  import commonFunctions from "~/mixin/commonFunctions.js";
  export default {
    mixins: [commonFunctions],
    data() {
      return {
        gtxarg: new GtxargModel().data.gtxarg,
        gtxargDialog: new GtxargModel().data.gtxarg,
        rules: Pattern,
        tableData: [],
        dialogFormVisible: false,
        dialogFormTitle: '新增保函文本模板变量信息',
        dialogFieldDisable: false,
        dialogSubAddBtnVisible: true,
        dialogSubEditBtnVisible: true,
        showInfoBtn: true,
        showInsertBtn: false,
        showDeleteBtn: false,
        showUpdateBtn: false,
        addLoadingStatus: false,
        editLoadingStatus: false,
        searchLoading: false,
        opType: "",
      }
    },
    mounted() {
      this.searchTable();
      this.getHiddenButtonVue();
    },
    methods: {
      getHiddenButtonVue() {
        const loading = this.loading();
        this.$buttonControlService.hiddenBtnList()
          .then((res) => {
            // 【新增】按钮
            let hasInsert = res.some((item) => {
              return item.ITEMID === 'gtxargInsertBtn';
            })
            if (hasInsert) {
              this.showInsertBtn = false;
            } else {
              this.showInsertBtn = true;
            }
            // 【修改】按钮
            let hasUpdate = res.some((item) => {
              return item.ITEMID === 'gtxargUpdateBtn';
            })
            if (hasUpdate) {
              this.showUpdateBtn = false;
            } else {
              this.showUpdateBtn = true;
            }
            // 【删除】按钮
            let hasDelete = res.some((item) => {
              return item.ITEMID === 'gtxargDeleteBtn';
            })
            if (hasDelete) {
              this.showDeleteBtn = false;
            } else {
              this.showDeleteBtn = true;
            }
            loading.close();
          })
      },

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

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

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

      // 【新增】按钮
      addInfo() {
        this.opType = "add";
        this.dialogFieldDisable = false;
        this.dialogFormVisible = true;
        this.dialogSubAddBtnVisible = true;
        this.dialogSubEditBtnVisible = false;
        this.dialogFormTitle = '新增保函文本模板变量信息';
      },

      // 【取消】按钮
      cancelDialog() {
        // 关闭弹框
        this.dialogFormVisible = false;
        this.gtxargDialog.inr = '';
        this.gtxargDialog.cod = '';
        this.gtxargDialog.name = '';
        this.gtxargDialog.path = '';
        this.gtxargDialog.trntyp = '';
        this.gtxargDialog.showflg = '';
        this.gtxargDialog.showtype = '';
        this.gtxargDialog.showenable = '';
        this.gtxargDialog.showwidth = '';
        this.gtxargDialog.showselect = '';
        this.$refs['dialogForm'].resetFields();
        this.opType = "";
      },

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

      // 【详情】按钮
      getInfoDialog(inr) {
        this.opType = "info";
        // 开启弹窗
        this.dialogFormVisible = true;
        // 字段禁用
        this.dialogFieldDisable = true;
        // 确定按钮隐藏
        this.dialogSubAddBtnVisible = false;
        this.dialogSubEditBtnVisible = false;
        this.dialogFormTitle = '查看保函文本模板变量信息';
        this.getInformation(inr);
      },

      // 【修改】按钮
      updateInfoDialog(inr) {
        this.opType = "edit";
        this.dialogFormVisible = true;
        this.dialogFieldDisable = false;
        this.dialogSubEditBtnVisible = true;
        this.dialogSubAddBtnVisible = false;
        this.dialogFormTitle = '修改保函文本模板变量信息';
        this.getInformation(inr);
      },

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

      },

      // 查看保函文本模板变量详情
      getInformation(inr) {
        this.gtxargDialog.inr = inr;
        getInfo(this.gtxargDialog)
          .then((res) => {
            this.gtxargDialog = res.data;
          })
          .catch((err) => {
            this.$notify.error("查询失败!");
          });
      },

      // 【删除-确定】删除保函文本模板变量详情
      deleteDialogInfo() {
        this.gtxargDialog.inr = this.deleteInr;
        deleteInfo(this.gtxargDialog)
          .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>