<template>
<div class="app-container home">
    <banner-bar v-if="bannerList&&bannerList.length" class="banner-bar" :options="bannerList" @close="closeBanner" :show="showBanner" />
    <div class="page-content">
        <div class="title-bar">
            <span class="title">{{ t('personal.title') }}</span>
        </div>
        <div class="mt-tabs">
            <div class="tab-items">
            <div :class="['tab-item', { 'tab-item-active': activeMtName === 'personalData'}]" @click="tabClick('personalData')">{{ t('personal.personalData') }}</div>
            <div v-show="authStatus && authStatus.email == 1 && authStatus.identity == 1 && authStatus.address == 1" :class="['tab-item', { 'tab-item-active': activeMtName === 'financeData'}]" @click="tabClick('financeData')">{{ t('personal.financeData') }}</div>
            <div :class="['tab-item', { 'tab-item-active': activeMtName === 'safeData'}]" @click="tabClick('safeData')">{{ t('personal.safeData') }}</div>
            </div>
            <div class="tab-active-bar"></div>
        </div>
        <div class="mt-table" v-show="activeMtName ==='personalData'">
          <el-space wrap style="width: 100%;margin-top: 20px;" :size="20">
            <el-card class="mt-account-card" >
                <svg-icon icon-class="mail" class="card-icon" />
                <div class="card-title">{{ t('personal.verification-mail') }}</div>
                <div class="card-error" v-if="authStatus.email == 0" >
                    <svg-icon icon-class="error" style="width: 20px;height: 20px;margin-right: 5px;" />
                    <span>{{ t('personal.noAuth') }}</span>
                </div>
                <div class="card-success" v-if="authStatus.email == 1">
                  <svg-icon icon-class="success" style="width: 20px;height: 20px;margin-right: 5px;" />
                  <span>{{ t('personal.isAuth') }}</span>
                </div>
                <div style="width: 296px;text-align: center;position: absolute; bottom: 42px;">
                    <el-button v-if="authStatus.email == 0" class="open-btn" type="primary" @click="openVerificationMail" >{{ t('personal.verification') }}</el-button>
                </div>
            </el-card>
            <el-card class="mt-account-card" >
                <svg-icon icon-class="person" class="card-icon" />
                <div class="card-title">{{ t('personal.verification-person') }}</div>
                <div style="width: 296px;text-align: center;position: absolute; bottom: 42px;" >
                    <el-button :disabled="authStatus.email == 0" v-if="(authStatus.address != 1 || authStatus.identity != 1 || authStatus.email != 1)" class="open-btn" type="primary" @click="openProfile" >{{ t('personal.edit') }}</el-button>
                    <el-button v-else class="open-btn" type="primary" @click="openProfile" >{{ t('personal.view') }}</el-button>
                </div>
            </el-card>
            <el-card class="mt-account-card" >
                <svg-icon icon-class="voucher" class="card-icon" />
                <div class="card-title">{{ t('personal.verification-voucher') }}</div>
                <div class="card-error" v-if="authStatus.identity == 0" >
                    <svg-icon icon-class="error" style="width: 20px;height: 20px;margin-right: 5px;" />
                    <span>{{ t('personal.noAuth') }}</span>
                </div>
                <div class="card-success" v-if="authStatus.identity == 1">
                  <svg-icon icon-class="success" style="width: 20px;height: 20px;margin-right: 5px;" />
                  <span>{{ t('personal.isAuth') }}</span>
                </div>
                <div class="card-success" v-if="authStatus.identity == 2">
                  <svg-icon icon-class="success" style="width: 20px;height: 20px;margin-right: 5px;" />
                  <span>{{ t('personal.isApply') }}</span>
                </div>
                <div style="width: 296px;text-align: center;position: absolute; bottom: 42px;">
                    <el-button :disabled="authStatus.email == 0 || ifImprove == 0" v-if="authStatus.identity == 0 || authStatus.identity == 2" class="open-btn" type="primary" @click="openVoucher" >{{ t('personal.verification') }}</el-button>
                    <el-button v-else class="open-btn" type="primary" @click="openVoucher" >{{ t('personal.view') }}</el-button>
                </div>
            </el-card>
            <el-card class="mt-account-card" >
                <svg-icon icon-class="addr" class="card-icon" />
                <div class="card-title">{{ t('personal.verification-addr') }}</div>
                <div class="card-error" v-if="authStatus.address == 0" >
                    <svg-icon icon-class="error" style="width: 20px;height: 20px;margin-right: 5px;" />
                    <span>{{ t('personal.noAuth') }}</span>
                </div>
                <div class="card-success" v-if="authStatus.address == 1">
                  <svg-icon icon-class="success" style="width: 20px;height: 20px;margin-right: 5px;" />
                  <span>{{ t('personal.isAuth') }}</span>
                </div>
                <div class="card-success" v-if="authStatus.address == 2">
                  <svg-icon icon-class="success" style="width: 20px;height: 20px;margin-right: 5px;" />
                  <span>{{ t('personal.isApply') }}</span>
                </div>
                <div style="width: 296px;text-align: center;position: absolute; bottom: 42px;">
                    <el-button :disabled="authStatus.email == 0 || authStatus.identity == 0 || ifImprove == 0" v-if="authStatus.address == 0 || authStatus.address == 2" class="open-btn" type="primary" @click="openDzzm" >{{ t('personal.verification') }}</el-button>
                    <el-button v-else class="open-btn" type="primary" @click="openDzzm" >{{ t('personal.view') }}</el-button>
                </div>
            </el-card>
          </el-space>
            <verification-mail v-model:show="showVerificationMail" />
            <profile v-model:show="showProfile" />
            <voucher v-model:show="showVoucher" />
            <dzzm v-model:show="showDzzm" />
        </div>
        <div class="mt-table" v-show="activeMtName ==='financeData'">
            <div class="bank-wrap">
              <div class="bank-type-line" >{{ t('finance.b1') }}</div>
              <el-space alignment="start" wrap :size="27">
                <div class="bank-card" v-for="(item, index) in bankList1" :key="index" @click="openCreatBank1(item)" >
                  <div class="head-line1" ></div>
                  <div class="head-line2" ></div>
                  <div class="bank-name-line">
                    <div class="bank-name" :title="item.bank_name" >{{ item.bank_name }}</div>
                    <div class="bank-status">
                      <el-tag v-if="item.apply_status == 0" type="success" size="large" effect="light" >{{ t('common.status.pass') }}</el-tag>
                      <el-tag v-if="item.apply_status == 1" type="warning" size="large" effect="light" >{{ t('common.status.apply') }}</el-tag>
                      <el-tag v-if="item.apply_status == 2" type="danger" size="large" effect="light" >{{ t('common.status.reject') }}</el-tag>
                    </div>
                  </div>
                  <div class="bank-info">
                    <svg-icon icon-class="dot" class="info-icon" />
                    <span>{{ item.bank_no }}</span>
                  </div>
                  <div class="bank-info">
                    <svg-icon icon-class="dot" class="info-icon" />
                    <span>{{ item.bank_currency }}</span>
                  </div>
                  <div class="bank-info">
                    <svg-icon icon-class="dot" class="info-icon" />
                    <span>{{ item.first_name }} {{ item.last_name }}</span>
                  </div>
                  <div class="bank-info">
                    <svg-icon icon-class="dot" class="info-icon" />
                    <span>{{ item.bank_sub_name }}</span>
                  </div>
                </div>
                <div class="bank-card bank-new" @click="openCreatBank1(null)" >
                  <div class="head-line1" ></div>
                  <div class="head-line2" ></div>
                  <svg-icon icon-class="largePlus" class="plus-icon" />
                  <div class="plus-text">
                    <svg-icon icon-class="bank1" class="plus-icon-mini" />
                    <div>{{ t('finance.add1') }}</div>
                  </div>
                </div>
              </el-space>
            </div>
            <div class="bank-wrap">
              <div class="bank-type-line" >{{ t('finance.b2') }}</div>
              <el-space alignment="start" wrap :size="27">
                <div class="bank-card" v-for="(item, index) in bankList2" :key="index" @click="openCreatBank2(item)" >
                  <div class="head-line1" ></div>
                  <div class="head-line2" ></div>
                  <div class="bank-name-line">
                    <div class="bank-status">
                      <el-tag v-if="item.apply_status == 1" type="warning" size="large" effect="light" >{{ t('common.status.apply') }}</el-tag>
                      <el-tag v-if="item.apply_status == 2" type="danger" size="large" effect="light" >{{ t('common.status.reject') }}</el-tag>
                      <el-tag v-if="item.apply_status == 0 && item.verify_email == 1 " type="success" size="large" effect="light" >{{ t('common.status.auth') }}</el-tag>
                      <el-tag v-if="item.apply_status == 0 && item.verify_email == 0 " type="warning" size="large" effect="light" >{{ t('common.status.no_auth') }}</el-tag>
                      <el-link style="margin-left: 10px;font-size: 12px;" type="primary" @click.stop="openVerificationWallte(item.id)" 
                      v-if="item.apply_status == 0 && item.verify_email == 0 ">{{ t('common.goAuth') }}</el-link>
                    </div>
                  </div>
                  <div class="bank-info">
                    <svg-icon icon-class="dot" class="info-icon" />
                    <span>{{ item.bank_no }}</span>
                  </div>
                  <div class="bank-info">
                    <svg-icon icon-class="dot" class="info-icon" />
                    <span>{{ item.bank_currency }}</span>
                  </div>
                  <div class="bank-info">
                    <svg-icon icon-class="dot" class="info-icon" />
                    <span>{{ item.first_name }} {{ item.last_name }}</span>
                  </div>
                </div>
                <div class="bank-card bank-new" @click="openCreatBank2(null)" >
                  <div class="head-line1" ></div>
                  <div class="head-line2" ></div>
                  <svg-icon icon-class="largePlus" class="plus-icon" />
                  <div class="plus-text">
                    <svg-icon icon-class="bank2" class="plus-icon-mini" />
                    <div>{{ t('finance.add2') }}</div>
                  </div>
                </div>
              </el-space>
            </div>
            <div class="bank-wrap">
              <div class="bank-type-line" >{{ t('finance.b3') }}</div>
              <el-space alignment="start" wrap :size="27">
                <div class="bank-card" v-for="(item, index) in bankList3" :key="index" @click="openCreatBank3(item)" >
                  <div class="head-line1" ></div>
                  <div class="head-line2" ></div>
                  <div class="bank-name-line">
                    <div class="bank-status">
                      <el-tag v-if="item.apply_status == 1" type="warning" size="large" effect="light" >{{ t('common.status.apply') }}</el-tag>
                      <el-tag v-if="item.apply_status == 2" type="danger" size="large" effect="light" >{{ t('common.status.reject') }}</el-tag>
                      <el-tag v-if="item.apply_status == 0 && item.verify_email == 1 " type="success" size="large" effect="light" >{{ t('common.status.auth') }}</el-tag>
                      <el-tag v-if="item.apply_status == 0 && item.verify_email == 0 " type="warning" size="large" effect="light" >{{ t('common.status.no_auth') }}</el-tag>
                      <el-link style="margin-left: 10px;font-size: 12px;" type="primary" @click.stop="openVerificationWallte(item.id)" 
                      v-if="item.apply_status == 0 && item.verify_email == 0 ">{{ t('common.goAuth') }}</el-link>
                    </div>
                  </div>
                  <div class="bank-info">
                    <svg-icon icon-class="dot" class="info-icon" />
                    <span>{{ item.bank_no }}</span>
                  </div>
                  <div class="bank-info">
                    <svg-icon icon-class="dot" class="info-icon" />
                    <span>{{ item.bank_currency }}</span>
                  </div>
                  <div class="bank-info">
                    <svg-icon icon-class="dot" class="info-icon" />
                    <span>{{ item.first_name }} {{ item.last_name }}</span>
                  </div>
                </div>
                <div class="bank-card bank-new" @click="openCreatBank3(null)" >
                  <div class="head-line1" ></div>
                  <div class="head-line2" ></div>
                  <svg-icon icon-class="largePlus" class="plus-icon" />
                  <div class="plus-text">
                    <svg-icon icon-class="alipay" class="plus-icon-mini" />
                    <div>{{ t('finance.add3') }}</div>
                  </div>
                </div>
              </el-space>
            </div>
            <bank v-model:show="showCreateBank1" @done="loadWallte" :id="bankId" :oldData="oldBank" />
            <digital v-model:show="showCreateBank2" @done="loadWallte" :id="bankId" :oldData="oldBank" />
            <alipay v-model:show="showCreateBank3" @done="loadWallte" :id="bankId" :oldData="oldBank" />
        </div>
        <div class="mt-table" v-show="activeMtName ==='safeData'">
          <div style="width: 100%;display: flex;flex-direction: column;align-items: center;">
            <div style="width: 564px;font-size: 24px;font-weight: 700;color: rgba(51, 51, 51, 1);margin: 34px 0;" >{{ t('safeData.title') }}</div>
            <el-form ref="pwdRef" :model="form" :rules="rules" autocapitalize="off" size="large" label-position="top" style="user-select: none;width: 564px;" >
              <el-form-item :label="t('safeData.oldPwd')" prop="old_password">
                <el-input v-model="form.old_password" type="password" show-password size="large" auto-complete="off" />
              </el-form-item>
              <el-form-item :label="t('safeData.newPwd')" prop="new_password">
                <el-input v-model="form.new_password" type="password" show-password size="large" auto-complete="off" />
              </el-form-item>
              <el-form-item>
                <password-validator v-if="form.new_password" ref="pv1" v-model="form.new_password" />
              </el-form-item>
              <el-form-item :label="t('safeData.newPwd2')" prop="new_password2">
                <el-input v-model="form.new_password2" type="password" show-password size="large" auto-complete="off" />
              </el-form-item>
              <el-form-item>
                <el-button :loading="loading" class="send-btn" @click="save" style="width: 100%;" type="primary">{{ t('safeData.edit') }}
                  <template #loading>
                    <l-ring-2 size="20" stroke="2" stroke-length="0.25" bg-opacity="0.1" speed="0.8" color="white" style="margin-right: 17px;" ></l-ring-2>
                  </template>
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
    </div>
    <verificationWallteMail v-model:show="showVerifyBank" @done="loadWallte" :id="verifyBankId" />
</div>
</template>

<script setup>
import BannerBar from "@/components/BannerBar"
import useUserStore from '@/store/modules/user'
import { useLocale } from 'element-plus'
import useAppStore from '@/store/modules/app'
import { serverLang } from '@/utils/i18n'
import VerificationMail from './verificationMail'
import profile from "./profile"
import voucher from "./voucher"
import dzzm from "./dzzm"
import PasswordValidator from "@/components/PasswordValidator"
import { queryBannerList, getPersonalAuthStatus, getIfImproveUser } from '@/api/common'
import { queryBankList, editPassword } from '@/api/personal'
import { watch } from "vue"
import bank from './wallet/bank.vue'
import digital from "./wallet/digital.vue"
import alipay from "./wallet/alipay.vue"
import verificationWallteMail from "../capital/verificationMail.vue"

const { t } = useLocale()
const userStore = useUserStore()
const appStore = useAppStore()
const showBanner = ref(appStore.showBanner == '1')
const bannerList = ref([])

const activeMtName = ref('personalData')

const authStatus = ref({
  address: 0,
  identity: 0,
  email: 0
})

const ifImprove = ref(0)

const showVerifyBank = ref(false)
const verifyBankId = ref(null)

const showVerificationMail = ref(false)
const showProfile = ref(false)
const showVoucher = ref(false)
const showDzzm = ref(false)

const bankId = ref(null)
const oldBank = ref(null)

const showCreateBank1 = ref(false)
const showCreateBank2 = ref(false)
const showCreateBank3 = ref(false)

const bankList1 = ref([])
const bankList2 = ref([])
const bankList3 = ref([])

const pv1 = ref(null)

function tabClick(data) {
  if (activeMtName.value == data) {
    return
  }
  if (data == 'financeData' && (!authStatus.value || authStatus.value.email != 1 || authStatus.value.identity != 1 || authStatus.value.address != 1)) {
    return
  }
  if (data == 'financeData') {
    loadWallte()
  }
  activeMtName.value = data
}

function loadWallte() {
    // 查询财务资料列表
    queryBankList().then(resp => {
      bankList1.value = resp.data.filter((v, i) => v.bank_standby_1 == 'B1')
      bankList2.value = resp.data.filter((v, i) => v.bank_standby_1 == 'B2')
      bankList3.value = resp.data.filter((v, i) => v.bank_standby_1 == 'B3')
    })
}

const loading = ref(false)
const form = ref({
  password_set_type: 0,
  old_password: undefined,
  new_password: undefined,
  new_password2: undefined
})

const checkPwd = (rule, value, callback) => {
  if (!value) {
    return callback(new Error(t('forgotPassword.pwd2Placeholder')))
  }
  if (value != form.value.new_password) {
    return callback(new Error(t('form.confirmPassword.invalid')))
  }
  callback()
}

const rules = ref({
  old_password: [{ required: true, message: t('forgotPassword.pwdOldPlaceholder'), trigger: "blur" }],
  new_password: [{ required: true, message: t('forgotPassword.pwdPlaceholder'), trigger: "blur" }],
  new_password2: [{ required: true, message: t('forgotPassword.pwd2Placeholder'), trigger: "blur" }, { trigger: "blur", validator: checkPwd }]
})

const pwdRef = ref()

function save() {
  pwdRef.value.validate(valid => {
    if (valid && pv1.value.check()) {
      editPassword(form.value).then(resp => {
        window.showTip({
          title: t('safeData.success'),
          status: 'success'
        })
        setTimeout(() => {
          userStore.logOut().then(() => {
            location.href = '/index';
          })
        }, 3000)
      })
    }
  })
}

function closeBanner() {
  showBanner.value = false
  appStore.setShowBanner('0')
}

function loadBannerList() {
  queryBannerList({
    qcc_language: serverLang(),
    position: 1,
    type: 2
  }).then(resp => {
    if (resp.data) {
      bannerList.value = resp.data
    }
  })
}

function loadPersonalAuthStatus() {
  getPersonalAuthStatus().then(resp => {
    authStatus.value = resp.data
  })
}

function loadIfImproveUser() {
  getIfImproveUser().then(resp => {
    ifImprove.value = resp.data
  })
}

function openVerificationMail() {
  showVerificationMail.value = true
}

function openProfile() {
  showProfile.value = true
}

function openVoucher() {
  showVoucher.value = true
}

function openDzzm() {
  showDzzm.value = true
}

function openCreatBank1(obj) {
  if (obj) {
    bankId.value = obj.id
    oldBank.value = obj
  } else {
    bankId.value = null
    oldBank.value = null
  }
  showCreateBank1.value = true
}

function openCreatBank2(obj) {
  if (obj) {
    bankId.value = obj.id
    oldBank.value = obj
  } else {
    bankId.value = null
    oldBank.value = null
  }
  showCreateBank2.value = true
}

function openCreatBank3(obj) {
  if (obj) {
    bankId.value = obj.id
    oldBank.value = obj
  } else {
    bankId.value = null
    oldBank.value = null
  }
  showCreateBank3.value = true
}

function openVerificationWallte(id) {
  verifyBankId.value = id
  showVerifyBank.value = true
}

function loadPageData() {
  loadBannerList();
  loadPersonalAuthStatus();
  loadIfImproveUser();
}

watch(showVerificationMail, (n, o) => {
  if (!n) {
    loadPersonalAuthStatus()
  }
}, {
  immediate: true
})

watch(showProfile, (n, o) => {
  if (!n) {
    loadIfImproveUser()
  }
}, {
  immediate: true
})

watch(showVoucher, (n, o) => {
  if (!n) {
    loadPersonalAuthStatus()
  }
}, {
  immediate: true
})

watch(showDzzm, (n, o) => {
  if (!n) {
    loadPersonalAuthStatus()
  }
}, {
  immediate: true
})

watch(showVoucher, (n, o) => {
  if (!n) {
    loadPersonalAuthStatus()
  }
}, {
  immediate: true
})

loadPageData();
</script>

<style lang="scss" scoped>
.banner-bar {
  margin-bottom: 5px;
}

.page-content {
  width: 100%;
  display: flex;
  flex-direction: column;

  .title-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;

    .title {
      font-size: 34px;
      font-weight: 700;
    }
  }

  .mt-tabs {
    width: 100%;
    .tab-items {
      width: 100%;
      display: flex;
      flex-wrap: nowrap;
      height: 40px;
      color: rgba(102, 102, 102, 1);
      user-select: none;

      .tab-item {
        padding: 0 50px;
        min-width: 170px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        cursor: pointer;
        white-space: nowrap;
      }

      .tab-item-active {
        color: rgba(51, 51, 51, 1);
        font-weight: 700;
        position: relative;
        &::after {
          content: '';
          position: absolute;
          bottom: -4px;
          height: 4px;
          width: 100%;
          background-color: rgba(51, 51, 51, 1);
        }
      }
    }

    .tab-active-bar {
      width: 100%;
      height: 4px;
      border-bottom: 1px solid rgba(236, 236, 236, 1);
    }
  }

  .mt-table {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .mt-account-card {
        width: 336px;
        position: relative;
        text-align: center;
  
        :deep(.el-card__body) {
          width: 100%;
          height: 430px;
          padding: 20px !important;
        }

        .card-icon {
            margin-top: 60px;
            margin-bottom: 18px;
            width: 76px;
            height: 76px;
        }

        .card-title {
            font-size: 22px;
            font-weight: 400;
            letter-spacing: 0px;
            color: rgba(51, 51, 51, 1);
        }

        .card-error {
            margin-top: 64px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            font-weight: 400;
            letter-spacing: 0px;
            color: rgba(255, 87, 51, 1);
        }

        .card-success {
            margin-top: 64px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            font-weight: 400;
            letter-spacing: 0px;
            color: rgba(20, 204, 158, 1);
        }

        .open-btn {
          height: 48px;
          width: 100%;
          font-size: 18px;
          font-weight: 400;
        }
      }
    }
}

.bank-wrap {
  width: 100%;

  .bank-type-line {
    font-size: 24px;
    font-weight: 700;
    color: rgba(0, 0, 0, 1);
    margin: 20px 0;
  }
}

.bank-card {
  width: 320px;
  height: 225px;
  background-color: #fff;
  box-shadow: 0px 2px 9px  rgba(0, 0, 0, 0.25);
  padding: 26px 30px 20px;
  position: relative;
  cursor: pointer;

  .head-line1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 95px;
    height: 6px;
    background: rgba(15, 54, 117, 1);
  }

  .head-line2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 225px;
    height: 6px;
    background: rgba(41, 187, 228, 1);
  }

  .bank-name-line {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    margin-bottom: 13px;
    padding-bottom: 9px;

    .bank-name {
      font-size: 22px;
      font-weight: 700;
      color: rgba(51, 51, 51, 1);
      flex-shrink: 1;
      padding: 0 10px;
      overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
    }

    .bank-status {
      margin-left: auto;
      flex-shrink: 0;
      display: flex;
      align-items: center;
    }
  }


  .bank-info {
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    display: flex;
    align-items: center;
    margin-top: 13px;

    .info-icon {
      width: 5px;
      height: 5px;
      margin: 0 10px;
      flex-shrink: 0;
    }

    &>span {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

.bank-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  .plus-icon {
    width: 86px;
    height: 86px;
    margin-bottom: 25px;
  }

  .plus-text {
    font-size: 20px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    display: flex;
    align-items: center;

    .plus-icon-mini {
      width: 30px;
      margin-right: 12px;
    }
  }
}
</style>