<style>
  @import "./css/cssReset.css";

  .empBankAccountTableLayer {
    overflow: auto;
    position: fixed;
    height: 200px;
    z-index: 50;
    bottom: 0;
    left: 50px;
    border-top: 3px solid #38425d;
    background-color: #FFFFFF;
    padding: 10px 10px 0;
    width: 100%;
  }

  .empBankAccountTableLayer .el-form-item__label {
    font-size: 12px !important;
  }

  .empBankAccountTableLayer>p {
    border-left: 3px solid #E95252;
    text-indent: 15px;
    height: 16px;
    padding-right: 50px;
    font-family: 'PingFangSc-Fine';
    font-size: 16px;
    margin-bottom: 20px;
    line-height: 14px;
    color: #000;
  }

  .empBankAccountTable {
    width: 100%;
    min-width: 1500px;
    font-size: 14px;
    color: #333;
    background: #ccc;
  }

  .empBankAccountTable tr {
    border-bottom: 2px solid #333;
  }

  .empBankAccountTable tr th {
    background: #BDBDBD;
    height: 30px;
    font-size: 12px;
    text-align: left;
    text-indent: 20px;
  }

  .empBankAccountTable tr {
    background: #fff;
    text-align: left;
  }

  .empBankAccountTable tr:nth-child(2n+1) {
    background: #E5E5E5;
  }

  .empBankAccountTable tr td {
    height: 60px;
    padding-left: 20px;
    border-right: 1px solid #DCDCDC;
    border-bottom: 1px solid #DCDCDC;
  }

  .empBankAccountIcon button {
    width: 30px;
    height: 30px;
    border-radius: 4px;
  }

  .empBankAccountIcon .el-button--primary {
    padding: 5px;
    margin: 0;
    font-size: 14px !important;
  }

  .empBankAccountIcon .el-button+.el-button {
    margin-left: 0 !important;
  }

</style>
<template>
  <div class="flexOne">
    <div class="empBankAccountTableLayer" v-show="outerVisible">
      <p>
        {{dialogTitle}}
        <span class="fr">
          <button class="hollowFixedBtn"
            @click="outerVisible = false,resetForm('addMsg')">{{$t('pub.cancelBtn')}}</button>
          <button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
        </span>
      </p>
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="90px" style="padding-right: 80px">
        <el-row>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="$t('fnc.zhfenlei')" prop="AccountClassify">
              <el-select v-model='addMsg.AccountClassify' :placeholder="$t('pub.pleaseSel')" @change='changeTitle'>
                <el-option :label='$t("fnc.yinhang")' value='2' key='2'></el-option>
                <el-option :label='$t("ground.xunizhanghu")' value='3' key='3'></el-option>
                <el-option label='微信支付宝' value='4' key='4'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" v-if='addMsg.AccountClassify==2' :gutter="35">
            <el-form-item :label="$t('fnc.ssjigou')" prop="BankName">
              <el-input type="text" v-model="addMsg.BankName" :placeholder="$t('ground.liruicbc')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" v-if='addMsg.AccountClassify!=3 && addMsg.AccountClassify!=4' :gutter="35">
            <el-form-item :label="nameA" prop="OpenBankName">
              <el-input type="text" v-model="addMsg.OpenBankName" :placeholder="$t('ground.liruzhihang')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" v-if='addMsg.AccountClassify!=3 && addMsg.AccountClassify!=4' :gutter="35">
            <el-form-item :label="nameB" prop="AccountHolder">
              <el-input type="text" v-model="addMsg.AccountHolder"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="nameC" prop="CardNum">
              <el-input type="text" v-model="addMsg.CardNum"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :gutter="35">
            <el-form-item :label="nameD" prop="AccountAlias">
              <el-input type="text" v-model="addMsg.AccountAlias"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="query-box">
      <ul>
        <li>
          <input type="button" @click="outerVisible = true,dialogTitle=$t('ground.xinzengzhanghu'),resetForm('addMsg')"
            class="normalBtn" :value="$t('pub.addBtn')" />
        </li>
      </ul>
    </div>
    <table class="empBankAccountTable" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th>{{$t("ground.zhanghumingcheng")}}</th>
        <th>{{$t("fnc.w_zhbieming")}}</th>
        <th>{{$t("ground.zhanghuleibie")}}</th>
        <th>{{$t("ground.suoshujigou")}}</th>
        <th>{{$t("fnc.acc")}}</th>
        <th>{{$t("admin.admin_status")}}</th>
        <th>{{$t("ground.leijijiaoyi")}}</th>
        <th>{{$t("admin.admin_operate")}}</th>
      </tr>
      <tr v-for="(item,index) in list">
        <td>{{item.OpenBankName}}</td>
        <td>{{item.AccountAlias}}</td>
        <td>
          <span v-if="item.AccountClassify==1">{{$t('fnc.a_ptzhanghu')}}</span>
          <span v-if="item.AccountClassify==2">银行账户</span>
          <span v-if="item.AccountClassify==3">虚拟账户</span>
          <span v-if="item.AccountClassify==4">微信支付宝</span>
        </td>
        <td>{{item.BankName}}</td>
        <td>{{item.CardNum}}
          <br />{{item.AccountHolder}}</td>
        <td>
          <span v-if='item.Status!=0' style="color: #E95252;">{{$t('pub.fressSel')}}</span>
          <span v-if='item.Status==0' style="color: #09D49D;">{{$t('pub.normalSel')}}</span>
        </td>
        <td style="color: #FF9C00;">￥{{moneyFormat(item.PayMoney)}}</td>
        <td class="empBankAccountIcon">
          <el-button-group>
            <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top-start">
              <el-button @click="outerVisible = true,dialogTitle=$t('ground.xiugaizhanghu'),updateData(item.ID)"
                type="primary" style='background:#409EFF; border-color:#409EFF' icon="iconfont icon-bianji-smal">
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="item.Status=='1'? $t('fnc.qiyong'):$t('pub.fressSel')"
              placement="top-start">
              <el-button v-if='item.Status==1' @click="deleteData(item.ID)" type="primary"
                style='background:#09D49D; border-color:#09D49D' icon="iconfont icon-qidong"></el-button>
              <el-button v-if='item.Status==0' @click="deleteData(item.ID)" type="primary"
                style='background:#E95252; border-color:#E95252' icon="iconfont icon-dongjie"></el-button>
            </el-tooltip>
          </el-button-group>
        </td>
      </tr>
    </table>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
      layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total>
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        nameA: this.$t("ground.zhanghumingcheng2"),
        nameB: this.$t("fnc.khuren"),
        nameC: this.$t("ground.kahao"),
        nameD: this.$t("fnc.accBming"),
        switchValue: '1',
        dialogTitle: '',
        insideDialogTxt: this.$t("tips.saveYes"),
        outerVisible: false,
        innerVisible: false,
        isRight: true,
        versions: [],
        total: 0,
        currentPage: 1,
        //请求数据
        msg: {
          BranchId: '-1',
          EmpId: '-1',
          BankId: '',
          AccountHolder: '',
          AccountAlias: '',
          pageIndex: 1,
          pageSize: 15,
          Type: '',
        },
        getCompanyMsg: {
          RB_Group_Id: '0',
          Status: '0',
        },
        getUserMsg: {
          RB_Branch_id: '-1',
        },
        //返回数据
        list: [],
        bankList: [],
        layerItem: [],
        addMsg: {
          Id: '0',
          ObjID: '-1',
          BankId: '-1',
          OpenBankName: '',
          BankName: '',
          AccountHolder: '',
          CardNum: '',
          AccountAlias: '',
          AccountType: '1',
          AccountClassify: '2',
          Type: '9',
        },
        rules: {
          BankName: [{
            required: true,
            message: this.$t("ground.qingtianxieyh"),
            trigger: 'blur'
          }],
        }
      }
    },
    mounted() {
      let userInfo = this.getLocalStorage();
      this.getUserMsg.RB_Group_id = this.getCompanyMsg.RB_Group_Id = userInfo.Group_Id; //集团ID
      this.msg.EmpId = this.$route.query.id ? this.$route.query.id : userInfo.Id;
      this.msg.Type = this.$route.query.type ? this.$route.query.type : 10;
      this.addMsg.ObjID = this.$route.query.id ? this.$route.query.id : userInfo.Id;
      this.addMsg.Type = this.$route.query.type ? this.$route.query.type : 10;
      this.getBank();
      this.getList();
      this.changeTitle()
    },
    methods: {
      changeTitle() {
        if (this.addMsg.AccountClassify == 1) {
          this.nameA = this.$t("ground.pingtaimingcheng")
          this.nameB = this.$t("ground.yonghumingcheng")
          this.nameC = this.$t("fnc.ptAcc")
          this.nameD = this.$t("fnc.accBming")
          this.addMsg.AccountType = '1'
        } else if (this.addMsg.AccountClassify == 2) {
          this.nameA = this.$t("ground.zhanghumingcheng2")
          this.nameB = this.$t("fnc.khuren")
          this.nameC = this.$t("ground.kahao")
          this.nameD = this.$t("fnc.accBming")
        } else if (this.addMsg.AccountClassify == 3) {
          this.nameA = this.$t("ground.pingtaimingcheng")
          this.nameB = this.$t("ground.yonghumingcheng")
          this.nameC = this.$t("fnc.ptAcc")
          this.nameD = this.$t("fnc.accBming")
        } else if (this.addMsg.AccountClassify == 4) {
          this.nameA = this.$t("ground.pingtaimingcheng")
          this.nameB = this.$t("ground.yonghumingcheng")
          this.nameC = "账号"
          this.nameD = "名称"
        }
      },
      getList() { //获取列表数据
        this.apipost("admin_get_GetEmpBankAccountPageList", this.msg, res => {
          if (res.data.resultCode == 1) {
            this.list = res.data.data.pageData;
            this.total = res.data.data.count;
          } else {}
        }, err => {})
      },
      getBank() {
        this.apipost('FinancialInstitutions_post_GetList', {
          Type: 0
        }, res => {
          if (res.data.resultCode == 1) {
            this.bankList = res.data.data;
          } else {}
        }, err => {})
      },
      addData() { //添加角色
        let userInfo = this.getLocalStorage();
        this.addMsg.ObjID = this.$route.query.id ? this.$route.query.id : userInfo.Id;
        if (this.addMsg.AccountClassify != '3' && this.addMsg.AccountClassify != '4') {
          if (this.addMsg.OpenBankName == '') {
            this.$message.error(this.$t('visaT.Pleasefillin') + this.nameA)
            return
          }
          if (this.addMsg.AccountHolder == '') {
            this.$message.error(this.$t('visaT.Pleasefillin') + this.nameB)
            return
          }
        }
        if (this.addMsg.CardNum == '') {
          this.$message.error(this.$t('visaT.Pleasefillin') + this.nameC)
          return
        }
        if (this.addMsg.AccountAlias == '') {
          this.$message.error(this.$t('visaT.Pleasefillin') + this.nameD)
          return
        }
        this.apipost("admin_post_SetEmpBankAccount", this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.$message.success(res.data.message)
            this.outerVisible = false;
            this.getList()
            this.resetForm('addMsg');
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      updateData(id) { //修改角色
        this.apipost('admin_get_GetEmpBackAccount', {
          BAId: id
        }, res => {
          if (res.data.resultCode == 1) {
            this.addMsg = res.data.data;
            this.addMsg.AccountType = res.data.data.AccountType.toString();
            this.addMsg.AccountClassify = res.data.data.AccountClassify.toString();
            this.addMsg.BankId = res.data.data.BankId
            this.changeTitle()
          } else {}
        }, err => {})
        //			    this.addMsg = this.dataList[index]
        //			    this.addMsg.Status = this.dataList[index].Status.toString();
      },
      deleteData(id) {
        this.$confirm(this.$t('ground.querenqiyong'), '提示', {
          confirmButtonText: this.$t('pub.sureBtn'),
          cancelButtonText: this.$t('pub.cancelBtn'),
          type: 'warning'
        }).then(() => {
          this.apipost('admin_post_DelEmpBankAccount', {
            BAId: id
          }, res => {
            if (res.data.resultCode == 1) {
              this.$message.success(this.$t('tips.saveYes'))
              this.getList();
            }
          }, err => {})

        }).catch(() => {
          this.$message.info(this.$t('ground.yiquxiao'))
        });
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1
      },
      submitForm(addMsg) { //提交创建、修改表单
        this.$refs[addMsg].validate((valid) => {
          if (valid) {
            this.addData();

          } else {
            return false;
          }
        });
      },
      closeChangeMachie(done) { //弹出框关闭初始化弹框内表单
        done();
        this.resetForm('addMsg');
      },
      resetForm(formName) { //弹出框取消 初始化谈框内表单
        this.$refs[formName].resetFields();
        this.addMsg.AccountType = '1';
        this.addMsg.AccountClassify = '2';
        this.addMsg.Id = '0';
        this.addMsg.ObjID = '-1';
        this.addMsg.BankId = '-1';
        this.addMsg.OpenBankName = '';
        this.addMsg.BankName = '';
        this.addMsg.AccountHolder = '';
        this.addMsg.CardNum = '';
        this.addMsg.AccountAlias = '';

      }
    }
  }

</script>
