<template>
  <div class="container">
    <NavBar title="客户信息变更" left-arrow @click-left="goBack" />

    <div class="content">
      <section class="form-area">
        <Tabs v-model:active="active" title-active-color="#0277bc" color="#0277bc">
          <Tab title="地址信息">
            <AuForm v-model="addressFormConfig" :key="addressForm" />
            <Field v-model="message" rows="2" autosize label="备注说明" type="textarea" maxlength="200"
              placeholder="最多可编写200字" show-word-limit />
          </Tab>
          <Tab title="联系人信息">
            <AuForm v-model="contactPersonConfig" :key="contactPerson" />
            <Field v-model="message" rows="2" autosize label="备注说明" type="textarea" maxlength="200"
              placeholder="最多可编写200字" show-word-limit />
          </Tab>
        </Tabs>
      </section>

      <section class="sub">
        <Button type="primary" block>申请</Button>
      </section>
    </div>
  </div>
</template>

<script setup>
import { goBack } from "@/utils/globalFun"
import { NavBar, Button, Field, Tab, Tabs } from "vant";
import AuForm from '@/components/AuForm.vue';
import AuFormClass from "@/components/useAuForm";
const active = $ref(0)

const message = $ref('')

const addressForm = $ref();
const addressFormConfig = $ref(new AuFormClass([
  {
    title: '地址类型',
    propName: 'paymentReqDate',
    type: 'cell',
    value: '',
    isRequired: true,
    select: []
  },
  {
    title: '省/市/区',
    propName: 'paymentReqDat3e',
    type: 'cell',
    value: '',
    isRequired: true,
    select: []
  },
  {
    title: '详细地址',
    propName: 'paymentReqDat3e',
    type: 'input',
    value: '',
    isRequired: true
  },
  {
    title: '邮编',
    propName: 'paymentReqDat3e',
    type: 'input',
    value: '',
    isRequired: true
  },
  {
    title: '电话',
    propName: 'paymentReqDat3e',
    type: 'input',
    value: '',
    isRequired: true
  },
  {
    title: '手机',
    propName: 'paymentRe3qDat3e',
    type: 'input',
    value: '',
    isRequired: true,
  }
]))

const contactPerson = $ref();
const contactPersonConfig = $ref(new AuFormClass([
  {
    title: '联系人类型',
    propName: 'paymentReqDate',
    type: 'cell',
    value: '',
    isRequired: true,
    select: []
  },
  {
    title: '联系人姓名',
    propName: 'paymentReqDat3e',
    type: 'input',
    value: '',
    isRequired: true,
  },
  {
    title: '职务',
    propName: 'paymentReqDat3e',
    type: 'cell',
    value: '',
    isRequired: true,
    select: []
  },
  {
    title: '证件类型',
    propName: 'paymentReqDat3e',
    type: 'input',
    value: '',
    isRequired: true,
    select: []
  },
  {
    title: '电话',
    propName: 'paymentReqDat3e',
    type: 'input',
    value: '',
    isRequired: true
  },
  {
    title: '邮箱',
    propName: 'paymentReqDat3e',
    type: 'input',
    value: '',
    isRequired: true
  },
  {
    title: '传真',
    propName: 'paymentReqDat3e',
    type: 'input',
    value: '',
    isRequired: true
  },
  {
    title: '家庭住址',
    propName: 'paymentRe3qDat3e',
    type: 'input',
    value: '',
    isRequired: true,
  }
]))
</script>

<style lang="less" scoped>
.sub {
  width: 70%;
  margin: 50px auto 5px;
}

.form-area {
  padding: 10px;
  min-height: 500px;
}

.content {
  height: calc(100% - var(--van-nav-bar-height));
  overflow-y: auto;
}
</style>