<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-tooltip class="item" effect="dark" :content="$t('ground.mingxi')" placement="top-start">
              <el-button  type="primary"  style='background:#E6A014; border-color:#E6A014' icon="iconfont icon-rizhi1"  ></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=userInfo.Id;
      this.msg.Type=10;
      this.addMsg.ObjID=userInfo.Id;
      this.addMsg.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 => {})
      },
      // getCompany(){
      // 	this.apipost('admin_get_BranchGetList',this.getCompanyMsg,res=>{
      // 		if(res.data.resultCode==1){
      // 				this.companyList=res.data.data;
      // 		}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.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>
