<template>
  <div class="bank-props-dialog-mod">

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

      <selected-props-list :active-index="selectedIndex" :list="list" @item="onListItem" @dbItem="onOpenItem('edit')"/>

      <div class="dialogForm-submit-row">
        <el-button type="primary" class="dialog-btn" @click="onOpenItem('add')" size="mini">添加</el-button>
        <el-button type="danger" class="dialog-btn" @click="onDelItem" size="mini" :disabled="!selectedItem">删除选择项</el-button>
      </div>
    </el-form>

    <el-dialog
      width="30%"
      :title="innerTitle"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="innerVisible"
      @close="closeInnerDialog"
      center
      append-to-body
      class="bank-inner-dialog"
    >

      <el-form ref="innerForm"
               :model="innerForm"
               :rules="innerFormRules"
               size="mini"
               label-width="100px"
               class="doc-inner-dialogForm"
      >

        <el-form-item label="银行全称" prop="bankName" class="doc-inner-form-item">
          <el-input v-model="innerForm.bankName" class="col-inner-input-small" clearable></el-input>
        </el-form-item>
        <el-form-item label="银行简称" prop="bankCorpName" lass="doc-inner-form-item">
          <el-input v-model="innerForm.bankCorpName" class="col-inner-input-small" clearable></el-input>
        </el-form-item>

        <div class="dialogForm-submit-row">
          <el-button type="primary" class="col-btn-save" size="mini" @click="onInnerSave" :disabled="innerForm.submitting">保存</el-button>
          <el-button size="small" type="info" class="dialog-btn" @click="innerVisible = false">取消</el-button>
        </div>

      </el-form>

    </el-dialog>
  </div>
</template>

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

  let defaultInnerForm = {
    bankName: '',
    bankCorpName:'',
    submitting:false
  };

  export default {
    name: "blankPropsDialog",
    components: {
      SelectedPropsList
    },
    props: {
      injectData: {
        type: Object,
        default:function () {
          return {}
        }
      }
    },
    data() {
      return {
        dialogForm: {},
        list:[],
        selectedIndex:null,
        dialogFormRules: {},

        innerVisible:false,
        innerEdit:false,
        innerForm:Object.assign({},defaultInnerForm),
        innerFormRules:Object.assign({},blankCorpFormRules)
      }
    },
    computed: {
      selectedItem:function () {
       return this.list.find((item,index)=>{
         return index === this.selectedIndex;
       })
      },
      innerTitle:function () {
        return this.innerEdit?`银行名称管理-修改`:`银行名称管理-添加`
      }
    },
    mounted() {
      this.queryBankList();
    },
    methods: {
      async queryBankList(){
        try {
          const res = await bankInfoService.listBankCorp();
          if(res && res.data){
            const resData = res.data.map((item)=>{
              return {
                ...item,
                name:item.bankName,
                val:item.bankCorpId
              }
            });
            this.list = [].concat(resData);
          }
        }catch (e) {
          console.warn('queryBankList error:',e)
        }
      },
      onListItem(item,index){
        this.selectedIndex = index;
      },
      async onDelItem(){
        try {
          const { bankCorpId } = this.selectedItem;
          const res = await bankInfoService.deleteBankCorp({bankCorpId});
          if(res && res.rspCode==='success'){
            this.$message.success('删除成功');
            this.queryBankList();
          }else {
            this.$message.error(res.rspDesc || '删除失败');
          }
        }catch (e) {
          console.warn('onDelItem error:',e);
          this.$message.error(e && e.rspDesc?e.rspDesc:'删除失败');
        }
      },
      // 添加编辑
      onOpenItem(type){
        this.innerVisible = true;
        switch (type) {
          case 'add':
            this.innerEdit = false;
            break;
          case 'edit':
            this.innerEdit = true;
            const {bankName,bankCorpName,bankCorpId} = this.selectedItem;
            this.innerForm = Object.assign({},{bankName,bankCorpName,bankCorpId,submitting:false});
            break;
        }
      },
      // 添加银行弹窗保存数据
      async onInnerSave(){
        this.$refs['innerForm'].validate(async (valid) => {
          this.innerForm.submitting = valid;
          if(valid){
            try {
              let res;
              if(this.innerEdit){
                // 编辑更新
                const {bankCorpName,bankName,bankCorpId} = this.innerForm;
                res = await bankInfoService.updateBankCorp({bankCorpId,bankCorpName,bankName});
              }else {
                // 添加
                const {bankCorpName,bankName} = this.innerForm;
                res = await bankInfoService.saveBankCorp({bankCorpName,bankName});
              }
              if(res && res.rspCode==='success') {
                this.$message.success(res.rspDesc || '保存成功');
                this.queryBankList();
              }else {
                this.$message.error(res.rspDesc || '保存失败');
              }
              this.innerForm.submitting = false;
              this.closeInnerDialog();
            }catch (e) {
              this.innerForm.submitting = false;
            }
          }
        });
      },
      closeInnerDialog(){
        this.innerVisible = false;
        this.$refs['innerForm'].resetFields();
        this.innerForm = Object.assign({},defaultInnerForm);
      }
    }
  }
</script>

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

  .doc-inner-dialogForm{
    width: 420px;
    margin: 0 auto;
    .col-inner-input-small{
      max-width: 240px;
    }

    .col-btn-save{
      margin-left: 10px;
    }
  }

  .bank-props-dialog-mod{
    .col-btn-add{
      margin-left: 20px;
    }

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

  }

  .bank-props-dialog-mod .dialogForm-submit-row,
  .bank-inner-dialog .dialogForm-submit-row {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    .dialog-btn{
      margin: 0 10px;
    }
  }

</style>
