<template>
  <u-navbar title="在线认证" :autoBack="true" bgColor="#40434e" placeholder safeAreaInsetTop :titleStyle="{ color: '#fff' }" leftIconColor="#fff"></u-navbar>
  <view class="step graybg">
    <view class="step-top flexJ" v-if="!['detail'].includes(Event?.type as string)">
      <view class="flexA">
        <view class="step-num flexC" :class="{ numac: step === 1 }">1</view>
        <view class="step-title" :class="{ titleac: step === 1 }">基础信息</view>
      </view>
      <image src="/static/images/step.png" class="step-img" mode="aspectFill" />
      <view class="flexA">
        <view class="step-num flexC" :class="{ numac: step === 2 }">2</view>
        <view class="step-title" :class="{ titleac: step === 2 }">资质证明</view>
      </view>
      <image src="/static/images/step.png" class="step-img" mode="aspectFill" />

      <view class="flexA">
        <view class="step-num flexC" :class="{ numac: step === 3 }">3</view>
        <view class="step-title" :class="{ titleac: step === 3 }">提交审核</view>
      </view>
    </view>
    <view class="main">
      <u-form labelPosition="left" :model="form" :rules="rules" ref="stepForm1">
        <template v-if="step === 1">
          <u-form-item labelWidth="160rpx" label="姓名" prop="realname" borderBottom ref="realname">
            <u-input v-model="form.realname" border="none" :disabled="formDisabled" disabledColor="#ffffff" placeholder="请输入姓名" inputAlign="right"></u-input>
          </u-form-item>
          <u-line></u-line>
          <u-form-item labelWidth="160rpx" label="身份证号" prop="idNumber" borderBottom ref="idNumber">
            <u-input v-model="form.idNumber" border="none" :disabled="formDisabled" disabledColor="#ffffff" placeholder="身份证号" inputAlign="right"></u-input>
          </u-form-item>
          <u-line></u-line>
          <u-form-item labelWidth="160rpx" label="性别" prop="sex" borderBottom @click="showActionSheepHandler('sex')" ref="name">
            <u-input v-model="ShowSelectData.sex" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none" inputAlign="right"></u-input>
            <template #right>
              <u-icon name="arrow-right" v-if="!['detail'].includes(Event?.type as string)"></u-icon>
            </template>
          </u-form-item>
          <view class="grayLine"></view>
          <u-form-item labelWidth="160rpx" label="选择种类" prop="doctorUserType" borderBottom @click="!formDisabled && proxy.$h.jumpUrl(`/pages2/mineinfo/hospitalList?flag=KESHI`)" ref="selectDepartment">
            <view class="flexD" style="width: 100%">
              <u-checkbox-group v-model="form.doctorUserType" placement="row" shape="circle" :disabled="formDisabled">
                <u-checkbox activeColor="#05b8d2" name="10" label="猫猫"></u-checkbox>
                <u-checkbox activeColor="#05b8d2" name="20" label="狗狗"></u-checkbox>
                <u-checkbox activeColor="#05b8d2" name="30" label="异宠"></u-checkbox>
              </u-checkbox-group>
            </view>
          </u-form-item>
          <u-line></u-line>

          <u-form-item labelWidth="160rpx" label="选择科室" prop="selectDepartment" borderBottom @click="!formDisabled && proxy.$h.jumpUrl(`/pages2/mineinfo/hospitalList?flag=KESHI`)" ref="selectDepartment">
            <u-input v-model="form.selectDepartment" disabled disabledColor="#ffffff" placeholder="请选择科室" border="none" inputAlign="right"></u-input>
            <template #right>
              <u-icon name="arrow-right" v-if="!['detail'].includes(Event?.type as string)"></u-icon>
            </template>
          </u-form-item>
          <u-line></u-line>

          <!-- <u-form-item labelWidth="160rpx" label="选择职称" prop="career" borderBottom @click="showActionSheepHandler('career')" ref="career"> -->
          <u-form-item labelWidth="160rpx" label="选择职称" prop="selectCareer" borderBottom @click="!formDisabled && proxy.$h.jumpUrl(`/pages2/mineinfo/hospitalList?flag=ZHICHENG`)" ref="career">
            <u-input v-model="form.selectCareer" disabled disabledColor="#ffffff" placeholder="请选择职称" border="none" inputAlign="right"></u-input>
            <template #right>
              <u-icon name="arrow-right" v-if="!['detail'].includes(Event?.type as string)"></u-icon>
            </template>
          </u-form-item>
          <u-line></u-line>

          <u-form-item labelWidth="160rpx" label="坐诊医院" prop="selectHospital" borderBottom @click="!formDisabled && proxy.$h.jumpUrl(`/pages2/mineinfo/hospitalList?flag=ZUOZHENYIYUAN`)" ref="career">
            <u-input v-model="form.selectHospital" disabled disabledColor="#ffffff" placeholder="请选择医院" border="none" inputAlign="right"></u-input>
            <template #right>
              <u-icon name="arrow-right" v-if="!['detail'].includes(Event?.type as string)"></u-icon>
            </template>
          </u-form-item>
          <view style="font-size: 18rpx; color: red">若为居家办公则选择宠物研究院</view>
          <view class="grayLine"></view>
          <u-form-item labelWidth="160rpx" label="毕业学校" prop="school" borderBottom ref="school">
            <u-input v-model="form.school" border="none" :disabled="formDisabled" disabledColor="#ffffff" placeholder="请输入毕业学校" inputAlign="right"></u-input>
          </u-form-item>
          <u-line></u-line>

          <u-form-item labelWidth="160rpx" label="专业" prop="speciality" borderBottom ref="speciality">
            <u-input v-model="form.speciality" border="none" :disabled="formDisabled" disabledColor="#ffffff" placeholder="请输入专业" inputAlign="right"></u-input>
          </u-form-item>
          <u-line></u-line>

          <u-form-item labelWidth="160rpx" label="执业编码" prop="code" borderBottom ref="code">
            <u-input v-model="form.code" border="none" :disabled="formDisabled" disabledColor="#ffffff" placeholder="请输入执业编码" inputAlign="right"></u-input>
          </u-form-item>
        </template>
        <template v-if="['detail'].includes(Event?.type as string)">
          <view class="formTitle">个人简介</view>
          <u-textarea v-model="form.introduction" :disabled="formDisabled" disabledColor="#ffffff" placeholder="请输入简介(150字以内)"></u-textarea>
          <u-line margin="34rpx 0 0 0"></u-line>
          <view class="formTitle">资质证明（{{ form.file.length }}/3）</view>
          <view class="formSubTitle" v-if="!formDisabled">请上传资格证书等其他专业性的证书</view>
          <view class="flexA">
            <view class="flexA fileImg" v-for="(_, index) in form.file">
              <image :src="proxy.$h.downFile(_)" class="fileimage" mode="aspectFill" @click="proxy.$h.previewImage(_)" />
              <image v-if="['edit'].includes(Event?.type as string)" src="/static/images/close.png" class="close" mode="aspectFill" @click="form.file.splice(index, 1)" />
            </view>
            <view v-if="form.file.length < 3 && !formDisabled" class="uploadImg" @click="uploadFormImgHandler">
              <view class="flexCCol">
                <image src="/static/images/addImg.png" mode="aspectFill" />
                <view>添加图片</view>
              </view>
            </view>
          </view>
          <view style="height: 60rpx"></view>
        </template>
      </u-form>

      <template v-if="step === 2">
        <view class="formTitle">个人简介</view>
        <u-textarea v-model="form.introduction" :disabled="formDisabled" disabledColor="#ffffff" placeholder="请输入简介(150字以内)"></u-textarea>
        <u-line margin="34rpx 0 0 0"></u-line>
        <view class="formTitle">资质证明（{{ form.file.length }}/3）</view>
        <view class="formSubTitle" v-if="!formDisabled">请上传资格证书等其他专业性的证书</view>
        <view class="flexA">
          <view class="flexA fileImg" v-for="(_, index) in form.file">
            <image :src="proxy.$h.downFile(_)" class="fileimage" mode="aspectFill" @click="proxy.$h.previewImage(_)" />
            <image v-if="['edit'].includes(Event?.type as string)" src="/static/images/close.png" class="close" mode="aspectFill" @click="form.file.splice(index, 1)" />
          </view>
          <view v-if="form.file.length < 3 && !formDisabled" class="uploadImg" @click="uploadFormImgHandler">
            <view class="flexCCol">
              <image src="/static/images/addImg.png" mode="aspectFill" />
              <view>添加图片</view>
            </view>
          </view>
        </view>
      </template>
    </view>
    <view class="remark" v-if="step === 2">
      1.自助核销兑换验券之前请确认所选门店是否正确，可前往首页查看门店信息是否为将去体验的门店信息 2.抖音验券请到抖音APP的订单详情页复制券码然后进行自助核销兑换验券
      3.核销验券之后的券会进入到您的卡包当中，可去门店预约时自动抵扣使用，若显示无法使用团购券，请核验团购券的可用门店，可用时间段。团购券过期后自动作废，不退款不退还不延期，请尽快使用
    </view>
    <view class="fixed-bottom" v-if="!['detail'].includes(Event?.type as string)">
      <view class="form-btns">
        <template v-if="step === 1">
          <up-button color="#05B8D2" shape="circle" text="下一步，去传证件" throttleTime="1500" @click="nextHandler"></up-button>
        </template>
        <template v-if="step === 2">
          <up-button type="info" plain shape="circle" text="上一步" throttleTime="1500" @click="step--"></up-button>
          <up-button v-if="!['detail'].includes(Event?.type as string)" color="#05B8D2" shape="circle" text="提交审核" throttleTime="1500" @click="submitAuthHandler"></up-button>
        </template>
      </view>
      <u-safe-bottom></u-safe-bottom>
    </view>
  </view>
  <u-action-sheet :show="showActionSheep" :actions="actions" :title="actionsTitle" @close="showActionSheep = false" @select="selectActionSheepHandler"></u-action-sheet>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, ComponentPublicInstance, watch } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { useSelectDataStore } from '../../store/selectData'
import { useAuthStore } from '@/store/auth'
import { updateRegister, getCareer, get_veterinary } from '../../api'
import { ApplyAuthType, CareerType, VeterinaryType, IndexListType } from '../../types'

interface EventType {
  type: string
  reapply?: string
}

const { proxy } = getCurrentInstance() as { proxy: ComponentPublicInstance }

const Event = ref<EventType>()

const { SelectDepartmentList, SelectCareerList, SelectHospitalList } = storeToRefs(useSelectDataStore())

const stepForm1 = ref()

const showActionSheep = ref(false)

const step = ref(1)

const formFlag = ref('')

const form = ref<ApplyAuthType>({
  realname: '',
  idNumber: '',
  sex: '', // 性别 0 未知 1 男 2 女
  department: [], // 科室 [多选]
  career: '', // 职称 [单选]
  hospital: '',
  school: '', // 学校
  speciality: '', // 专业
  code: '', // 执业编码
  introduction: '', // 个人简介
  qualifications: '', // 资质证明 [最多三张]
  file: [],
  selectDepartment: '',
  selectCareer: '',
  selectHospital: '',
  doctorUserType: []
})

const actions = ref()

const actionsTitle = ref('')

const rules = ref({
  realname: { type: 'string', required: true, message: '请填写姓名', trigger: ['blur', 'change'] },
  idNumber: { type: 'string', required: true, message: '请填写身份证号', trigger: ['blur', 'change'] },
  school: { type: 'string', required: true, message: '请填写毕业学校', trigger: ['blur', 'change'] },
  speciality: { type: 'string', required: true, message: '请填写专业', trigger: ['blur', 'change'] },
  code: { type: 'string', required: true, message: '请填写执业编码', trigger: ['blur', 'change'] },
  sex: { type: 'number', required: true, message: '请选择男或女', trigger: ['blur', 'change'] },
  selectDepartment: { type: 'string', required: true, message: '请选择科室', trigger: ['blur', 'change'] },
  selectCareer: { type: 'string', required: true, message: '请选择职称', trigger: ['blur', 'change'] },
  selectHospital: { type: 'string', required: true, message: '请选坐诊医院', trigger: ['blur', 'change'] },
  doctorUserType: { type: 'array', min: 1, required: true, message: '请选择种类', trigger: ['blur', 'change'] }
})

const formDisabled = ref<boolean>(false) // true 禁用代表回显数据  false 可以填写可以提交

const nextHandler = () => (formDisabled.value ? step.value++ : stepForm1.value.validate().then((res: boolean) => step.value++))

// SexType[]

interface actionsDataType {
  sex: () => { name: string; value: number }[]
  career: { name: string; value: string }[]
}

const actionsData = reactive<actionsDataType>({
  sex: () => [
    { name: '男', value: 1 },
    { name: '女', value: 2 }
  ],
  career: []
})

const ShowSelectData = ref({
  sex: '',
  career: '',
  department: ''
})

onLoad((e: EventType) => {
  if ([null, undefined, ''].includes(e.type)) {
    SelectDepartmentList.value.splice(0)
    SelectCareerList.value.splice(0)
    SelectHospitalList.value.splice(0)
  }
  Event.value = e

  if (['edit', 'detail'].includes(e.type)) getVeterinaryHandler()

  e.type === 'detail' && (formDisabled.value = true)

  getSelectDataHandler()
})

const showActionSheepHandler = (flag: string) => {
  if (formDisabled.value) return

  actionsTitle.value = flag === 'sex' ? '请选择性别' : '请选择职称'

  formFlag.value = flag

  uni.hideKeyboard()

  actions.value = typeof actionsData[flag] === 'function' ? actionsData[flag]() : actionsData[flag]

  showActionSheep.value = true
}

const selectActionSheepHandler = (e: any) => {
  console.log(formFlag.value)

  form.value[formFlag.value] = e.value

  ShowSelectData.value[formFlag.value] = e.name

  stepForm1.value.validateField(formFlag.value)
}

const uploadFormImgHandler = () =>
  proxy.$h.upload('/sys/common/upload', (e: { upImg: string }) => {
    form.value.file.length < 3 && form.value.file.push(e.upImg)

    form.value.qualifications = form.value.file.join()
  })

const submitAuthHandler = async () => {
  if (!form.value.file.length) return uni.$u.toast('请上传资质证明')

  const data: ApplyAuthType = {
    ...form.value,
    department: typeof form.value.department === 'string' ? form.value.department : JSON.stringify(form.value.department),
    career: typeof form.value.career === 'string' ? form.value.career : JSON.stringify(form.value.career),
    hospital: typeof form.value.hospital === 'string' ? form.value.hospital : JSON.stringify(form.value.hospital),
    doctorUserType: form.value.doctorUserType?.join()
  }

  await updateRegister(data)

  const delta = Event.value?.reapply === 'success' ? 2 : 1

  proxy.$h.timeCallBack('提交成功', 1500, delta)

  setTimeout(() => {
    useAuthStore().submitAuthState = true
  }, 1500)
}

const getSelectDataHandler = async () => {
  const { result }: { result: { records: IndexListType[] } } = await getCareer()

  actionsData.career = result.records.flatMap(item => item.list.map(_ => ({ value: _.id + '', name: _.name })))
}

const getVeterinaryHandler = async () => {
  const { result }: { result: VeterinaryType } = await get_veterinary()

  ShowSelectData.value.sex = proxy.$h.optObjectValue('sexData', result.sex)

  form.value = {
    ...result,
    file: result.qualifications.split(','),
    selectDepartment: JSON.parse(result.department as any)
      .map(item => item.name)
      .join(),
    selectCareer: proxy.$h.isJSON(result.career)
      ? JSON.parse(result.career)
          .map(item => item.name)
          .join()
      : result.career,
    selectHospital: proxy.$h.isJSON(result.hospital)
      ? JSON.parse(result.hospital as string)
          .map(item => item.name)
          .join()
      : result.hospital,
    doctorUserType: result.doctorUserType?.split(',')
  }
}

onShow(() => {
  if (SelectDepartmentList.value.length > 0) {
    form.value.selectDepartment = SelectDepartmentList.value.map((_: { id: string; name: string }) => _.name).join()

    form.value.department = SelectDepartmentList.value

    stepForm1.value.validateField('selectDepartment')
  }

  if (SelectCareerList.value.length > 0) {
    form.value.selectCareer = SelectCareerList.value.map(_ => _.name).join()

    form.value.career = SelectCareerList.value

    stepForm1.value.validateField('selectCareer')
  }

  if (SelectHospitalList.value.length > 0) {
    console.log(SelectHospitalList.value, '选择坐诊医院')
    form.value.selectHospital = SelectHospitalList.value.map(_ => _.name).join()

    form.value.hospital = SelectHospitalList.value

    stepForm1.value.validateField('selectHospital')
  }
})
</script>
<style>
/* page {
  background: #f7f8fa !important;
} */
</style>
<style lang="scss" scoped>
.step {
  &-top {
    background: #fff;
    box-sizing: border-box;
    padding: 44rpx 24rpx;
    margin-bottom: 20rpx;
  }
  &-num {
    width: 36rpx;
    height: 36rpx;
    box-sizing: border-box;
    padding: 2rpx 10rpx;
    border-radius: 50%;
    background: #cccccc;
    color: #ffffff;
    font-size: 24rpx;
    margin-right: 14rpx;
  }
  .numac {
    background: #05b8d2;
  }
  &-title {
    color: #cccccc;
    font-size: 30rpx;
    font-weight: 700;
  }
  .titleac {
    color: #05b8d2;
  }
  &-img {
    width: 52rpx;
    height: 52rpx;
  }
}
.main {
  box-sizing: border-box;
  padding: 0 32rpx;
  background: #fff;
  .formSubTitle {
    margin-bottom: 46rpx;
    color: #666666;
    font-size: 24rpx;
  }
  .fileImg {
    position: relative;
    .fileimage {
      width: 210rpx;
      height: 210rpx;
      border-radius: 24rpx;
      margin-right: 24rpx;
    }
    .fileimage:nth-child(3n) {
      margin-right: 0 !important;
    }
    .close {
      position: relative;
      position: absolute;
      top: 8rpx;
      right: 30rpx;
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      z-index: 99999999999999999 !important;
    }
  }
  .uploadImg {
    box-sizing: border-box;
    padding: 68rpx 60rpx 60rpx;
    border: 1rpx dashed #cbcbcb;
    color: #999999;
    font-size: 22rpx;
    font-weight: 700;
    image {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 4rpx;
    }
  }
  .formTitle {
    color: #323233;
    font-size: 30rpx;
    font-weight: 700;
    box-sizing: border-box;
    padding: 30rpx 0;
  }
}
:deep(.u-textarea) {
  background: #f8f8fa !important;
  margin: 0 auto;
  width: 656rpx;
  height: 322rpx;
  border-radius: 24rpx;
}
.remark {
  box-sizing: border-box;
  padding: 32rpx;
  font-size: 26rpx;
  color: #666666;
}
</style>