<script lang="ts" setup>
import { message } from 'ant-design-vue'
import { getIndustryCategoryApi } from 'API/common'
import { CUR_STATUS } from '@/enums/common'
import { submitCompanyApi, getCompanyInfoApi } from 'API/user'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const visible = defineModel('visible', { default: false })
const props = defineProps({
  isMyself: {
    type: String,
    default: '',
  },
})
const emit = defineEmits(['success'])

const obj_cache = JSON.parse(sessionStorage.getItem('cache_register'))
const checkedList = ref([])
const checkOther = ref(false)
const otherContent = ref()

const plainOptions = ['海外资讯、出海信息、方法论案例等', '出海会员俱乐部和圈层活动', '海外游学、考察、资源对接等', '出海/营销等具体项目咨询']
const postForm = ref<any>({
  type: props.isMyself,
  busLicense: '',
  name: '',
  account: '',
  regCode: '',
  legalMan: '',
  address: '',
  contactName: '',
  contactMobile: '',
  contactPosition: '',
  wxNumber: '',
  contactEmail: '',
  category: '',
  categoryTemporaryArr: null,
  purpose: '',
})
const activeTab = ref('name')
const companyName = ref()

const options = ref<any>([])

watch(
  () => checkOther.value,
  (value) => {
    if (!value) {
      otherContent.value = ''
    }
  }
)

const handleUploadSuccess = (fileList: any) => {
  if (fileList.length) {
    const data = fileList[0].response.result
    postForm.value.address = data.address
    postForm.value.name = data.companyName
    postForm.value.legalMan = data.legalMan
    postForm.value.regCode = data.regCode
  }
}
const getCompanyInfo = async () => {
  try {
    if (!companyName.value) {
      return message.error('请输入企业名称查询')
    }
    const res = await getCompanyInfoApi({ companyName: companyName.value })
    if (res.data.success) {
      postForm.value.address = res.data.result.address
      postForm.value.name = res.data.result.companyName
      postForm.value.legalMan = res.data.result.legalMan
      postForm.value.regCode = res.data.result.regCode
    }
  } catch (error) {
    console.log(error)
  }
}
const handleOther = () => {
  let otherStr = otherContent.value ? (checkedList.value.length ? '&' + otherContent.value : otherContent.value) : ''
  let checkedListStr = checkedList.value.length ? checkedList.value.join('&') : ''
  return checkedListStr + otherStr
}

const onSubmit = async () => {
  if (postForm.value.categoryTemporaryArr.length) {
    postForm.value.category = postForm.value.categoryTemporaryArr.join(',')
  }
  if (!postForm.value.name) {
    return message.error('公司名称为必填项')
  }
  if (!postForm.value.contactName) {
    return message.error('联系人为必填项')
  }
  if (!postForm.value.contactMobile) {
    return message.error('联系电话为必填项')
  }
  if (!postForm.value.contactPosition) {
    return message.error('联系人职务为必填项')
  }
  if (!postForm.value.category) {
    return message.error('相关品类为必选项')
  }
  if (checkOther.value && !otherContent.value) return message.error('您的意向other为必填项')
  postForm.value.purpose = handleOther()
  try {
    postForm.value.account = userStore.userInfo.accountEmail || userStore.userInfo.phoneNumber
    const params = {
      ...postForm.value,
      ...obj_cache,
    }
    const res = await submitCompanyApi(params)
    if (res.data.success) {
      emit('success')
    }
  } catch (error) {
    console.log('error---', error)
  }
}
const getCategoryList = async () => {
  const res = await getIndustryCategoryApi({ async: 0, pcode: 'C05' })
  if (res.data.success) {
    options.value = res.data.result || []
  }
  // const res = await apiCategory({ all: false, code: 'C05' })
  // if (res.data.success) {
  //   options.value = res.data.result || []
  // }
}
getCategoryList()
</script>

<template>
  <div>
    <div class="step-container" v-if="isMyself === CUR_STATUS.B">
      <div class="step active">
        <span class="step-text">1、企业信息注册</span>
      </div>
      <div class="step">
        <span class="step-text">2、企业信息审核</span>
      </div>
    </div>
    <div v-else class="pt-24px text-18px fw-700 text-#3d3d3d text-center">企业信息完善</div>
    <div class="py-40px px-200px pos-relative">
      <div class="pos-absolute right-30 top--20 text-16px cursor-pointer text-#bbb hover:underline" @click="visible = false">跳过>>></div>
      <div class="flex justify-between items-center">
        <div class="text-#000/60 flex text-14px">
          <div
            class="w-160px bg-#EEEEEE text-center py-8px cursor-pointer"
            @click="activeTab = 'name'"
            :class="activeTab === 'name' && '!bg-#0068FF text-#fff'"
          >
            企业名称
          </div>
          <div
            class="w-160px bg-#EEEEEE text-center py-8px cursor-pointer"
            @click="activeTab = 'license'"
            :class="activeTab === 'license' && '!bg-#0068FF text-#fff'"
          >
            营业执照
          </div>
        </div>
        <div class="underline text-#000/60 cursor-pointer">工商信息使用合规承诺</div>
      </div>
      <div class="b-1px b-solid b-#8692A6 b-rd-4px custom-container">
        <div v-show="activeTab === 'name'" class="py-20px px-46px">
          <a-input v-model:value="companyName" placeholder="请完整输入您的企业名称或统一信用代码">
            <template #suffix>
              <a-button
                class="w-74px bg-#0068FF !p-unset !b-rd-6px text-#fff !text-14px !h-30px !hover:text-#fff"
                size="large"
                @click="getCompanyInfo"
                >查询</a-button
              >
            </template>
          </a-input>
        </div>
        <div v-show="activeTab === 'license'" class="text-center pt-16px pb-7px">
          <UploadFile v-model:url="postForm.busLicense" api="/jeecgboot/shop/ocr/BusinessLicense" @success="handleUploadSuccess">
            <img src="@/assets/images/orc.png" class="w-34px h-34px" alt="" srcset="" />
            <div class="text-12px text-#0068FF mt-5px">点击上传或拖入营业执照文件</div>
          </UploadFile>
        </div>
      </div>
      <div class="mt-36px px-72px">
        <div class="flex">
          <div class="w-80px text-#333 fw-700">企业信息</div>
          <div class="flex-1">
            <div class="flex mb-22px">
              <div class="w-120px text-right mr-24px">公司名称*</div>
              <a-input v-model:value="postForm.name" class="b-rd-6px border-#8692A6 h-38px" placeholder="公司名称"> </a-input>
            </div>
            <div class="flex mb-22px">
              <div class="w-120px text-right mr-24px">统一信用代码</div>
              <a-input v-model:value="postForm.regCode" class="b-rd-6px border-#8692A6 h-38px" placeholder="统一信用代码"> </a-input>
            </div>
            <div class="flex mb-22px">
              <div class="w-120px text-right mr-24px">法定代表人</div>
              <a-input v-model:value="postForm.legalMan" class="b-rd-6px border-#8692A6 h-38px" placeholder="法定代表人"> </a-input>
            </div>
            <div class="flex">
              <div class="w-120px text-right mr-24px">详细地址</div>
              <a-textarea v-model:value="postForm.address" class="b-rd-6px border-#8692A6" placeholder="详细地址"> </a-textarea>
            </div>
          </div>
        </div>
        <div class="w-full my-26px h-1px bg-#D1D5DB"></div>
        <div class="flex">
          <div class="w-80px text-#333 fw-700">联系信息</div>
          <div class="flex-1">
            <div class="flex mb-22px">
              <div class="w-120px text-right mr-24px">联系人*</div>
              <a-input v-model:value="postForm.contactName" class="b-rd-6px border-#8692A6 h-38px" placeholder="联系人"> </a-input>
            </div>
            <div class="flex mb-22px">
              <div class="w-120px text-right mr-24px">联系电话*</div>
              <a-input v-model:value="postForm.contactMobile" class="b-rd-6px border-#8692A6 h-38px" placeholder="联系电话"> </a-input>
            </div>
            <div class="flex mb-22px">
              <div class="w-120px text-right mr-24px">联系人职务*</div>
              <a-input v-model:value="postForm.contactPosition" class="b-rd-6px border-#8692A6 h-38px" placeholder="联系人职务"> </a-input>
            </div>
            <div class="flex mb-22px">
              <div class="w-120px text-right mr-24px">微信号</div>
              <a-input v-model:value="postForm.wxNumber" class="b-rd-6px border-#8692A6 h-38px" placeholder="微信号"> </a-input>
            </div>
            <div class="flex mb-22px">
              <div class="w-120px text-right mr-24px">邮箱</div>
              <a-input v-model:value="postForm.contactEmail" class="b-rd-6px border-#8692A6 h-38px" placeholder="邮箱"> </a-input>
            </div>
            <div class="flex mb-22px">
              <div class="w-120px text-right mr-24px">行业分类*</div>
              <a-cascader
                class="w-full custom-select"
                change-on-select
                placeholder="行业分类"
                v-model:value="postForm.categoryTemporaryArr"
                :options="options"
                expand-trigger="hover"
                :fieldNames="{ label: 'title', value: 'key' }"
              />
            </div>
            <div class="flex mb-22px" v-if="isMyself === CUR_STATUS.A">
              <div class="w-90px text-right mr-24px">您的意向*</div>
              <div class="flex-1 custom-checkbox-group">
                <a-checkbox-group v-model:value="checkedList" :options="plainOptions" />
                <a-checkbox v-model:checked="checkOther">other</a-checkbox>
                <a-textarea
                  v-model:value="otherContent"
                  :class="checkOther && !otherContent ? '!b-red' : ''"
                  class="b-rd-6px border-#8692A6 ml-20px w-322px"
                  placeholder="输入内容"
                >
                </a-textarea>
              </div>
            </div>
            <div class="flex">
              <div class="w-120px text-right mr-24px"></div>
              <a-button @click="onSubmit" class="w-full !b-rd-6px text-#fff !text-14px !h-56px bg-#0068FF !hover:text-#fff" size="large"
                >提交</a-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.step-container {
  display: flex;
  height: 44px;
  font-size: 14px;
  font-weight: 700;
  .step {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    width: 355px;
    &:last-child {
      border: 1px solid #d1d5db;
      border-right: none;
    }
    &:first-child {
      background: #1a1c1e;
      color: white;
      border-top-left-radius: 18px;
      border: none;
    }
    &:first-child::after {
      content: '';
      position: absolute;
      right: -21px;
      top: 0;
      width: 0;
      height: 0;
      border-top: 22px solid transparent;
      border-bottom: 22px solid transparent;
      z-index: 2;
      border-left: 22px solid #1a1c1e;
    }

    &:last-child::before {
      content: '';
      position: absolute;
      right: -15px;
      top: 50%;
      width: 30px;
      height: 30px;
      border-top: 1px solid #d1d5db;
      border-right: 1px solid #d1d5db;
      transform: translateY(-50%) rotate(45deg);
    }
  }
}

::v-deep(.custom-container) {
  .ant-input-affix-wrapper {
    border: 1px solid #8692a6;
    border-radius: 6px;
  }
}
::v-deep(.custom-select) {
  .ant-select-selector {
    height: 38px;
    border-radius: 6px;
    border: 1px solid #8692a6;
    .ant-select-selection-item {
      line-height: 38px;
    }
    .ant-select-selection-search-input {
      height: 38px;
      line-height: 38px;
    }
    .ant-select-selection-placeholder {
      line-height: 38px;
    }
  }
}
::v-deep(.custom-checkbox-group) {
  .ant-checkbox-group {
    .ant-checkbox-wrapper {
      width: 100%;
      .ant-checkbox {
        margin-right: 8px;
        .ant-checkbox-inner {
          border-radius: 3px !important;
          border: 1px solid #8692a6;
        }
        &.ant-checkbox-checked {
          .ant-checkbox-inner {
            background-color: #0068ff;
          }
          &:after {
            border: 2px solid #0068ff;
          }
        }
      }
    }
  }
  .ant-checkbox-wrapper {
    width: 100%;
    .ant-checkbox {
      margin-right: 8px;
      .ant-checkbox-inner {
        border: 1px solid #8692a6;
        border-radius: 3px !important;
      }
      &.ant-checkbox-checked {
        border-radius: 3px !important;
        .ant-checkbox-inner {
          background-color: #0068ff;
        }
        &:after {
          border: 2px solid #0068ff;
        }
      }
    }
  }
}
</style>
