<template>
  <view class="auth">
    <view class="card user-info">
      <view class="title">个人信息</view>
      <view class="info-list">
        <view class="info-item">
          <view>姓名</view>
          <uv-input
            :readonly="getDisabled"
            border="none"
            inputAlign="right"
            v-model="userInfo.realname"
            placeholder="请输入姓名"
          />
        </view>
        <view class="info-item">
          <view>手机号</view>
          <uv-input
            readonly
            type="number"
            border="none"
            maxlength="11"
            inputAlign="right"
            v-model="userInfo.phone"
            placeholder="请输入手机号"
          />
        </view>
        <view class="info-item">
          <view><span class="required">*</span>身份证号</view>
          <uv-input
            :readonly="getDisabled"
            type="idcard"
            border="none"
            inputAlign="right"
            v-model="userInfo.idCardNumber"
            placeholder="请输入身份证号"
          />
        </view>
        <view class="info-item">
          <view><span class="required">*</span>银行卡号</view>
          <uv-input
            :readonly="getDisabled"
            type="number"
            border="none"
            inputAlign="right"
            v-model="userInfo.bankCardNumber"
            placeholder="请输入银行卡号"
          >
            <template v-slot:suffix>
              <uv-button
                type="default"
                :custom-style="customStyle"
                plain
                size="mini"
                @click="bindCardFn"
                >绑定银行卡</uv-button
              ></template
            >
          </uv-input>
        </view>
        <view class="info-item last-item">
          <view><span class="required">*</span>银行预留手机号</view>
          <uv-input
            type="number"
            border="none"
            inputAlign="right"
            v-model="userInfo.bankPhone"
            placeholder="请输入银行预留手机号"
          />
        </view>
      </view>
    </view>
    <view class="card auth-box">
      <view class="header">
        <view class="title">认证渠道</view>
        <view class="btn">
          <uv-button type="default" :custom-style="customStyle" plain size="mini"
            >协议补签</uv-button
          >
        </view>
      </view>
      <view class="cert-list">
        <radio-group @change="radioChange">
          <view
            class="list"
            v-for="item in loginStore.currentUserInfo.subjectLocationList"
            :key="item"
          >
            <label>{{ item && subjectLocationName[item] }}</label>
            <template v-if="getRadio(item)"> <radio :value="item" color="#6eb657" /></template>
            <template v-if="IS_IN_PROGRESS(item)">
              <view>已核身</view>
            </template>
            <template v-if="getStatusText(item)">
              <view>{{ getStatusName(item) }}</view>
            </template>
          </view>
        </radio-group>
      </view>
      <!-- 提交按钮 -->
      <view v-if="showSubmitBtn" class="submit">
        <button class="btn" @click="submitBtn">提 交</button>
      </view>
    </view>

    <!-- 协议展示弹窗 -->
    <uv-modal ref="agereementModal" title="业务合作协议" showCancelButton>
      <view class="agereement-content">
        <view class="agreement-policy">
          为开通共享经济业务，请阅读、勾选签署以下平台业务合作协议。点击勾选协议，即表示您已阅读并同意接受该协议内容。若不同意，请勿勾选。
        </view>

        <view class="checkbox-bar">
          <checkbox-group @change="agreemetChecked = !agreemetChecked">
            <checkbox :checked="agreemetChecked" style="transform: scale(0.6)" color="#6eb657" />
          </checkbox-group>
          <view class="read-content"
            >已阅读并同意<text class="primarily-text" @click="agreementFn"
              >《 {{ signAgreementMap[radioValue] && signAgreementMap[radioValue].name }}》</text
            ></view
          >
        </view>
      </view>
      <template v-slot:confirmButton>
        <view class="agereement-btns">
          <button class="agereement-btn cancel" @click="agereementCancel">取消</button>
          <button class="agereement-btn confirm" @click="agereementConfirm">确定</button>
        </view>
      </template>
    </uv-modal>
  </view>
</template>

<script setup lang="ts">
import { onShow, onLoad, onUnload } from '@dcloudio/uni-app'
import { ref, reactive, computed } from 'vue'
import { useLoginStore } from '@/store/login'
import { useAuth } from '@/store/auth'
import { subjectLocationName, signAgreementMap, notCertMap } from './constants/index'

import useRadio from './hook/useRadio'
import useAuthFn from './hook/useAutnFn'

onLoad(() => {
  uni.onAppShow(authBackHandler)
})
onUnload(() => {
  uni.offAppShow(authBackHandler)
})

// pinia数据
const loginStore = useLoginStore()
const authStore = useAuth()

const currentUserInfo = ref()
// 提交信息的用户表单
const userInfo = reactive({
  realname: loginStore.currentUserInfo?.realname,
  phone: loginStore.currentUserInfo?.phone,
  idCardNumber: loginStore.currentUserInfo?.idCardNumber,
  bankCardNumber: loginStore.currentUserInfo?.bankCardNumber,
  bankPhone: loginStore.currentUserInfo?.bankPhone
})

onShow(async () => {
  await loginStore.getUserInfoByCode()
  currentUserInfo.value = loginStore.currentUserInfo
  userInfo.bankCardNumber = loginStore.currentUserInfo?.bankCardNumber
  userInfo.bankPhone = loginStore.currentUserInfo?.bankPhone

  // agreementUrl有值 是从签名页面返回
  if (authStore.agreementUrl) {
    agreementUrl.value = authStore.agreementUrl
    // 协议签署成功
    signAgreeSuccess()
    // 清空签署的协议
    authStore.setAgreementUrl('')
  }
})

// 当前用户的certList数据
const certList = computed(() => loginStore.currentUserInfo.certList)

// 获取单选框状态
const { getRadio, IS_IN_PROGRESS, getStatusText, getStatusName } = useRadio(certList)
const getDisabled = computed(() => {
  if (!certList?.value?.length) return false
  let flag = certList.value.every((item: any) => {
    let currMap = notCertMap[item.subjectLocation]
    return currMap.includes(item.certStatus)
  })
  return !flag
})

// 是否展示提交按钮
const showSubmitBtn = computed(() => {
  const subjectLocationList = loginStore.currentUserInfo.subjectLocationList
  // 显示radio的情况  存在radio, 即可提交
  const isRadio = subjectLocationList?.map((item: string) => getRadio(item))
  return isRadio
})

const customStyle = {
  border: '2rpx solid #000',
  height: '50rpx',
  background: '#f8f8f8',
  borderRadius: '10rpx'
}

// 选中的认证渠道
const radioValue = ref()
const radioChange = (e: any) => {
  radioValue.value = e.detail.value
}
// 去绑卡
const bindCardFn = () => {
  uni.navigateTo({
    url: '/pages-sub-mine/bind-card/index'
  })
}

// 认证函数
const {
  checkInfo,
  saveBaseInfo,
  authCertFn,
  signCertFn,
  authBackHandler,
  signAgreeSuccess,
  agereementModal,
  agreemetChecked,
  agreementUrl
} = useAuthFn(userInfo, radioValue, certList)

const submitBtn = async () => {
  // 校验信息
  if (!checkInfo()) return
  // 保存基本信息
  await saveBaseInfo()
  // 发起签约 人力家不需要签约
  if (radioValue.value === 'REN_LI_JIA') {
    authCertFn()
  } else {
    // 增员
    signCertFn()
  }
}

const agreementFn = () => {
  uni.navigateTo({
    url: signAgreementMap[radioValue.value].path
  })
}

// 协议确定
const agereementConfirm = () => {
  if (!agreemetChecked.value) {
    return uni.showToast({
      title: '请先勾选相关协议',
      icon: 'none'
    })
  }
  uni.navigateTo({
    url: `/pages-sub-task/signature/index`
  })
  agereementCancel()
}

// 协议弹窗关闭
const agereementCancel = () => {
  agereementModal.value.close()
  agreemetChecked.value = false
}
</script>

<style lang="scss" scoped>
.auth {
  height: 100vh;
  background: #f4f4f4;
  .card {
    background: #ffffff;
    padding: 20rpx 30rpx;
  }
  .user-info {
    .title {
      font-size: 30rpx;
      font-weight: bolder;
      color: #000;
    }
    .info-list {
      margin-top: 20rpx;
      .info-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #d8d8d8;
        font-size: 28rpx;
        line-height: 34rpx;
        .required {
          color: red;
        }
      }
      .last-item {
        border-bottom: none;
      }
    }
  }
  .auth-box {
    margin-top: 30rpx;
    min-height: 350rpx;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10rpx 0;
      line-height: 90rpx;
      .title {
        color: #000;
        font-size: 30rpx;
        font-weight: bolder;
      }
    }
    .cert-list {
      margin-top: 20rpx;
      .list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2rpx solid #ccc;
        height: 80rpx;
        line-height: 80rpx;
      }
    }
  }
  .submit {
    background: #ffffff;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120rpx;

    .btn {
      background-color: #6eb657;
      width: 690rpx;
      color: #fff;
    }
  }
}
.agereement-content {
  .agreement-policy {
    font-size: 30rpx;
    line-height: 46rpx;
  }
  .checkbox-bar {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 40rpx;
    .read-content {
      .primarily-text {
        color: #6eb657;
      }
    }
  }
}
.agereement-btns {
  display: flex;
  justify-content: space-between;

  .agereement-btn {
    border: none;
    background: none;
    font-size: 32rpx;
  }
  .cancel {
    color: #666;
  }
  .confirm {
    color: #6eb657;
  }
}
</style>
