<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '我的资料',
  },
}
</route>

<template>
  <view class="user-edit-page">
    <view class="user-info p-2">
      <wd-form ref="form" :model="model">
        <wd-cell-group border>
          <wd-input
            label="用户名称"
            label-width="100px"
            prop="usersname"
            clearable
            v-model="model.usersname"
            placeholder="请输入用户名称"
            :rules="[{ required: true, message: '请填写用户名称' }]"
          />
          <wd-picker
            label="用户类型"
            label-width="100px"
            prop="userstype"
            v-model="model.userstype"
            :columns="typeOptions"
            placeholder="请选择用户类型"
            :rules="[{ required: true, message: '请选择用户类型' }]"
          />
          <!-- 个人用户表单项 -->
          <template v-if="model.userstype === '个人'">
            <wd-input
              label="证件号码"
              label-width="100px"
              prop="usersidcardnumber"
              clearable
              v-model="model.usersidcardnumber"
              placeholder="请输入证件号码"
              :rules="[{ required: true, message: '请填写证件号码' }]"
            />
            <wd-input
              label="用户手机号"
              label-width="100px"
              prop="usersphone"
              clearable
              v-model="model.usersphone"
              placeholder="请输入用户手机号"
              :rules="[
                { required: true, message: '请填写用户手机号' },
                { required: false, pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' },
              ]"
            />
            <wd-input
              label="开户银行名称"
              label-width="100px"
              prop="usersbankname"
              clearable
              v-model="model.usersbankname"
              placeholder="请输入开户银行名称"
            />
            <wd-input
              label="银行账号"
              label-width="100px"
              prop="usersbanknumber"
              clearable
              v-model="model.usersbanknumber"
              placeholder="请输入银行账号"
            />
            <wd-input
              label="用户邮箱"
              label-width="100px"
              prop="usersemail"
              clearable
              v-model="model.usersemail"
              placeholder="请输入用户邮箱"
              :rules="[{ required: false, type: 'email', message: '邮箱格式不正确' }]"
            />
            <wd-input
              label="用户地址"
              label-width="100px"
              prop="usersaddress"
              clearable
              v-model="model.usersaddress"
              placeholder="请输入用户地址"
            />
            <wd-input
              label="联系手机号"
              label-width="100px"
              prop="userscontactphone"
              clearable
              v-model="model.userscontactphone"
              placeholder="请输入联系手机号"
              :rules="[{ required: false, validator: validatorPhone, message: '手机号格式不正确' }]"
            />
            <wd-input
              label="联系邮箱"
              label-width="100px"
              prop="userscontactemail"
              clearable
              v-model="model.userscontactemail"
              placeholder="请输入联系邮箱"
              :rules="[{ required: false, type: 'email', message: '邮箱格式不正确' }]"
            />
            <wd-input
              label="联系地址"
              label-width="100px"
              prop="userscontactaddress"
              clearable
              v-model="model.userscontactaddress"
              placeholder="请输入联系地址"
            />
          </template>

          <!-- 企业用户表单项 -->
          <template v-if="model.userstype === '企业'">
            <wd-input
              label="统一社会信用代码"
              label-width="100px"
              prop="usersshtyxydm"
              clearable
              v-model="model.usersshtyxydm"
              placeholder="请输入统一社会信用代码"
              :rules="[{ required: true, message: '请填写统一社会信用代码' }]"
            />
            <wd-input
              label="法人代表手机号"
              label-width="100px"
              prop="usersfrdbsjh"
              clearable
              v-model="model.usersfrdbsjh"
              placeholder="请输入法人代表手机号"
              :rules="[{ required: true, pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }]"
            />
            <wd-input
              label="电话(座机)"
              label-width="100px"
              prop="usersfrdbdh"
              clearable
              v-model="model.usersfrdbdh"
              placeholder="请输入法人代表电话(座机)"
            />
            <wd-input
              label="企业注册地"
              label-width="100px"
              prop="userszcd"
              clearable
              v-model="model.userszcd"
              placeholder="请输入企业注册地"
            />
            <wd-input
              label="传真"
              label-width="100px"
              prop="userscz"
              clearable
              v-model="model.userscz"
              placeholder="请输入传真"
            />
          </template>

          <!-- 备注 所有类型都显示 -->
          <wd-textarea
            label="备注"
            label-width="100px"
            prop="usersbz"
            v-model="model.usersbz"
            placeholder="请输入备注"
            autosize
            :maxlength="300"
            show-word-limit
          />
        </wd-cell-group>
      </wd-form>
    </view>
    <view class="footer">
      <wd-button type="primary" size="large" @click="handleSubmit" block :loading="submitLoading">
        提交
      </wd-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useAppStore } from '@/store/app'
import { useUserStore } from '@/store/user'
import { useToast } from 'wot-design-uni'

/** 客户信息 */
// CREATE TABLE `users` (
//   `usersid` varchar(50) NOT NULL COMMENT '用户id',
//   `usersname` varchar(50) DEFAULT NULL COMMENT '用户名称',
//   `usersnature` varchar(50) DEFAULT NULL COMMENT '用户性质（用户/渠道）',
//   `userssuperiorid` varchar(50) DEFAULT NULL COMMENT '用户关联上级id',

//   `usersidcardnumber` varchar(50) DEFAULT NULL COMMENT '用户证件号码',
//   `usersbankname` varchar(50) DEFAULT NULL COMMENT '用户开户银行名称',
//   `usersbanknumber` varchar(50) DEFAULT NULL COMMENT '用户开户银行账号',
//   `usersphone` varchar(50) DEFAULT NULL COMMENT '用户手机号',
//   `usersemail` varchar(50) DEFAULT NULL COMMENT '用户邮箱',
//   `usersaddress` varchar(100) DEFAULT NULL COMMENT '用户地址',
//   `userscontactphone` varchar(50) DEFAULT NULL COMMENT '用户联系手机号',
//   `userscontactemail` varchar(50) DEFAULT NULL COMMENT '用户联系邮箱',
//   `userscontactaddress` varchar(50) DEFAULT NULL COMMENT '用户联系地址',

//   `usersopenid` varchar(50) DEFAULT NULL COMMENT '用户微信openid',
//   `usersauthstatus` tinyint(2) DEFAULT NULL COMMENT '用户是否实名（0：未认证，1：已认证）',
//   `usersdate` datetime DEFAULT NULL COMMENT '用户创建时间',
//   `userstype` varchar(50) DEFAULT NULL COMMENT '用户类型（个人/企业）\n）',

//   `usersfrdbdh` varchar(50) DEFAULT NULL COMMENT '法人代表电话(座机)',
//   `usersfrdbsjh` varchar(50) DEFAULT NULL COMMENT '法人代表手机号',
//   `usersxssjh` varchar(50) DEFAULT NULL COMMENT '销售手机号',
//   `usersxsdh` varchar(50) DEFAULT NULL COMMENT '销售电话(座机)',
//   `usersshtyxydm` varchar(50) DEFAULT NULL COMMENT '社会统一企业代码',
//   `userszcd` varchar(100) DEFAULT NULL COMMENT '企业注册地',
//   `userscz` varchar(50) DEFAULT NULL COMMENT '传真',

//   `usersbz` varchar(1000) DEFAULT NULL COMMENT '备注',
//   PRIMARY KEY (`usersid`)
// ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户信息';

const model = reactive({
  usersnature: '用户',
  usersname: '',
  userstype: '个人',
  usersidcardnumber: '',
  usersbankname: '',
  usersbanknumber: '',
  usersphone: '',
  usersemail: '',
  usersaddress: '',
  userscontactphone: '',
  userscontactemail: '',
  userscontactaddress: '',
  usersopenid: '',
  usersfrdbdh: '',
  usersfrdbsjh: '',
  usersshtyxydm: '',
  userszcd: '',
  userscz: '',
  usersbz: '',
})
const appStore = useAppStore()
const userStore = useUserStore()
const toast = useToast()
// 用户类型
const typeOptions = ['个人', '企业']
const submitLoading = ref(false)
// 用户详情
const form = ref()
const validatorPhone = (val: string) => {
  if (!val) {
    return Promise.resolve()
  }
  if (/^1[3-9]\d{9}$/.test(val)) {
    return Promise.resolve()
  } else {
    return Promise.reject(new Error('手机号格式不正确'))
  }
}

// 提交
function handleSubmit() {
  form.value
    .validate()
    .then(async ({ valid, errors }) => {
      if (valid) {
        submitLoading.value = true
        const userid = appStore.appInfo.userid
        const res = await userStore.updateUser({
          usersid: userid,
          ...model,
        })

        if (res.Status === 0) {
          toast.success({
            msg: '保存成功!',
            duration: 2000,
            closed: () => {
              submitLoading.value = false
              uni.navigateBack()
            },
          })
        } else {
          toast.error(res.Message)
        }
        submitLoading.value = false
      }
    })
    .catch((error) => {
      submitLoading.value = false
      console.log(error, 'error')
    })
}

const getUserDetail = async () => {
  const { Data, Status } = await userStore.getUserInfo()
  if (Status === 0) {
    // usersname: '',
    // userstype: '个人',
    // usersidcardnumber: '',
    // usersbankname: '',
    // usersbanknumber: '',
    // usersphone: '',
    // usersemail: '',
    // usersaddress: '',
    // userscontactphone: '',
    // userscontactemail: '',
    // userscontactaddress: '',
    // usersopenid: '',
    // usersfrdbdh: '',
    // usersfrdbsjh: '',
    // usersshtyxydm: '',
    // userszcd: '',
    // userscz: '',
    // usersbz: '',
    model.usersname = Data.usersname || '微信用户'
    model.userstype = Data.userstype || '个人'
    model.usersidcardnumber = Data.usersidcardnumber
    model.usersbankname = Data.usersbankname
    model.usersbanknumber = Data.usersbanknumber
    model.usersphone = Data.usersphone
    model.usersemail = Data.usersemail
    model.usersaddress = Data.usersaddress
    model.userscontactphone = Data.userscontactphone
    model.userscontactemail = Data.userscontactemail
    model.userscontactaddress = Data.userscontactaddress
    model.usersopenid = Data.usersopenid
    model.usersfrdbdh = Data.usersfrdbdh
    model.usersfrdbsjh = Data.usersfrdbsjh
    model.usersshtyxydm = Data.usersshtyxydm
    model.userszcd = Data.userszcd
    model.userscz = Data.userscz
    model.usersbz = Data.usersbz
  }
}

onMounted(() => {
  getUserDetail()
})
</script>

<style lang="scss" scoped>
.user-edit-page {
  padding-bottom: 80px; // 为固定底部按钮留出空间

  .user-info {
    background-color: #fff;
  }

  .footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    padding: 16px;
    background-color: #fff;
    // box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
  }
}
</style>
