<template>
  <div class="eibs-tab" >
    <div style="width: 100%;height: 80vh;display: flex;">
      <!-- 机构管理卡片 -->
      <div style="width: 360px;margin-right: 20px;">
        <el-card shadow="always">
          <div slot="header">
            <i class="el-icon-menu front-title"></i>
            {{ $t('statics.机构管理') }}
          </div>
          <div class="tree-wrap">
            <el-tree
             :data="orgTree" 
             :empty-text="$t('statics.机构无数据')" 
             :props="defaultProps" 
             @node-click="clickNodes"
             :expand-on-click-node="false"
              :default-expanded-keys="expandedKeys"
              highlight-current
              ref="treeRef"
              node-key="branch"
               v-loading="queryLoading"
             >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span class="top">
                  <el-tooltip effect="light" :content="node.label" placement="left">
                    <span class="el-tree-node__label">
                      {{ nameTrim(node, 10) }}
                    </span>
                  </el-tooltip>
                  <span>
                    <el-button type="text" size="medium" icon="el-icon-plus" @click.stop="() => addOrg(node, data)"></el-button>
                    <el-button type="text" size="medium" icon="el-icon-edit" @click.stop="() => editOrg(node, data)"></el-button>
                    <el-button type="text" size="medium" icon="el-icon-delete" @click.stop="() => deleteOrg(node, data)"></el-button>
                  </span>
                </span>
              </span>
            </el-tree>
          </div>
        </el-card>
      </div>
      <!-- 机构信息详情 -->
      <div style="width: calc(100% - 380px);height: 80vh;">
        <el-tabs type="border-card">
          <el-tab-pane :label="$t('statics.机构信息')">
            <div>
              <el-form :rules="rules" :model="bchInfo" ref="bchInfoForm" label-width="120px" :disabled="bchInfoFormDisable">
                <c-col :span="24">
                  <c-col :span="12" style="padding-right: 20px;">

                    <c-col :span="20">
                      <el-form-item :label="$t('statics.核心机构编码')"  prop="accbch">
                        <c-input v-model="bchInfo.accbch" autocomplete="off" >
                        </c-input>
                      </el-form-item>
                    </c-col>

                    <c-col :span="20">
                      <el-form-item :label="$t('statics.机构类型')"  prop="bchtyp">
                        <c-select v-model="bchInfo.bchtyp" autocomplete="off"
                        dbCode="BCHTXT" :isCache="false"></c-select>
                      </el-form-item>
                    </c-col>

                     <c-col :span="20">
                      <el-form-item :label="$t('statics.机构中文名称')"  prop="bchname">
                        <c-input v-model="bchInfo.bchname" autocomplete="off" >
                        </c-input>
                      </el-form-item>
                    </c-col>

                     <c-col :span="20">
                      <el-form-item :label="$t('statics.业务编号标识')"  prop="bchflg">
                        <c-input v-model="bchInfo.bchflg" autocomplete="off" maxlength='2'  clearable >
                        </c-input>
                      </el-form-item>
                    </c-col>

                    <c-col :span="20">
                      <el-form-item :label="$t('statics.电话')"  prop="tel">
                        <c-input v-model="bchInfo.tel" autocomplete="off" >
                        </c-input>
                      </el-form-item>
                    </c-col>

                    <c-col :span="20">
                      <el-form-item :label="$t('statics.中文地址')"  prop="adr">
                        <c-input v-model="bchInfo.adr" autocomplete="off" >
                        </c-input>
                      </el-form-item>
                    </c-col>

                    <c-col :span="20">
                      <el-form-item :label="$t('statics.英文地址')"  prop="adren">
                        <c-input v-model="bchInfo.adren" autocomplete="off" >
                        </c-input>
                      </el-form-item>
                    </c-col>

                    <c-col :span="20">
                      <el-form-item :label="$t('statics.联行行号')"  prop="lhanum">
                        <c-input v-model="bchInfo.lhanum" autocomplete="off" >
                        </c-input>
                      </el-form-item>
                    </c-col>

                    <c-col :span="20">
                      <el-form-item :label="$t('statics.电证联行行号')"  prop="dzlhhh">
                        <c-input v-model="bchInfo.dzlhhh" autocomplete="off" >
                        </c-input>
                      </el-form-item>
                    </c-col>

                    <c-col :span="20">
                      <el-form-item :label="$t('statics.核心记账柜员')"  prop="bchusr">
                        <c-input v-model="bchInfo.bchusr" autocomplete="off" >
                        </c-input>
                      </el-form-item>
                    </c-col>

                    <c-col :span="20">
                      <el-form-item :label="$t('statics.自贸区标志')"  prop="zmqflg">
                        <c-radio-group v-model="bchInfo.zmqflg">
                          <el-radio label="X">{{$t('statics.是')}}</el-radio>
                          <el-radio label="">{{$t('statics.否')}}</el-radio>
                        </c-radio-group>
                      </el-form-item>
                    </c-col>

                    <c-col :span="20">
                      <el-form-item :label="$t('statics.机构负责人')"  prop="bchfzr">
                        <c-input v-model="bchInfo.bchfzr" autocomplete="off" >
                        </c-input>
                      </el-form-item>
                    </c-col>

                    <c-col :span="20">
                      <el-form-item :label="$t('statics.业务编号机构编码')"  prop="bchref">
                        <c-input v-model="bchInfo.bchref" autocomplete="off" >
                        </c-input>
                      </el-form-item>
                    </c-col>

                    <c-col :span="20">
                      <el-form-item :label="$t('statics.备注')">
                        <c-input :value="$t('statics.已启用此行')">
                        </c-input>
                      </el-form-item>
                    </c-col>
                  </c-col>

                  <c-col :span="12" style="padding-right: 20px;">
                  
                    <c-col :span="20">
                      <el-form-item :label="$t('statics.国结机构编码')"  prop="branch">
                        <c-input v-model="bchInfo.branch" autocomplete="off" >
                        </c-input>
                      </el-form-item>
                    </c-col>

                    <c-col :span="20">
                      <el-form-item :label="$t('statics.机构级别')"  prop="lev">
                        <c-select v-model="bchInfo.lev" autocomplete="off"
                        dbCode="bchlev" :isCache="false"></c-select>
                      </el-form-item>
                    </c-col>

                     <c-col :span="20">
                      <el-form-item :label="$t('statics.机构英文名称')"  prop="namen">
                        <c-input v-model="bchInfo.namen" autocomplete="off" >
                        </c-input>
                      </el-form-item>
                    </c-col>

                     <c-col :span="20">
                      <el-form-item :label="$t('statics.金融机构编码')"  prop="decnum">
                        <c-input v-model="bchInfo.decnum" autocomplete="off"   clearable >
                        </c-input>
                      </el-form-item>
                    </c-col>

                    <c-col :span="20">
                      <el-form-item :label="$t('statics.传真')"  prop="fax">
                        <c-input v-model="bchInfo.fax" autocomplete="off" >
                        </c-input>
                      </el-form-item>
                    </c-col>

                    <c-col :span="20">
                      <el-form-item :label="$t('statics.中文地址2')"  prop="adr2">
                        <c-input v-model="bchInfo.adr2" autocomplete="off" >
                        </c-input>
                      </el-form-item>
                    </c-col>

                    <c-col :span="20">
                      <el-form-item :label="$t('statics.英文地址2')"  prop="adren2">
                        <c-input v-model="bchInfo.adren2" autocomplete="off" >
                        </c-input>
                      </el-form-item>
                    </c-col>

                    <c-col :span="20">
                      <el-form-item :label="$t('statics.联行名称')"  prop="lhanam">
                        <c-input v-model="bchInfo.lhanam" autocomplete="off" >
                        </c-input>
                      </el-form-item>
                    </c-col>

                    <c-col :span="20">
                      <el-form-item :label="$t('statics.电证联行名称')"  prop="dzlhmc">
                        <c-input v-model="bchInfo.dzlhmc" autocomplete="off" >
                        </c-input>
                      </el-form-item>
                    </c-col>

                    <c-col :span="20">
                      <el-form-item :label="$t('statics.核心记账柜员2')"  prop="bchusr2">
                        <c-input v-model="bchInfo.bchusr2" autocomplete="off" >
                        </c-input>
                      </el-form-item>
                    </c-col>

                    <c-col :span="20">
                      <el-form-item :label="$t('statics.所属全辖机构')"  prop="qxbranch" :rules="[{required: bchInfo.branch != bchInfo.upbranch, message: this.$t('components.必输项') }]">
                        <c-input v-model="bchInfo.qxbranch"  autocomplete="off" >
                        </c-input>
                      </el-form-item>
                    </c-col>

                    <c-col :span="20">
                      <el-form-item :label="$t('statics.外汇局印单代码')"  prop="ydjcod">
                        <c-input v-model="bchInfo.ydjcod" autocomplete="off" >
                        </c-input>
                      </el-form-item>
                    </c-col>

                    <c-col :span="20">
                      <el-form-item :label="$t('statics.BIC编码')"  prop="swfcod">
                        <c-input v-model="bchInfo.swfcod" autocomplete="off" >
                        </c-input>
                      </el-form-item>
                    </c-col>
                  </c-col>

                  
                </c-col>
                <div style="width: 100%;display: flex;justify-content: center;">
                  <c-button
                    type="primary"
                    style="margin-right: 10px"
                    @click="handleSub()"
                    v-if="this.subBtnVifFlg"
                    >{{ $t('statics.提 交') }}</c-button
                  >
                  <c-button
                    type="primary"
                    @click="handleCancel()"
                    v-if="this.subBtnVifFlg"
                    >{{ $t('statics.返 回') }}</c-button
                  >
                </div>
              </el-form>
            </div>
          </el-tab-pane>
          
          <el-tab-pane :label="$t('statics.扩展信息')">
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import event from "../event";
import Jgdetails from "./Jgdetails";
import BchModel,{Pattern}  from "../model";
import CodeTable from "~/config/CodeTable";
import Api from "~/service/Api"

export default {
  inject: ["root"],
  
  components: {
    'm-jgdetails': Jgdetails
  },

  provide() {
    return {
      root: this,
    };
  },

  data() {
    return {
      rules: Pattern,
      codes: { ...CodeTable },
      orgTree: [],
      defaultProps: {
        children: 'children',
        label: this.$i18n.locale === 'zh' ? 'bchname':'namen',
      },
      bchInfo: new BchModel().data.bchInfo,

      subBtnVifFlg: false,
      bchInfoFormDisable: true,
      nodeData:null,
		  nodeP:null,
      expandedKeys:[],
      queryLoading:true,
    }
  },
  created() {
    this.getOrgTree()
  },
  methods: {
    ...event,
    clickNodes(data,node) {
      this.nodeData = data;
		  this.nodeP = node;
      this.getJgDetails(data);
      (this.subBtnVifFlg = false), (this.bchInfoFormDisable = true);
    },
    nameTrim(name, len) {
      if (name.level <= 2) {
        return name.label
      }
      let nam = name.label + "";
      if (nam.length > len) {
        return nam.substring(0, len) + "···";
      }
      return nam
    },



    handleSub(){

      this.$refs['bchInfoForm'].validate((valid) => {
          if (valid) {
            let uri=""
            let $this = this
            if (this.bchInfo.id ==null ||this.bchInfo.id==""){
              //新增
              uri='/admin/bch/addBch'
              Api.post(uri, this.bchInfo).then(res=>{
                if (res.respCode == SUCCESS) {
                  this.$notify.success("添加成功！");
                  let addNodedata={
                    "id":res.data.id,
                    "inr":res.data.inr,
                    "branch":res.data.branch,
                    "qxbranch": res.data.qxbranch,
                    "bchname": res.data.bchname,
                    }
                  this.$nextTick(() => {
                    //插入父节点下最后
                    this.$refs.treeRef.append(addNodedata,this.nodeP);
                    this.$refs.treeRef.setCurrentNode(addNodedata,true);
                    this.expandedKeys.push(addNodedata.id);
                    (this.subBtnVifFlg = false), (this.bchInfoFormDisable = true);
                  })
                }else{
                  this.$notify.error("添加失败！"+res.respMsg);
                }
			      	 }
            )
            }else{
              //修改
              uri='/admin/bch/updateBchById'
              Api.post(uri, this.bchInfo).then(res=>{
                if (res.respCode == SUCCESS) {
                  this.$notify.success("修改成功！");
                  this.nodeData.id = this.bchInfo.id;
			      		  this.nodeData.inr = this.bchInfo.inr;
			      		  this.nodeData.branch = this.bchInfo.branch;
                  this.nodeData.qxbranch = this.bchInfo.qxbranch;
                  this.nodeData.bchname = this.bchInfo.bchname;

                  this.clickNodes(this.nodeData,this.nodeP)
			      	  }else{
                  this.$notify.error("修改失败！"+res.respMsg);
                }
              }
            )
            }
          } else {
            this.$notify.error(validMsg);
            return false;
          }
        });
    },

    handleCancel(){

      //this.$refs.treeRef.setAttribute(current-node-key,this.nodeData.id)
      this.clickNodes(this.nodeData,this.nodeP)

    },

    addOrg(node, data) {
      console.log("node----", node);
      //增加树节点
      if (!node.isCurrent) {
        this.$message({
          message: this.$t('statics.请选中当前节点再操作！'),
          center: true,
          type: "warning",
        });
        return;
      }

      this.$refs.bchInfoForm.resetFields();
      this.bchInfo.id = "";
      this.bchInfo.qxbranch = data.branch;
      console.log("this.menuInfo--",this.bchInfo);
      (this.subBtnVifFlg = true), (this.bchInfoFormDisable = false);
    },

    editOrg(node, data) {
      console.log(data, 1111111111)
      console.log("node----", node);
      //增加树节点
      if (!node.isCurrent) {
        this.$message({
          message: this.$t('statics.请选中当前节点再操作！'),
          center: true,
          type: "warning",
        });
        return;
      }

      //this.$refs.menuInfoForm.resetFields();
      this.getJgDetails(data);
      (this.subBtnVifFlg = true), (this.bchInfoFormDisable = false);
    },
    deleteOrg(node, data) {
      if (!node.isCurrent) {
        this.$message({
          message: this.$t('statics.请选中当前节点再操作！'),
          center: true,
          type: "warning",
        });
        return;
      }
      //删除树节点
      if (data.nodes != null) {
        this.deleteMsg("包含以下子节点，确定一起删除？", data);
      } else {
        this.deleteMsg("确定删除？", data);
      }
    },

    deleteMsg(msg, data) {
      //删除通讯
      var $this = this;
      this.$confirm(msg, "提示", {

        confirmButtonText: this.$t('statics.确定'),
        cancelButtonText: this.$t('statics.取消'),
        type: "warning",
      })
        .then(() => {
          //发送删除请求
          Api.post('/admin/bch/deleteBchById', { "id": data.id }).then(
            (res) => {
              if (res.respCode == SUCCESS) {
                this.$notify.success("删除成功！");
                $this.$refs.treeRef.remove(data);
                $this.$refs.bchInfoForm.resetFields();
              } else {
                this.$notify.error("删除失败！"+res.respMsg);

              }
            }
          );
        })
        .catch(() => {
          this.$message({ type: "info", message: this.$t('statics.已取消删除') });
        });
    },
    
  }
}
</script>
<style scoped lang="less">
::v-deep .el-card__body {
  width: 100%;
  height: calc(80vh - 42px);
  overflow-x: auto;
  overflow-y: auto;
}

.tree-wrap {
  width: 100%;
  height: 100%;

  .top {
    width: 100%;
    justify-content: space-between;

    .el-tree-node__label {
      width: calc(100% - 100px);
      font-size: 12px;
      word-break: normal;
      white-space: nowrap;
      overflow: hidden;
    }
  }
}

.custom-tree-node>span .el-button {
  margin-left: 0px;
  padding: 0px 5px !important;
}

.eibs-tab ::v-deep .el-tabs__content {
  overflow: auto;
}
</style>