<template>
  <div class="base-info">
    <h3 class="title">基本信息</h3>
    <a-form ref="postFormRef" :model="postForm" :rules="postFormRules" layout="vertical">
      <a-form-item label="头像：" name="photo" class="mb-40px">
        <!-- <p class="c-999">最佳尺寸200*200</p> -->
        <UploadFile v-model:url="postForm.photo" file-type="image">
          <div class="py-10 px-16 bg-#F2F6FC b-rd-4px text-#333333">上传头像</div>
        </UploadFile>
      </a-form-item>

      <a-form-item label="账号：" name="account">
        <a-input v-model:value="postForm.accountEmail" v-if="postForm.accountEmail" disabled />
        <a-input v-model:value="postForm.phoneNumber" v-if="postForm.phoneNumber" disabled />
      </a-form-item>
      <a-form-item label="账号类型：" name="type" class="mb-28">
        <a-input v-model:value="postForm.type" disabled />
      </a-form-item>

      <div class="w-full h-1px bg-#E0E0E0 mb-24"></div>

      <h3 class="title">企业信息</h3>

      <!-- <a-form-item label="公司名称：" name="name"> -->
      <a-form-item label="公司名称：">
        <a-input v-model:value="postForm.name" disabled />
      </a-form-item>
      <!-- <a-form-item label="社会统一信用代码：" name="regCode"> -->
      <a-form-item label="社会统一信用代码：">
        <a-input v-model:value="postForm.regCode" disabled />
      </a-form-item>

      <!-- <a-form-item label="法人代表：" name="legalMan"> -->
      <a-form-item label="法人代表：">
        <a-input v-model:value="postForm.legalMan" disabled />
      </a-form-item>

      <!-- <a-form-item label="法人代表电话：" name="legalTel">
        <a-input v-model:value="postForm.legalTel" />
      </a-form-item> -->

      <!-- <a-form-item label="详细地址：" name="address"> -->
      <a-form-item label="详细地址：">
        <a-textarea v-model:value="postForm.address" placeholder="请输入详细地址" disabled />
      </a-form-item>
      <div class="w-full h-1px bg-#E0E0E0 mb-24"></div>

      <h3 class="title">联系信息</h3>

      <!-- <h3 class="title">工商信息</h3>
      <a-form-item label="营业执照照片" name="busLicense">
        <img class="bus-license-img" :src="postForm.busLicense" alt="" />
      </a-form-item>
      <h3 class="title">注册账号</h3>

      <a-form-item label="名字" name="username">
        <a-input v-model:value="postForm.username" disabled />
      </a-form-item>

      <a-form-item label="手机号" name="phoneNumber">
        <a-input v-model:value="postForm.phoneNumber" disabled />
      </a-form-item>

      <h3 class="title">联系人信息</h3> -->

      <a-form-item label="联系人：" name="contactName">
        <a-input v-model:value="postForm.contactName" placeholder="请输入名字" />
      </a-form-item>

      <a-form-item label="联系电话：" name="contactMobile">
        <a-input v-model:value="postForm.contactMobile" :maxlength="11" placeholder="请输入手机号" />
      </a-form-item>

      <a-form-item label="职务" name="contactPosition">
        <a-input v-model:value="postForm.contactPosition" placeholder="请输入职务" />
      </a-form-item>

      <a-form-item label="微信号">
        <a-input v-model:value="postForm.WxNumber" placeholder="请输入固定电话" />
      </a-form-item>
      <a-form-item label="邮箱：">
        <a-input v-model:value="postForm.contactEmail" placeholder="请输入固定电话" />
      </a-form-item>
      <!-- <a-form-item label="固定电话" name="contactTel">
        <a-input v-model:value="postForm.contactTel" placeholder="请输入固定电话" />
      </a-form-item> -->
    </a-form>
    <div class="text-left pl-170 mt-36">
      <a-button class="b-rd-6px h-48 text-#333 w-96 !hover:text-#0068FF !hover:b-#0068FF" @click="handleCancel">取消</a-button>
      <async-button type="primary" class="ml-30 b-rd-6px h-48 text-#fff bg-#0068FF w-96 !hover:bg-#0068FF/60 !hover:text-#fff" @click="handleSubmit"
        >保存</async-button
      >
    </div>
  </div>
</template>
<script lang="ts" setup>
import dayjs, { type Dayjs } from 'dayjs'
import type { Rule } from 'ant-design-vue/es/form'
import type { FormInstance } from 'ant-design-vue'
import type { UserBaseInfo } from 'Types/settings'
import { validatePhone } from 'Utils/validate'
import { apiUserInfo, apiUpdateUserInfo } from 'API/user'
import { message } from 'ant-design-vue'

defineOptions({
  name: 'SettingsBaseInfo',
})

const disabledDate = (currentDate: Dayjs) => {
  return currentDate && currentDate > dayjs().endOf('day')
}

const postFormRef = ref<FormInstance>()
let postForm = ref<UserBaseInfo>({
  photo: '',
  type: '',
  name: '',
  regCode: '',
  legalMan: '',
  // legalTel: '',
  address: '',
  // busLicense: '',
  // username: '',
  contactName: '',
  contactMobile: '',
  contactPosition: '',

  phoneNumber: '',
  accountEmail: '',

  contactEmail: '',
  // contactTel: '',
  WxNumber: '',
})
const postFormRules: Record<string, Rule> = {
  account: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (!postForm.value.phoneNumber && !postForm.value.accountEmail) {
          callback(new Error('不能为空'))
        } else {
          callback()
        }
      },
    },
  ],
  type: { required: true, message: '不能为空' },
  name: { required: true, message: '不能为空' },
  regCode: { required: true, message: '不能为空' },
  legalMan: { required: true, message: '不能为空' },
  address: { required: true, message: '请输入' },
  // busLicense: { required: true, message: '请上传营业执照照片' },
  // username: { required: true, message: '不能为空' },
  contactPosition: { required: true, message: '不能为空' },
  // phoneNumber: { required: true, message: '不能为空' },
  // contactEmail: { required: true, message: '不能为空' },
  contactName: { required: true, message: '请输入' },
  contactMobile: { required: true, validator: validatePhone },
}

// 获取个人信息
const getUserInfo = () => {
  apiUserInfo().then((res) => {
    const {
      data: { result },
    } = res
    postForm.value = result
    postForm.value.type = result.type === 'A' ? '无工厂' : '自有工厂'
  })
}

getUserInfo()

const handleSubmit = (done: () => void) => {
  postFormRef.value
    ?.validate()
    .then(() => {
      apiUpdateUserInfo(postForm.value)
        .then((res) => {
          message.success('更新成功')
          done()
          getUserInfo()
        })
        .catch(() => {
          done()
        })
    })
    .catch((error: Error) => {
      done()
      console.log('error', error)
    })
}
const handleCancel = () => {
  getUserInfo()
}
</script>
<style lang="less" scoped>
.base-info {
  .title {
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 700;
  }
  .bus-license-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
  }
  ::v-deep(.ant-form) {
    .ant-form-item {
      .ant-form-item-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        .ant-form-item-label {
          width: 150px;
          text-align: right;
          margin-right: 20px;
        }
        .ant-form-item-control {
          width: unset;
          .upload-file {
            .upload-file-list {
              justify-content: flex-start;
            }
          }
          input,
          textarea {
            width: 480px;
            height: 48px;
            border-radius: 4px;
          }
        }
      }
    }
  }
}
</style>
