<template>
  <div class="app-container" :style="{height:height+'px'}">
    <van-nav-bar
      title="银行账户修改"
      left-arrow
      fixed
      placeholder
      @click-left="onClickLeft"
    />
    <van-form @submit="submitBank">
      <van-field v-model="form.bankCardName" label="开户姓名" placeholder="请输入姓名" required :rules="[{ required:true }]"/>
      <van-field v-model="form.bankCardNum" label="开户账号" placeholder="请输入开户账号" required :rules="[{ required:true }]"/>

      <van-field
        v-model="accountType"
        is-link
        readonly
        required
        :rules="[{ required:true }]"
        label="账户类型"
        placeholder="请选择账户类型"
        @click="showAccountType = true"
      />
      <van-popup v-model:show="showAccountType" position="bottom">
        <van-picker
          show-toolbar
          value-key="dictLabel"
          :columns="accountTypeOption"
          @confirm="onConfirmAccountType"
          @cancel="showAccountType = false"
        />
      </van-popup>

      <van-divider>银行信息</van-divider>
      <van-field
        v-model="bankType"
        is-link
        readonly
        required
        :rules="[{ required:true }]"
        label="所属银行"
        placeholder="请选择所属银行"
        @click="showBankType = true"
      />
      <van-popup v-model:show="showBankType" position="bottom">
        <van-picker
          show-toolbar
          value-key="dictLabel"
          :columns="bankTypeOption"
          @confirm="onConfirmBankType"
          @cancel="showArea = false"
        />
      </van-popup>

      <van-field
        v-model="sheng"
        is-link
        readonly
        label="开户省市"
        placeholder="请选择开户省市"
        @click="showSheng = true"
      />
      <van-popup v-model:show="showSheng" position="bottom">
        <van-picker
          show-toolbar
          value-key="label"
          :columns="shengOption"
          @confirm="onConfirmSheng"
          @cancel="showSheng = false"
        />
      </van-popup>

      <van-field v-model="form.bankDeposit" label="关键词" placeholder="请输入开户行地址关键词"/>
      <van-field
        v-model="form.bankAddress"
        label="开户银行"
        placeholder="请输入开户银行"
        required
        :rules="[{ required:true }]"
        readonly
        @click="showBankAddress = true"
      >
        <template #button>
          <van-button size="small" type="primary" native-type="button" @click="searchBankAddress">点击检索</van-button>
        </template>
      </van-field>
      <van-popup v-model:show="showBankAddress" position="bottom">
        <van-picker
          show-toolbar
          value-key="bankDeposit"
          :columns="bankAddressOption"
          @confirm="onConfirmBankAddress"
          @cancel="showBankAddress = false"
        />
      </van-popup>


      <van-field v-model="form.payeePaymentLines" label="联行号" placeholder="请输入开户银行" required :rules="[{ required:true }]"/>

      <div class="submit">
        <van-button round block type="info" color="#007E72" native-type="submit">保存</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { getMember , userUpdate , options , realtimeList } from "@/api/user/index";
import { getInfo } from "@/api/login/index";
import {Dialog} from "vant";
import {depositList, realtimeBackList} from "@/api/register";
  export default {
    name: "bankInformation",
    data() {
      return {
        height:0,
        tel:'',
        fileList:[],
        form:{
          bankCardName:'',
          bankCardNum:'',
          bankAddress:'',
          id:'',
        },
        hcAreaInfoFieldName: {
          text: "label",
          value: "value",
          children: "children",
        },
        bankTypeOption:[],
        sheng:'',
        shi:'',
        bankType:'',
        accountType:'',
        bankDeposit:'',
        showBankType:false,
        showSheng :false,
        shengOption:options,
        showShi :false,
        shiOption:[],
        showBankAddress :false,
        accountTypeOption:[],
        showAccountType :false,
        bankAddressOption:[],
      };
    },
    created() {
      this.height = document.body.clientHeight;
      this.getDicts("bank_type_all").then(response => {
          this.bankTypeOption = response.data;
      });
      this.getDicts("bank_account_type").then(response => {
          this.accountTypeOption = response.data;
      });
      this.getInfo();
    },
    methods: {
      searchBankAddress(){
        let data = {
          sheng:this.form.sheng,
          shi:this.form.shi,
          bankType:this.form.bankType,
          bankDeposit:this.form.bankDeposit,
        }
        depositList(data).then(response => {
          if (response.rows.length<1){
            if (this.form.sheng==''||this.form.shi==''){
              this.$toast({
                icon: 'fail', // 找到自己需要的图标
                message: '请选择省市',
                duration:"1000",
              })
              return;
            }
            if (this.form.bankDeposit==''){
              this.$toast({
                icon: 'fail', // 找到自己需要的图标
                message: '请输入关键词',
                duration:"1000",
              })
              return;
            }
            realtimeBackList(data).then(response2 => {
              console.log(response2)
              this.bankAddressOption = response2.data;
            });
          }else{
            this.bankAddressOption = response.rows;
          }
        });
      },
      getInfo(){
        getInfo().then(response => {
          getMember(response.user.userId).then(response => {
            console.log(response)
            this.form = response.data;
            this.bankType = this.selectDictLabel(this.bankTypeOption,response.data.bankType);
            this.accountType = this.selectDictLabel(this.accountTypeOption,response.data.accountType);
            this.form.bankCardName = response.data.bankCardName;
            this.form.bankCardNum = response.data.bankCardNum;
            this.form.bankAddress = response.data.bankAddress;
            this.form.id = response.data.id;
          });
        });
      },
      submitBank(){
        userUpdate(this.form).then(response => {
          console.log(response)
          if (response.code == 200){
            Dialog.confirm({
              title: '系统提示',
              message: '修改成功',
              confirmButtonText: '确定',
            })
          }
        });
      },
      onConfirmBankType(value){
        this.showBankType = false;
        this.form.bankAddress = '';
        this.form.payeePaymentLines = '';
        this.bankType = value.dictLabel;
        this.form.bankType = value.dictValue;
      },
      onConfirmSheng(value){
        console.log(value)
        this.showSheng = false;
        this.form.sheng = value[0];
        this.form.shi = value[1];
        this.sheng = value.join('/');
      },
      onConfirmBankAddress(value){
        console.log(value)
        this.form.bankAddress = value.bankDeposit;
        this.form.payeePaymentLines = value.payeePaymentLines;
        this.showBankAddress = false;
      },
      onConfirmAccountType(value){
        console.log(value)
        this.form.accountType = value.dictValue;
        this.accountType = value.dictLabel;
        this.showAccountType = false;
      },

    },
  };
</script>

<style scoped lang="scss">
  .app-container {
    background-color: #FFF;
  }
  .submit{
    position: absolute;
    bottom: 5%;
    width: 90%;
    left: 5%;
    p{
      text-align: center;
      margin-bottom: 0.2rem;
      span{
        color: #007E72;
      }
    }
  }
</style>
