<template>
  <view class="">
    <view v-if="state == -1">
      <Navigater :title="t('rongzi.title')" />
      <scroll-view scroll-y :style="{ height: 'calc(100vh - 3.125rem)' }">
        <view class="money">
          <view class="money-bg">
            <image :src="`/static/image/index/rongzi/bg_${locale}.png`" class="top-bg"></image>
          </view>
          <view class="tab-flex">
            <view class="tab-li">
              <view>
                <image src="/static/image/index/rongzi/sh.png" class="icon"></image>
              </view>
              <view class="desc">{{ t('rongzi.tip1') }}</view>
              <view class="main">{{ t('rongzi.tip2') }}</view>
            </view>
            <view class="tab-li">
              <view>
                <image src="/static/image/index/rongzi/hk.png" class="icon"></image>
              </view>
              <view class="desc">{{ t('rongzi.tip3') }}</view>
              <view class="main">{{ t('rongzi.tip4') }}</view>
            </view>
            <view class="tab-li">
              <view>
                <image src="/static/image/index/rongzi/lilv.png" class="icon"></image>
              </view>
              <view class="desc">{{ t('rongzi.tip5') }}</view>
              <view class="main">{{ t('rongzi.tip6') }}</view>
            </view>
          </view>
          <view class="sq-txt">{{ t('rongzi.tip7') }}</view>
          <view class="color-gary">
            <view>{{ t('rongzi.tip8') }}</view>
            <view>{{ t('rongzi.tip9') }}</view>
            <view>{{ t('rongzi.tip10') }}</view>
          </view>

          <view class="info-box">
            <view>{{ t('rongzi.tip11') }}</view>
            <view class="list">
              <view style="width: auto">￥</view>
              <input v-model="params.money" style="font-size: 1.3125rem" type="number" :placeholder="t('rongzi.tip12')" />
            </view>
            <view class="xian"></view>
          </view>

          <view class="info-box">
            <view class="fs-16 list">{{ t('rongzi.tip13') }}</view>
            <view class="xian"></view>
            <view class="list">
              <view class="list-title">{{ t('rongzi.tip15') }}</view>
              <view>
                <input v-model="params.name" :placeholder="t('rongzi.tip14')" class="info-input" />
              </view>
            </view>
            <view class="xian"></view>
            <view class="list">
              <view class="list-title">{{ t('rongzi.tip16') }}</view>
              <view>
                <input v-model="params.card" :placeholder="t('rongzi.tip17')" class="info-input" />
              </view>
            </view>
            <view class="xian"></view>
            <view class="list">
              <view class="list-title">{{ t('rongzi.tip18') }}</view>
              <view>
                <input v-model="params.address" :placeholder="t('rongzi.tip19')" class="info-input" />
              </view>
            </view>
            <view class="xian"></view>
            <view class="list">
              <view class="list-title">{{ t('rongzi.tip20') }}</view>
              <view>
                <input v-model="params.phone" :placeholder="t('rongzi.tip21')" class="info-input" />
              </view>
            </view>
            <view class="xian"></view>
            <view class="list">
              <view class="list-title">{{ t('rongzi.tip22') }}</view>
              <view>
                <input v-model="params.mail" :placeholder="t('rongzi.tip23')" class="info-input" />
              </view>
            </view>
            <!-- <view class="xian"></view>
            <view class="">
              <view class="mt-10">財務信息</view>
              <view class="c-79 mt-10"> 收入或相關資產證明職業和工作信息 </view>
              <view class="upload-Image">
                <view @click="uploadImage(1)">
                  <image v-if="!isUploading1" src="/static/image/index/rongzi/sc.png" class="file-box"></image>
                  <view v-else class="file-box u-flex u-row-center"> </view>
                </view>
                <view>
                  <image :src="id_card_img_1" class="file-box ml-10"></image>
                </view>
              </view>
            </view>
            <view class="xian"></view>
            <view class="">
              <view class="mt-10">信用信息</view>
              <view class="c-79 mt-10"> 信用報告（可選，可有助于提高信貸批核機會） </view>
              <view class="upload-Image">
                <view @click="uploadImage(2)">
                  <image v-if="!isUploading2" src="/static/image/index/rongzi/sc.png" class="file-box"></image>
                  <view v-else class="file-box u-flex u-row-center"> </view>
                </view>
                <view>
                  <image :src="id_card_img_2" class="file-box ml-10"></image>
                </view>
              </view>
            </view>
            <view class="xian"></view>
            <view class="">
              <view class="mt-10">其他支持文件</view>
              <view class="c-79 mt-10"> 證明文件（如身分證、居住證明）任何其他支持申請的資質文件 </view>
              <view class="upload-Image">
                <view @click="uploadImage(3)">
                  <image v-if="!isUploading3" src="/static/image/index/rongzi/sc.png" class="file-box"></image>
                  <view v-else class="file-box u-flex u-row-center"> </view>
                </view>
                <view>
                  <image :src="id_card_img_3" class="file-box ml-10"></image>
                </view>
              </view>
            </view> -->
          </view>
          <view class="sumbit" @click="saveSumbit()">{{ t('rongzi.tip24') }}</view>
        </view>
      </scroll-view>
    </view>
    <view v-else class="state-container">
      <image class="state-image" :src="imageUrl" />
      <view class="tip1">{{ tip1 }}</view>
      <view class="tip2">{{ tip2 }}</view>
      <view class="but-box">
        <view class="first" @click="goWeb()">{{ t('rongzi.tip36') }}</view>
        <view v-if="state == 0" class="last" @click="switchTab('/pages/index/index')">{{ t('rongzi.tip37') }}</view>
        <view v-else-if="state == 1" class="last" @click="state = -1">{{ t('rongzi.tip25') }}</view>
        <view v-else-if="state == 2" class="last" @click="state = -1">{{ t('rongzi.tip26') }}</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onShow } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n'
import { getRongziApi, rongziApi } from '@/api/index/index'
import { switchTab } from '@/common/common'
import { ref, computed } from 'vue'
import { getCzhiurlApi } from '@/api/user'
// import config from '@/utils/config'
const { t, locale } = useI18n()
// 页面基础配置
onShow(() => {
  getRongziList()
  getCzhiurlFn()
})

const kefu_url = ref('')

const getCzhiurlFn = async () => {
  const res = await getCzhiurlApi()
  if (res.code === 1) {
    kefu_url.value = res.data.kefu_url
  }
}

const goWeb = () => {
  window.open(kefu_url.value)
}

// 獲取融资详情
const rongziInfo = ref({})
const getRongziList = async () => {
  const res = await getRongziApi()
  rongziInfo.value = res.data.data
  console.log(res.data)
  // state.value = res.data.state === 0 ? 0 : -1
  if (res.data?.state === 0) {
    state.value = 0
  } else if (res.data?.state === 1) {
    state.value = 1
  } else if (res.data?.state === 2) {
    state.value = 2
  } else {
    state.value = -1
  }
  state.value = -1

  // state.value = 2
  // console.log(state.value)
}

const state = ref(-1)
const tip1 = computed(() => {
  const text = [t('rongzi.tip27'), t('rongzi.tip28'), t('rongzi.tip29')]
  return text[state.value]
})
const tip2 = computed(() => {
  const text2 = [t('rongzi.tip30'), t('rongzi.tip31'), t('rongzi.tip32')]
  return text2[state.value]
})
const imageUrl = computed(() => {
  const text2 = ['/static/image/index/rongzi/shenhezhong.png', '/static/image/index/rongzi/tongguo.png', '/static/image/index/rongzi/butongguo.png']
  return text2[state.value] || ''
})

// const isUploading1 = ref(false)
// const isUploading2 = ref(false)
// const isUploading3 = ref(false)
// const id_card_img_1 = ref(null)
// const id_card_img_2 = ref(null)
// const id_card_img_3 = ref(null)

// const uploadImage = async (type: any) => {
//   uni.chooseImage({
//     success: async (chooseImageRes) => {
//       switch (type) {
//         case 1:
//           if (isUploading1.value) {
//             uni.showToast({
//               title: '正在上傳中',
//               icon: 'loading'
//             })
//           } else {
//             isUploading1.value = true
//           }
//           break
//         case 2:
//           if (isUploading2.value) {
//             uni.showToast({
//               title: '正在上傳中',
//               icon: 'loading'
//             })
//           } else {
//             isUploading2.value = true
//           }
//           break
//         case 3:
//           if (isUploading3.value) {
//             uni.showToast({
//               title: '正在上傳中',
//               icon: 'loading'
//             })
//           } else {
//             isUploading3.value = true
//           }
//           break
//       }
//       const tempFilePaths = chooseImageRes.tempFilePaths
//       uni.uploadFile({
//         url: config.baseURL + '/common/upload', // 仅爲示例，非真实的接口地址
//         filePath: tempFilePaths[0],
//         name: 'file',
//         header: {
//           token: uni.getStorageSync('token')
//         },
//         success: (uploadFileRes) => {
//           const resData = JSON.parse(uploadFileRes.data)
//           if (resData.code !== 1) {
//             uni.showToast({
//               title: '上傳失敗',
//               icon: 'error'
//             })
//             return
//           }
//           console.log(resData)
//           switch (type) {
//             case 1:
//               id_card_img_1.value = resData.data.fullurl
//               params.value.income = resData.data.url // 收入或资产证明
//               isUploading1.value = false
//               break
//             case 2:
//               id_card_img_2.value = resData.data.fullurl
//               params.value.credit = resData.data.url // 信用报告
//               isUploading2.value = false
//               break
//             case 3:
//               id_card_img_3.value = resData.data.fullurl
//               params.value.qualifications = resData.data.url // 任何其他支持申请的资质文件
//               isUploading3.value = false
//               break
//           }
//         },
//         complete: () => {
//           switch (type) {
//             case 1:
//               isUploading1.value = false
//               break
//             case 2:
//               isUploading2.value = false
//               break
//             case 3:
//               isUploading3.value = false
//               break
//           }
//         }
//       })
//     }
//   })
// }

const params = ref({
  money: null,
  name: null,
  card: null,
  address: null,
  phone: null,
  mail: null,
  income: null,
  credit: null,
  qualifications: null
})

const saveSumbit = async () => {
  if (params.value.money < 500000) {
    return uni.showToast({
      icon: 'none',
      title: t('rongzi.tip33')
    })
  }
  if (params.value.money > 3000000) {
    return uni.showToast({
      icon: 'none',
      title: t('rongzi.tip34')
    })
  }
  // if (isUploading1.value || isUploading2.value || isUploading3.value) {
  //   return uni.showToast({
  //     icon: 'none',
  //     title: '文件資料未上傳完成'
  //   })
  // }
  if (validInfo() === true) {
    const res = await rongziApi(params.value)
    if (res.code === 1) {
      state.value = 0
    }
  }
}

const validInfo = () => {
  if (params.value.name && params.value.card && params.value.address && params.value.phone && params.value.mail) {
    // if (params.value.name && params.value.card && params.value.address && params.value.phone && params.value.mail && params.value.income && params.value.credit && params.value.qualifications) {
    return true
  } else {
    uni.showToast({
      icon: 'none',
      title: t('rongzi.tip35')
    })
    return false
  }
}
</script>
<style scoped lang="scss">
.uni-app--maxwidth {
  overflow-x: hidden;
}

.money {
  padding-bottom: 1.875rem;
  background: #eff5ff !important;
}

.header {
  position: fixed;
  background: #ffffff;
  width: 100%;
  display: flex;
  height: 3.125rem;
  padding: 0.625rem;
  z-index: 9;
  display: flex;
  justify-content: space-between;

  .back {
    width: 0.5rem;
    height: 1rem;
  }

  .title {
    margin-right: 2.5rem;
    color: #000;
  }
}

.money-bg {
  // padding-top: 50px;
}

.top-bg {
  width: 100%;
  height: 18.75rem;
}

.tab-flex {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  // margin: 15.0016px 10px;
  padding: 1.625rem 0.4688rem 0 0.4688rem;
  width: 100%;
}

.tab-li {
  text-align: center;
  width: 33%;

  .icon {
    width: 2.5rem;
    height: 2.375rem;
  }

  .desc {
    color: #29a5ff;
    margin-top: 0.3125rem;
  }

  .main {
    color: #666666;
    margin-top: 0.3125rem;
  }
}

.sq-txt {
  margin: 0.625rem;
  color: #29a5ff;
}

.color-gary {
  color: #666666;
  margin: 0.3125rem 0.625rem;
}

.info-box {
  margin: 1.25rem 0.625rem;
  // background: #272a33;
  background: #ffffff;
  border-radius: 0.625rem;
  padding: 0.625rem;
}

.fs-16 {
}

.xian {
  border-bottom: 0.0625rem solid #36394225;
}

.list {
  // height: 2.5rem;
  line-height: 2.5rem;
  display: flex;
  align-items: center;
  ::v-deep .uni-input-input {
    font-size: 0.875rem;
    color: #141414;
  }
  ::v-deep .uni-input-placeholder {
    font-size: 0.875rem;
  }
}
.list .list-title {
  width: 6.4375rem;
  line-height: 1.375rem;
}

.list > view {
  width: 8.125rem;
  font-size: 0.875rem;
}

.c-79 {
  color: #797c84;
}

.mt-10 {
  margin-top: 0.625rem;
}

input {
  font-size: 1.125rem;
  width: 15rem;
  height: 1.875rem;
  line-height: 0.9375rem;
  color: #141414;
}

input::placeholder {
  color: #251c16;
}

.file-box {
  width: 6.25rem;
  height: 6.25rem;
  margin-top: 0.9375rem;
  margin-bottom: 0.9375rem;
  border-radius: 0.625rem;
}

.sumbit {
  background: #29a5ff;
  margin: 0.625rem;
  color: #ffffff;
  border-radius: 0.3125rem;

  line-height: 3.125rem;
  text-align: center;
}

.upload-Image {
  display: flex;
  align-items: center;
}

.ml-10 {
  margin-left: 0.625rem;
}

.state-container {
  text-align: center;

  .state-image {
    width: 7.5rem;
    height: 7.5rem;
    margin: 2.8125rem auto 1.5625rem auto;
    display: block;
  }

  .tip1 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
  }

  .tip2 {
    font-size: 1rem;
    font-weight: 400;
    color: #a6a6a6;
    padding: 0.5rem 0 2.25rem 0;
  }

  .but-box {
    display: flex;
    justify-content: space-around;

    view {
      width: 9.5rem;
      height: 2.9375rem;
      line-height: 2.9375rem;
      border-radius: 0.625rem;
    }

    .first {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      background: #08182b;
      // border: 0.0625rem solid rgb(41, 165, 255);
      color: #fff;
      border-radius: 1.5625rem;
      padding: 0 1.9375rem;
    }

    .last {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      background: rgb(69, 217, 253);

      color: $uni-color-primary;
      border-radius: 1.5625rem;
    }
  }
}
</style>
