<template>
  <div class="globalMask" is="page">
    <!--常用收款人-->
    <div v-if="!status" class="usedPayeePage">
      <container>
          <button @click="jump()" class="wt cancel iconfont plus flex flex_ct">添加收款人</button>
      </container>
      <div class="usedPayee flex flex_sb">
        <span class="usedPayee-title">收款人列表</span>
        <div class="usedPayee-function flex flex_sb flex_one">
          <button class="edit" v-show="!editOpen" @click="edit">编辑</button>
          <div class="btn-group" v-show="editOpen">
            <button class="del" @click="del">删除</button>
            <button class="finish" @click="finish">完成</button>
          </div>
        </div>
      </div>
      <div class="usedPayee-lists">
        <div v-if="noCantact" class="flex flex_ac flex_ct noCantact">
          您还没有添加常用联系人
        </div>
        <div v-if="!noCantact" v-for="(item,index) in groupData" class="usedPayee-list-item wt border-bottom flex flex_ac">
          <div v-show="editOpen" class="checkBox" @chk="getChks" :label="index" :accno="item.cardNum" is="check"></div>
          <img src="../../../static/icons/usedPayee.png" class="usedPayee-lists-item-icon" alt="">
          <dl class="usedPayee-lists-item-info flex_one" @click="jump(item)">
            <dt>{{item.payeename}}
              <span class="usedPayee-lists-item-acco fr financialProductTip">{{'尾号 '+ item.cardNum | subLast }}</span>
            </dt>
            <dd class="financialProductTip">
              {{item.openBank}}
            </dd>
          </dl>
        </div>
      </div>
    </div>
    <!--添加/修改常用收款人-->
    <div v-if="status" class="addUsedPayee space-top">
      <rows label="收款户名" @blur="getReciveName" placeholder="请输入收款户名" :value="formData.payeename">
      </rows>
      <rows label="收款账号" @blur="getReciveNum" placeholder="请输入收款账号" :value="formData.cardNum">
      </rows>
      <openBanks :default="formData.bankId" @obank="getBankId">
      </openBanks>
      <div class="btns">
        <button type="button" @click="submit" class="button">{{add?"添加":"修改"}}</button>
        <button type="button" @click="cancel" class="cancel">取消</button>
      </div>
    </div>
  </div>
</template>
<script>
    import base from '../../lib/base'
    export default {
      name: "reciver",
      props:['from'],
      data(){
        return{
          noCantact:false,
          add:'',
          formData:{
            payeename:'',
            bankId:'',
            cardNum:'',
            oldcardnum:''
          },
          groupData:[{
            letter:'',
          }],
          list:[
            {
              payeename:'',
              openBank:'',
              cardNum:''
            }
          ],
          editOpen:false,
          accnos:[],
          usedPayeeLists:[
            {
              id:'000001',
              acco:"622888888880001",
              bank:'阜新银行1',
              name:'东华软件1'
            },
            {
              id:'000002',
              acco:"622888888880002",
              bank:'阜新银行2',
              name:'东华软件2'
            },
            {
              id:'000003',
              acco:"622888888880003",
              bank:'阜新银行3',
              name:'东华软件3'
            },
            {
              id:'000004',
              acco:"622888888880004",
              bank:'阜新银行4',
              name:'东华软件4'
            }
          ],
          baseUrl:base.config.baseUrl,
          status:"",
          // recive:{},
        }
      },
      beforeCreate:function () {
        document.title = '常用收款人'
      },
      created(){
        //页面传递过来的参数
        console.log(this.$route.query)
        this.contactList()
      },
      filters:{
        subLast(value){
          var str = value.toString()
          return '尾号 ' + str.substring(str.length-4)
        },

      },
      methods:{
        jump(params){
          console.log(params)
          //添加收款人
          if (params===undefined){
              document.title = '添加常用收款人'
              this.status = true
              this.add = true
              return
          }
          if (this.editOpen){
            return
          }
          //选择收款人
          if(this.from=='transfer'){
            //选择收款人后，关闭弹出框 name是收款人姓名
            this.$emit('hasSel',params)
            return
          }
          document.title = '常用收款人修改'
          //更改收款人信息
          this.status = true
          this.add = false
          this.formData = params
          this.formData.oldcardnum = params.cardNum
          // this.formData.bankId = '103100000026'
          this.formData.bankId = params.payeebkno
          this.formData.openBank = params.openBank
          console.log(this.formData)
        },
        //常用收款人
        contactList(cb){
          // this.recive = true
          base.$.http({
            app:'wxPayeeMaintainService',
            func:'stapleContactList',
            // flag:1
          },data=>{
            data=JSON.parse(data);
            console.log(data)
            if (data.error) {
              base.msg.alert(data.error);
              return;
            }
            if(0==data.size){
              //base.msg.alert("您没有联系人")
              this.noCantact = true
              return;
            }
            this.noCantact = false
            var arr = []
            for(var i = 0;i<data.list.length;i++){
              var payeename = data.list[i].payeename
              var openBank = data.list[i].bankname
              var cardNum = data.list[i].payeeaccno
              var payeebkno = data.list[i].payeebkno
              var flag = data.list[i].flag
              var obj = {}
              obj.payeename = payeename
              obj.openBank = openBank
              obj.cardNum = cardNum
              obj.flag = flag
              obj.payeebkno = payeebkno
              arr.push(obj)
            }
            // this.groupData = base.letter.group(arr)
            this.groupData = arr
            console.log(this.groupData)
            cb && cb()
          })
        },
        getChks(e){
          console.log(e)
          var index = this.accnos.indexOf(e.accno)
          if (e.checked){
              this.accnos.push(e.accno)
              return
          }
          this.accnos.splice(index,1)
        },
        edit(){
          this.editOpen = true
        },
        del(){
          var str = "";
          (this.accnos).forEach((item,index)=>{
            if (index<this.accnos.length-1){
              str += "'"+item+"'"+','
              return
            }
            str += "'"+item+"'"
          })
          // console.log(str)
          if (this.accnos.length){
            this.accnos=[]
            base.msg.confirm('您确定要删除此条记录？删除后将不可恢复，望慎重！',() =>{
                //从数据库删除此条记录
                base.$.http({
                  app:'wxPayeeMaintainService',
                  func:'delcontact',
                  reciveraccno:str
                },data=>{
                    data=JSON.parse(data);
                    console.log(data)
                    if(data.error){
                      base.msg.alert(data.error);
                      return;
                    }
                    this.contactList()
                    base.msg.alert("删除成功！")
                    this.editOpen = false
                })
            })
            return
          }
          base.msg.alert('请选择您想删除的用户！')
        },
        finish(){
          this.editOpen = false
        },
        getReciveName(e){
          this.formData.payeename = e.value
          // console.log(e)
        },
        getReciveNum(e){
          // console.log(e)
          this.formData.cardNum = e.value
        },
        //开户银行id
        getBankId(obj){
          console.log(obj)
          this.formData.bankId = obj.code
        },
        submit(){
          console.log(this.formData)
          // var that=this;
          this.flag="";
          this.outsidebkno="";
          var fuxinbkno="313229000008";//阜新银行清算行行号
          if(this.formData.payeename ==''||null==this.formData.payeename){
            base.msg.alert('收款户名不能为空')
            return;
          }
          var reg=/^[\u2E80-\u9FFF]+$/;//Unicode编码中的汉字范围
          if(!reg.test(this.formData.payeename)){
            base.msg.alert('您输入的收款户名格式不正确')
            return;
          }
          if(this.formData.payeename.length>24){
            base.msg.alert('您输入的收款户名过长')
            return;
          }
          if(!this.formData.bankId){
            base.msg.alert('请选择开户银行')
            return;
          }
          if(this.formData.cardNum==''||null==this.formData.cardNum){
            base.msg.alert('收款账号不能为空')
            return;
          }
          var rug=/^[0-9]*$/;//只能为数字
          if(!rug.test(this.formData.cardNum)){
            base.msg.alert('您输入的收款账号格式不正确')
            return;
          }
          if(this.formData.cardNum.length>25){
            base.msg.alert('您输入的收款账号过长')
            return;
          }
          if(this.formData.bankId==fuxinbkno){
            this.flag="1";
            this.outsidebkno=fuxinbkno;
          }else {
            this.flag="2";
            this.outsidebkno=this.formData.bankId;
          }
          //判断联系人是否存在
          base.$.http({
              app:'wxPayeeMaintainService',
              func:'contactIsExist',
              reciveraccno:this.formData.cardNum,
              oldacctno:this.add?"":this.formData.oldcardnum
            },data=>{
              data=JSON.parse(data);
              console.log(data)
              if(data.error){
                base.msg.alert(data.error);
                return;
              }
              if("0"!=data.size){
                base.msg.alert("该联系人已经存在")
                return;
              }
              //更新常用收款人信息
              if (!this.add){
                this.update()
                return
              }
              //添加常用收款人
              this.addContact()
          })
        },
        addContact(){
          base.$.http({
            app:'wxPayeeMaintainService',
            func:'addContact',
            recivername:this.formData.payeename,
            reciveraccno:this.formData.cardNum,
            bkno:this.outsidebkno,
            flag:this.flag
          },data=>{
            data=JSON.parse(data);
            console.log(data)
            if(data.error){
              base.msg.alert(data.error);
              return;
            }
            base.msg.alert("添加成功！")
            document.title = '常用收款人'
            this.status = false
            this.contactList()
            this.formData = {}
          })
        },
        update(){
          base.$.http({
            app:'wxPayeeMaintainService',
            func:'modifyContact',
            recivername:this.formData.payeename,
            reciveraccno:this.formData.cardNum,
            bkno:this.outsidebkno,
            flag:this.flag,
            oldacctno:this.formData.oldcardnum
          },data=>{
            data=JSON.parse(data);
            console.log(data)
            if(data.error){
              base.msg.alert(data.error);
              return;
            }
            base.msg.alert("修改成功！")
            document.title = '常用收款人'
            this.formData = {}
            this.contactList()
            this.status = false
          })
        },
        cancel(){
          document.title = '常用收款人'
          this.status = false
          this.formData = {}
        }
      }
    }
</script>
<style scoped>
  @import "../../css/style.css";
  .btns{
    margin-top: .9rem;
  }
  .container{
    background: transparent;
  }
  .noCantact{
    padding-top: 1rem;
    color: #999;
  }
</style>
