<template>
  <div class="card content-box">
    <div class="mb-5 w-full">
      <template v-if="isEdit">
        <el-button type="default" @click="showModal = false">取消</el-button>
        <el-button :loading="loading" type="primary" @click="submitForm">保存</el-button>
      </template>
      <el-button type="primary" @click="isEdit = true">修改</el-button>
    </div>
    <div class="w-full">
      <el-form ref="formRef" :model="form" :rules="rules" inline>
        <el-row :gutter="20">
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="发卡银行" prop="roleName">
              <el-input v-model="form.roleName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="开户时间" prop="roleCode">
              <el-input v-model="form.roleCode" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="卡号" prop="roleDesc">
              <el-input v-model="form.roleDesc" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="卡片状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio value="enable">正常</el-radio>
                <el-radio value="disable">逾期</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="授信额度" prop="roleDesc">
              <el-input v-model="form.roleDesc" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="已用额度" prop="roleDesc">
              <el-input v-model="form.roleDesc" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="近6个月平均使用额度" prop="roleDesc">
              <el-input v-model="form.roleDesc" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="当前欠款金额" prop="roleDesc">
              <el-input v-model="form.roleDesc" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="逾期期数" prop="roleDesc">
              <el-input v-model="form.roleDesc" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="逾期后是否有过协商" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio value="enable">是</el-radio>
                <el-radio value="disable">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="有无分期" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio value="enable">是</el-radio>
                <el-radio value="disable">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="有无协商方案" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio value="enable">是</el-radio>
                <el-radio value="disable">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="查询密码" prop="roleDesc">
              <el-input v-model="form.roleDesc" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="最后一次还款时间：" prop="name">
              <el-date-picker
                v-model="form.trackTime"
                class="w-full"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                type="datetime"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="支付密码" prop="roleDesc">
              <el-input v-model="form.roleDesc" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="最后一次还款金额" prop="roleDesc">
              <el-input v-model="form.roleDesc" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="是否有大额专项分期额度" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio value="enable">是</el-radio>
                <el-radio value="disable">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="大额专项分期借款种类：" prop="status">
              <el-select v-model="form.status">
                <el-option label="启用" value="enable" />
                <el-option label="禁用" value="disable" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="大额专项分期额度" prop="roleDesc">
              <el-input v-model="form.roleDesc" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="大额专项分期开立日期：" prop="name">
              <el-date-picker
                v-model="form.trackTime"
                class="w-full"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                type="date"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="大额专项分期到期日期：" prop="name">
              <el-date-picker
                v-model="form.trackTime"
                class="w-full"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                type="datetime"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="大额专项分期已还期数" prop="roleDesc">
              <el-input v-model="form.roleDesc" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="银行预留手机号码" prop="roleDesc">
              <el-input v-model="form.roleDesc" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="银行预留家庭地址" prop="roleDesc">
              <el-input v-model="form.roleDesc" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="银行预留紧急联系人姓名" prop="roleDesc">
              <el-input v-model="form.roleDesc" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
            <el-form-item class="w-full" label="银行预留紧急联系人电话" prop="roleDesc">
              <el-input v-model="form.roleDesc" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup name="credit">
  import { ref, computed } from 'vue';
  import { ElMessage } from 'element-plus';
  const isEdit = ref(false);
  const currentRole = ref(null);
  const formRef = ref(null);
  const form = ref({
    roleName: '',
    roleCode: '',
    roleDesc: '',
  });
  const rules = ref({
    roleName: { required: true, message: '请输入角色名称', trigger: 'blur' },
    roleCode: { required: true, message: '请输入角色编码', trigger: 'blur' },
  });
  const loading = ref(false);
  const submitForm = async () => {
    try {
      await formRef.value.validate();
      loading.value = true;

      //   await saveRole(form.value);
      ElMessage({
        type: 'success',
        message: isEdit.value ? '修改成功！' : '新建成功!',
        plain: true,
      });
    } catch {}
    loading.value = false;
  };
</script>
