<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { ref, reactive } from 'vue'
  import CardInput from '../components/card-input.vue'
  import { useUI } from '@/utils/use-ui'
  import { navigateBack } from '@/utils/router'
  import { getUserIdCard, addUserIdCard } from '@/api/my-index'
  import { validateIdCard, validatePhone } from '@/utils/validate'
  import { addAnchor, getAnchorDetail } from '@/api/tui-kit'

  const { showToast } = useUI()

  const props = defineProps({
    // 主播申请模式
    isLiveStream: {
      type: Boolean,
      default: false
    }
  })

  /**
   * 主播申请状态
   * 0 待审核 1 审核通过 2 审核拒绝 3 已封禁 9 新增
   */
  const stateLiveAnchor = defineModel({
    type: Number,
    default: 9
  })

  const loading = ref(true)
  /** 身份证状态：0 新增 1 等待审核 2 编辑 3 不可以修改和新增 */
  const stateData = ref(0)
  const formData = reactive({
    // 修改id
    id: '',
    // 正面
    front: '',
    // 背面
    back: '',
    // 姓名
    realName: '',
    // 身份证号码
    idCard: '',
    // 联系电话
    phone: '',
    frontList: [],
    backList: []
  })

  const getData = async () => {
    loading.value = true
    const res = await getUserIdCard()
    if (res?.data) {
      formData.id = res.data.id
      formData.front = res.data.idCardFrontUrl
      formData.back = res.data.idCardBackUrl
      formData.realName = res.data.realName
      formData.idCard = res.data.idCardNumber
      formData.frontList = [{ url: res.data.idCardFrontUrl }]
      formData.backList = [{ url: res.data.idCardBackUrl }]
      stateData.value = res.data.status
    } else {
      stateData.value = 0
    }

    loading.value = false
  }

  const onAddCode = async () => {
    if (!formData.front) {
      showToast('请上传身份证人像面')
      return
    }
    if (!formData.back) {
      showToast('请上传身份证国徽面')
      return
    }
    if (!formData.realName) {
      showToast('请输入姓名')
      return
    }
    const codeData = validateIdCard(formData.idCard)
    if (!codeData.valid) {
      showToast(codeData.message)
      return
    }

    const data = {
      id: formData.id,
      idCardFrontUrl: formData.front,
      idCardBackUrl: formData.back,
      realName: formData.realName,
      idCardNumber: formData.idCard
    }
    await addUserIdCard(data, stateData.value === 0 ? 'post' : 'put')

    if (props.isLiveStream) {
      await getData()
      await showToast(`添加成功`, 'success')
    } else {
      await showToast(`添加成功`, 'success')
      navigateBack()
    }
  }

  /** 主播申请 */
  const onAddStreamer = async () => {
    const phoneData = validatePhone(formData.phone)
    if (!phoneData.valid) {
      showToast(phoneData.message)
      return
    }

    const id = await getAnchorDetail()

    const data = {
      id: id?.data?.id || '',
      idCardFront: formData.front,
      idCardBack: formData.back,
      realName: formData.realName,
      idCard: formData.idCard,
      phone: formData.phone
    }
    const res = await addAnchor(
      data,
      stateLiveAnchor.value === 9 ? 'post' : 'put'
    )
    stateLiveAnchor.value = res.data.status
  }

  onLoad(() => {
    getData()
  })
</script>

<template>
  <view v-if="!loading" class="real-id">
    <view v-if="[0, 2, 3].includes(stateData)">
      <!-- 主播申请输入 -->
      <view
        v-if="props?.isLiveStream && [9, 2].includes(stateLiveAnchor)"
      >
        <text v-if="stateLiveAnchor === 9" class="top-text">
          *添加手机号审核
        </text>
        <text v-else class="top-text">*信息填写有误</text>
        <CardInput
          v-model="formData.phone"
          title="联系电话"
          placeholder="请输入联系电话"
        ></CardInput>
      </view>
      <view
        v-if="
          (props?.isLiveStream && [0, 2].includes(stateData)) ??
          [0, 2, 3].includes(stateData)
        "
      >
        <!-- 实名认证输入 -->
        <!-- 说明 -->
        <text v-if="stateData === 2" class="top-text">
          *审核未通过请重新上传
        </text>
        <text v-else-if="stateData === 0" class="top-text">
          *为保证您的账户安全,请先完成实名认证
        </text>
        <text v-else class="top-text">*您已完成实名认证</text>
        <CardInput :is-input="false" title="证件">
          <view class="qrcode-box">
            <cb-file-picker
              v-model="formData.front"
              v-model:list="formData.frontList"
              :readonly="stateData === 3"
              isFront
            ></cb-file-picker>
            <cb-file-picker
              v-model="formData.back"
              v-model:list="formData.backList"
              :readonly="stateData === 3"
              isBack
            ></cb-file-picker>
          </view>
        </CardInput>

        <CardInput
          v-model="formData.realName"
          title="姓名"
          placeholder="请输入姓名"
          :disabled="stateData === 3"
        ></CardInput>

        <CardInput
          v-model="formData.idCard"
          title="身份证号"
          placeholder="请输入身份证号"
          :disabled="stateData === 3"
        ></CardInput>
      </view>
      <!-- 底部按钮 v-if="props?.isLiveStream && stateData === 3" -->
      <bottom-view
        v-if="
          props?.isLiveStream &&
          stateData === 3 &&
          [9, 2].includes(stateLiveAnchor)
        "
      >
        <cb-button @click="onAddStreamer">确认</cb-button>
      </bottom-view>
      <bottom-view v-if="stateData !== 3">
        <cb-button @click="onAddCode">
          确认{{ formData.id ? '修改' : '添加' }}
        </cb-button>
      </bottom-view>
    </view>
    <view v-if="stateData == 1 || stateLiveAnchor == 0" class="wait-view">
      <image
        src="/static/images/my-index/date-icon.png"
        mode="heightFix"
        class="icon-img"
      ></image>
      <text>等待审核</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import '../styles/index.scss';

  .real-id {
    padding: 32rpx 24rpx;
    font-family: PingFang SC, PingFang SC;
    font-style: normal;
    text-transform: none;
    .top-text {
      display: block;
      font-weight: 500;
      font-size: 24rpx;
      color: #999999;
      margin-bottom: 32rpx;
    }

    .qrcode-box {
      display: flex;
      justify-content: space-between;
    }
  }

  .wait-view {
    margin-top: 10vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .icon-img {
      height: 60rpx;
    }
    text {
      margin-top: 20rpx;
      display: block;
      font-weight: 500;
      font-size: 30rpx;
      color: #999999;
      margin-bottom: 32rpx;
    }
  }
</style>
