<template>
  <div>
    <el-dialog
      title="添加支付银行卡"
      custom-class="container"
      :show-close="false"
      :visible.sync="showFormDia"
      width="75%"
      modal
      :close-on-click-modal="false"
    >
      <el-form :model="form" :rules="rules" ref="form" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="账户名" prop="enterpriseName">
              <el-input v-model="form.enterpriseName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联行号" prop="interBank">
              <bank-selector
                :title="'联行号'"
                :single="true"
                v-model="form.interBank"
                :config="{id: 'form.openingBank', name: 'form.interBank'}"
                :searchPlaceholder="'联行号'"
                @input="handleSelectorInput"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开户行" prop="openingBank">
              <el-input
                readonly
                placeholder="选择联行号自动加载"
                v-model="form.openingBank"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开户行地区" prop="province">
              <el-select
                v-model="form.province"
                placeholder="请选择省"
                filterable
                clearable
                style="width: 145px"
              >
                <el-option
                  v-for="item in provinces"
                  size="small"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  @click.native="changeProvince()"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="form.city"
                placeholder="请选择市"
                filterable
                clearable
                style="width: 145px"
              >
                <el-option
                  v-for="item in cities"
                  size="small"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  @click.native="changeCity"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="selectArea"
                placeholder="请选择区"
                filterable
                clearable
                style="width: 145px"
              >
                <el-option
                  v-for="item in area"
                  size="small"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="银行账号" prop="bankNumber">
              <el-input
                placeholder="请输入银行账号"
                v-model="form.bankNumber"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="财务公司账号" prop="internalAccount">
              <el-input
                placeholder="请输入财务公司账号"
                v-model="form.internalAccount"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系人" prop="contacts">
              <el-input
                placeholder="请输入联系人"
                v-model="form.contacts"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phoneNumber">
              <el-input
                placeholder="请输入联系电话"
                v-model="form.phoneNumber"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="账户类型" prop="accountType">
              <dict-select
                dictCode="zhgl-zhlx"
                :hasDefaultOption="true"
                clearable
                style="width:100%"
                v-model="form.accountType"
                placeholder="请选择账户类型"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收支类型" prop="transactionType">
              <dict-select
                dictCode="zhgl-szlx"
                :hasDefaultOption="true"
                clearable
                style="width:100%"
                v-model="form.transactionType"
                placeholder="请选择收支类型"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="默认账户" prop="isDefault">
              <dict-select
                dictCode="zhgl-mrzh"
                :hasDefaultOption="true"
                clearable
                style="width:100%"
                v-model="form.isDefault"
                placeholder="请选择是否为默认账户"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="默认开票账户" prop="isInvoice">
              <dict-select
                dictCode="zhgl-mrkp"
                :hasDefaultOption="true"
                clearable
                style="width:100%"
                v-model="form.isInvoice"
                placeholder="请选择是否为默认开票账户"
              />
              <!-- <el-input v-model="form.isInvoice"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import bank from '@/api/bank.js'
// import {regionData, codeTextData} from 'element-china-area-data'
export default {
  name: 'bankCardDialog',
  props: {
    showFormDia: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      params: {
        userId: '',
        userName: '',
        rechargeTotalPrice: '',
        startBayDate: '',
        startEndDate: '',
        memberStatus: '',
        memberOperationMethod: ''
      },
      form: {
        province: '',
        city: '',
        interBank: '',
        openingBank: ''
      },
      // provinces: regionData,
      selectArea: '',
      cities: [],
      area: [],
      rules: {
        bankNumber: {
          required: true,
          message: '请输入银行账号',
          trigger: 'blur'
        },
        bankName: {
          required: true,
          message: '请输入银行名称',
          trigger: 'blur'
        },
        bankType: {
          required: true,
          message: '请选择银行类型',
          trigger: 'blur'
        },

        interBank: {
          required: true,
          message: '请输入联行号',
          trigger: 'blur'
        },
        openingBank: {
          required: true,
          message: '请输入开户行',
          trigger: 'blur'
        },
        contacts: {
          required: true,
          message: '请输入开户行',
          trigger: 'blur'
        },
        phoneNumber: {
          required: true,
          message: '请输入开户行',
          trigger: 'blur'
        },
        accountType: {
          required: true,
          message: '请选择账户类型',
          trigger: 'blur'
        },
        transactionType: {
          required: true,
          message: '请选择收支类型',
          trigger: 'blur'
        },
        isDefault: {
          required: true,
          message: '请选择是否为默认账户',
          trigger: 'blur'
        },
        province: {
          required: true,
          message: '请选择省',
          trigger: 'blur'
        }
      }
    }
  },
  created() {},
  mounted() {
    this.getBank()
    this.$nextTick(() => {
      this.form = {
        enterpriseName: this.form.enterpriseName,
        enterpriseId: this.form.enterpriseId,
        isDefault: 1,
        transactionType: 0,
        accountType: 0
      }
    })
  },
  methods: {
    changeProvince() {
      this.cities = []
      this.area = []
      this.form.city = ''
      this.selectArea = ''
      let cityItem = this.provinces.filter(
        item => item.value === this.form.province
      )
      if (cityItem[0]) {
        this.cities = cityItem[0].children
      }
    },
    changeCity() {
      this.area = []
      this.selectArea = ''
      let areaItem = this.cities.filter(item => item.value === this.form.city)
      if (areaItem[0]) {
        this.area = areaItem[0].children
      }
    },
    getBank() {
      this.$http
        .get('${portal}/biz/interBank/v1/getOrgName')
        .then(res => {
          console.log(res, 'res')
          if (res.data.state) {
            this.form.enterpriseName = res.data.value.orgName
            this.form.enterpriseId = res.data.value.orgId
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleSelectorInput(data, list) {
      this.form.interBank = data[0].openingBank
      this.form.openingBank = data[0].interBank
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.administrativeRegion = this.selectArea
          bank.add(this.form, response => {
            console.log(response, 'response')
            if (response.data.state) {
              this.$notify({
                type: 'success',
                message: '保存成功',
                duration: 2000
              })
              this.handleClose()
              this.$emit('refList')
            } else {
              this.$message.warning(response.message)
            }
          })
        } else {
          return false
        }
      })
    },
    // 关闭弹窗
    handleClose() {
      this.$emit('closeFormDia')
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .container {
  .el-dialog__body {
    overflow: hidden;
    height: 450px;
  }
  .el-form {
    margin-top: 0px;
  }
}
</style>
