<style>
 .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-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' :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' :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>{{item.AccountClassify==1? $t('fnc.a_ptzhanghu') : $t('fnc.a_yhzhanghu')}}</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.RB_Group_id;    //集团ID
			this.msg.EmpId=this.$route.query.id;
			this.msg.Type=this.$route.query.type;
			this.addMsg.ObjID=this.$route.query.id;
			this.addMsg.Type=this.$route.query.type;
			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{
					this.nameA= this.$t("ground.pingtaimingcheng")
					this.nameB= this.$t("ground.yonghumingcheng")
					this.nameC= this.$t("fnc.ptAcc")
					this.nameD= this.$t("fnc.accBming")
				}
			},
			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(){  //添加角色
				this.addMsg.ObjID=this.$route.query.id;
					if(this.addMsg.AccountClassify!='3'){
							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(thi.$t('pub.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';
        }
		}
	}
</script>