<template>
  <div class="add-blank-dialog-mod">

    <el-form ref="dialogForm"
             :model="dialogForm"
             :rules="dialogFormRules"
             size="mini"
             label-width="200px"
             class="dialogForm"
    >

      <el-form-item label="银行全称" prop="bankName">
       <div class="col-input-row">
         <el-autocomplete
           class="col-autocomplete-input"
           v-model.trim="dialogForm.bankName"
           :fetch-suggestions="queryBankSearch"
           :trigger-on-focus="false"
           placeholder="请输入内容"
           @select="onBankSelect"
           clearable
         >
           <template slot-scope="{ item }">
             <div class="row-bank-name">{{ item.bankName }}</div>
           </template>
         </el-autocomplete>
       </div>
      </el-form-item>

      <el-form-item label="银行简称" prop="bankCorpName">
        <div class="col-input-row">
          <el-input v-model.trim="dialogForm.bankCorpName" class="col-input-small" clearable disabled></el-input>
        </div>
      </el-form-item>

      <el-form-item label="支行名称" prop="branchName">
        <div class="col-input-row">
          <el-input v-model.trim="dialogForm.branchName" class="col-input-small" clearable></el-input>
        </div>
      </el-form-item>

      <el-form-item label="银行行号" prop="bankNo">
        <div class="col-input-row">
          <el-input v-model.trim="dialogForm.bankNo" class="col-input-small" clearable></el-input>
        </div>
      </el-form-item>

      <div class="dialogForm-submit-row">
        <el-button size="small" type="primary" class="dialog-btn" @click="onSaveDialogForm" :disabled="dialogForm.submitting">保存</el-button>
        <el-button size="small" type="info" class="dialog-btn" @click="onCloseDialog">取消</el-button>
      </div>

    </el-form>

  </div>
</template>

<script>
  import { addBlankFormRules } from './validateBankNumber';
  import { bankInfoService } from './api';

  let defaultDialogForm = {
    bankCorpId:'',
    bankName:'',
    bankCorpName:'',
    branchName:'',
    bankNo:'',
    submitting:false
  };

  export default {
    name: "addBlankDialog",
    components: {},
    props: {
      injectData: {
        type: Object,
        default:function () {
          return { }
        }
      }
    },
    data() {
      return {
        dialogForm: Object.assign({},defaultDialogForm),
        dialogFormRules: Object.assign({},addBlankFormRules),
        // 所有银行信息
        allBankList:[]
      }
    },
    computed: {},
    mounted() {
      if(this.injectData && this.injectData.dialogForm){
        this.dialogForm = Object.assign({},this.injectData.dialogForm)
      }
    },
    methods: {
      // 开户行联想
      async queryBankSearch(queryString, cb){
        try {
          if(!this.allBankList || this.allBankList.length===0){
            const res = await bankInfoService.listBankCorp();
            if(res && res.data){
              this.allBankList = res.data;
            }
          }
          const resData = this.allBankList.filter((item)=>{
            return item.bankName.indexOf(queryString) !==-1 || item.bankCorpName.toString().indexOf(queryString) !==-1;
          });
          cb(resData);
        }catch (e) {
          console.warn('queryBankSearch error:',e)
        }
      },
      onBankSelect(item){
        this.dialogForm.bankCorpId = item.bankCorpId;
        this.dialogForm.bankName = item.bankName;
        this.dialogForm.bankCorpName = item.bankCorpName;
      },
      onCloseDialog() {
        this.$refs['dialogForm'].resetFields();
        this.$emit('close', false);
      },
      async onSaveDialogForm() {
        this.$refs['dialogForm'].validate(async (valid) => {
          this.dialogForm.submitting = true;
          if(valid){
            try {
              const { bankCorpId,branchName,bankNo } = this.dialogForm;
              const params= {
                bankCorpId,
                branchName,
                bankNo
              };
              let res;
              if(this.dialogForm.isEdit){
                const { bankInfoId,bankCorpId,branchName,bankNo } = this.dialogForm;
                res = await bankInfoService.updateBank({ bankInfoId,bankCorpId,branchName,bankNo });
              }else {
                res = await bankInfoService.saveBank(params);
              }

              if(res && res.rspCode==='success') {
                this.$message.success(res.rspDesc || '保存成功');
              }else {
                this.$message.error(res.rspDesc || '保存失败');
              }
              this.dialogForm.submitting = false;
              this.$emit('close', true);
            }catch (e) {
              this.dialogForm.submitting = false;
            }
          }else {
            this.dialogForm.submitting = false;
          }
          return false
        })
      },
    },
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

  .add-blank-dialog-mod{

    .col-input-small {
      max-width: 300px;
    }

    .dialogForm-submit-row {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      .dialog-btn{
        margin: 0 10px;
      }
    }

    .col-autocomplete-input{
      width: 300px;
    }
    .row-bank-name{

    }
  }
</style>
