<template>
  <LayoutApp :title="title">
    <Cards v-if="bankCardList.length" ref="cards"></Cards>
    <div v-else>
      <p class="mian-tip">请添加持卡人本人银行卡</p>

      <div class="form-wrap">
        <div v-for="(item, index) in formList" :key="index" class="form-row">
            <text class="cell-left">{{item.title}}</text>
            <input class="cell-right" :placeholder="item.placeholder" :readonly="isReadonly(item)" :value="formValue[index]" @input="inputChange(index, $event)"/>
            <div v-if="item.select" class="tap-act">
              <Select
                :options="selectOptions[item.select]"
                :placeholder="item.placeholder"
                @change="selectChange(index, $event)"
                class="tab-go">
              </Select>
              ›
            </div>
        </div>
      </div>

      <p class="error-tip">{{errorTip}}</p>
      <div class="option-wrap">
        <button class="save-btn" @click="checkBankCardInfo">确定</button>
      </div>
    </div>
  </LayoutApp>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
import LayoutApp from '../../components/layout/layout-app';
import Cards from './components/cards';
import {Select} from 'cube-ui';

const {mapState, mapActions} = createNamespacedHelpers('mine/bankCard');

export default {
  name: 'cardAdd',
  title: '',
  data() {
    return {
      title: '我的银行卡',
      formList: [
        {
          title: '持卡人',
          placeholder: '请输入持卡人姓名',
          type: 'name',
          errorTip: '您输入的姓名不符合规范，请重新输入',
          regx: /^([\u4e00-\u9fa5]|[A-Za-z]){2,}$/
        },
        {
          title: '身份证号',
          placeholder: '请输入身份证号',
          type: 'idCardNo',
          errorTip: '您输入的身份证号码不符合规范，请重新输入',
          regx: /^(\d|X|x){15,18}$/
        },
        {
          title: '开户行',
          placeholder: '请选择开户行',
          type: 'bankCode',
          errorTip: '请选择开户行',
          select: 'bankList',
        },
        {
          title: '分行 支行',
          placeholder: '例如：南京分行雨花支行',
          type: 'bankBranch',
          errorTip: '请输入正确的分行和支行信息'
        },
        {
          title: '银行卡号',
          placeholder: '请输入银行卡号',
          type: 'bankCardNo',
          errorTip: '您输入的银行卡号不符合规范，请重新输入',
          regx: /^\d{10,22}$/
        },
      ],
      formValue: [],
      errorTip: '',
    };
  },
  mounted() {
    if (!this.banks.length) {
      this.fetchBankList();
    }
    this.$root.reportAppStart();
  },
  computed: {
    ...mapState(['banks', 'bankCardList']),
    selectOptions() {
      let bankList = [];

      this._bankObj = {};

      if (this.banks && this.banks.length) {
        this.banks.forEach(val => {
          this._bankObj[val.bankCode] = val.bankName;
          bankList.push({
            text: val.bankName,
            value: val.bankCode
          });
        });
      }

      return {bankList};
    }
  },
  methods: {
    ...mapActions(['fetchBankCard', 'fetchBankList', 'checkBankCard', 'bindBankCard']),
    isReadonly(item) {
      return !!item.select;
    },
    inputChange(index, e) {
      this.changeFormValue(index, e.target.value);
    },
    selectChange(index, val) {
      let name = this._bankObj[val] || '';

      this.changeFormValue(index, {
        name,
        value: val,
        toString() {
          return this.name
        }
      });
    },
    changeFormValue(index, val) {
      let max = Math.max(index, this.formValue.length);
      let formValue = [];

      this.errorTip = '';

      for (let i = 0; i <= max; i++) {
        if (i === index) {
          formValue[i] = val || '';
        } else {
          formValue[i] = this.formValue[i] || '';
        }
      }

      this.formValue = formValue;
    },
    checkBankCardInfo() {
      let errorTip = '';
      let data = {};

      this.formList.some((val, index) => {
        if (errorTip) {
          return true;
        }

        let input = this.formValue[index] || '';
        let value = input.value || input || '';

        if (val.regx) {
          if (!val.regx.test(value)) {
            errorTip = val.errorTip;
          }
        } else if (!value) {
          errorTip = val.errorTip;
        }

        data[val.type] = value;
      });

      if (errorTip) {
        this.errorTip = errorTip;
      } else {
        this.checkBankCard(data).then(res => {
          if (res.code === 200) {
            this.bindBankCardInfo(data);
          } else {
            this.errorTip = res.message || '信息有误或网络异常，请稍后重试';
          }
        });
      }
    },
    bindBankCardInfo(info) {
      this.$root.reportApp('', 'BUSINESS_PLAN_A_EVENT', {
        locfun: 'click:bindBankCard'
      });

      let confirm = this.$createDialog({
        type: 'confirm',
        title: '提示',
        content: `请确认您填写的银行信息，提交后只能致电客服修改<br><br>持卡人: ${info.name}<br>身份证号: ${info.idCardNo || ''}<br>银行卡号: ${info.bankCardNo || ''}`,
        confirmBtn: {
          text: '提交',
          active: true,
        },
        cancelBtn: {
          text: '取消',
        },
        onConfirm: () => {
          this.bindBankCard(info).then(res => {
            if (res.code === 200) {
              this.fetchBankCard();
            } else {
              this.$createDialog({
                type: 'alert',
                content: res.message || '提交失败或网络异常，请稍后重试',
                confirmBtn: {
                  text: '我知道了',
                  active: true
                }
              }).show()
            }
          });
        }
      }).show();
    }
  },
  components: {
    LayoutApp,
    Select,
    Cards
  }
};
</script>

<style lang="scss" scoped>
  /deep/ .layout-context {
    background-color: #f0f0f0!important;
  }

  .mian-tip {
    padding: 0 30px;
    line-height: 80px;
    margin-top: 28px;
    font-size: 28px;
    color: #444;
  }

  .form-wrap {
    background-color: #fff;
    padding-left: 30px;
    font-size: 28px;

    .form-row:first-child {
      border-top: 0;
    }
  }

  .form-row {
    height: 88px;
    line-height: 90px;
    padding-right: 30px;
    border-top: 1px solid #e9e9e9;
    display: flex;
    position: relative;
    box-sizing: border-box;

    .cell-left {
      width: 150px;
    }

    .cell-right {
      flex-grow: 1;
    }

    .tap-act {
      font-size: 50px;
      color: #b0b0b0;
      font-weight: 300;
    }

    .tab-go {
      position: absolute;
      left: 150px;
      right: 30px;
      top: 0;
      bottom: 0;
      z-index: 2;
      opacity: 0;
    }
  }

  .error-tip {
    padding: 30px 30px 0 30px;
    font-size: 28px;
    line-height: 1.5;
    color: #d0021b;
    min-height: 72px;
  }

  .option-wrap {
    margin: 20px 30px;

    .save-btn {
      width: 100%;
      display: block;
      font-size: 32px;
      line-height: 100px;
      color: #fff;
      background: #444;
      border: 0;
      border-radius: 8px;
    }
  }

</style>