<template>
  <div>
    <el-dialog v-model="dialogFormVisible" title="绑定银行卡" width="500">
    <el-form :model="form" :rules="rulus" ref="formRef">
      <el-form-item label="商户名称" :label-width="formLabelWidth">
        <el-input v-model="mer_name" readonly autocomplete="off" />
      </el-form-item>
      <el-form-item label="账户类型" :label-width="formLabelWidth">
        <el-radio-group v-model="form.is_own">
          <el-radio :label="0">个人</el-radio>
          <el-radio :label="1">对公</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="账户名称" :label-width="formLabelWidth" prop="name">
        <el-input v-model="form.name" placeholder="请输入账户名称" autocomplete="off" />
      </el-form-item>
      <el-form-item label="银行" :label-width="formLabelWidth" prop="bank_id">
        <el-select v-model="form.bank_id" placeholder="请选择银行">
          <el-option v-for="(item, index) in bankList" :key="index" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="银行卡号" :label-width="formLabelWidth" prop="bank_code">
        <el-input v-model="form.bank_code" placeholder="请输入银行卡号" autocomplete="off" />
      </el-form-item>
      <el-form-item label="开户网点" :label-width="formLabelWidth" prop="bank_branch">
        <el-input v-model="form.bank_branch" placeholder="请输入开户网点" autocomplete="off" />
      </el-form-item>
      <el-form-item label="身份证号" :label-width="formLabelWidth" prop="id_card">
        <el-input v-model="form.id_card" placeholder="请输入身份证号" autocomplete="off" />
      </el-form-item>
      <el-form-item label="证明图片" :label-width="formLabelWidth" prop="financial_img">
        <material-picker v-model="form.financial_img" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { apiBankLists } from "@/api/bank"
import { apiMerchantBindBank } from "@/api/merchant"

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const mer_name = ref('');
const form = reactive({
  mer_id: '', //商户id
  name: '', //账户名称
  bank_id: '', // 开户行id
  bank_code: '', // 银行账号
  bank_branch: '', // 开户网点
  id_card: '', // 身份证号
  financial_img: '', //证明图片
  is_own: 0, //0个人,1对公
})

const rulus = reactive({
  name: [
    { required: true, message: '请输入账户名称', trigger: 'blur' },
  ],
  bank_id: [
    { required: true, message: '请选择银行', trigger: 'change' }
  ],
  bank_code: [
    { required: true, message: '请输入银行卡号', trigger: 'blur' }
  ],

  bank_branch: [
    { required: true, message: '请输入开户网点', trigger: 'blur' }
  ],
  id_card: [
    { required: true, message: '请输入身份证号', trigger: 'blur' }
  ],
  financial_img: [
    { required: true, message: '请上传证明图片', trigger: 'change' }
  ]
})
const formRef = ref(null);
const submit = ()=>{
  formRef.value.validate((valid:any) => {
    if (valid) {
      apiMerchantBindBank(form).then(res=>{
        emit('onClose');
        close();
      })
    } else {
      return false;
    }
  })
}

const emit = defineEmits(['onClose']);

const open = (e:any)=>{
  form.mer_id = e.mer_id;
  mer_name.value = e.mer_name;
  dialogFormVisible.value = true
}
const close = ()=>{
  dialogFormVisible.value = false
}

const bankList = ref([]);
const getBankLists = ()=>{
  apiBankLists({
    page_no: 1,
    page_size: 999
  }).then(res=>{
    bankList.value = res.lists;
  })
}
getBankLists();

defineExpose({
  open,
  close
})
</script>
