<template>
  <j-nav-bar color="#FFF" nav-bar-background="#f9bf3a" :placeholder="false" />

  <van-form @submit="saveUserInfoBtn">
    <div class="content">
      <j-gap height="120" background="#F9BF3A" opacity="0" />
      <div class="action">
        <view class="tt">{{ $t('userInfo.realPrompt') }}~</view>
        <!--        <van-field required v-model="userInfo.realName" type="text" label="姓名" placeholder="请输入真实姓名" :rules="[{ required: true, message: '请输入真实姓名' }]"/>-->
        <van-field
          required
          v-model="userInfo.companyName"
          type="text"
          :label="$t('userInfo.unitName')"
          :placeholder="$t('app.enter') + $t('userInfo.unitName')"
          :rules="[{ required: true, message: $t('app.enter') + $t('userInfo.unitName') }]"
        />
        <van-field
          required
          v-model="userInfo.companyTitle"
          type="text"
          :label="$t('userInfo.position')"
          :placeholder="$t('app.enter') + $t('userInfo.position')"
          :rules="[{ required: true, message: $t('app.enter') + $t('userInfo.position') }]"
        />
        <van-field
          required
          v-model="userInfo.companyPhone"
          type="tel"
          :label="$t('userInfo.workTelephone')"
          :placeholder="$t('app.enter') + $t('userInfo.workTelephone')"
          :rules="[{ required: true, message: $t('app.enter') + $t('userInfo.workTelephone') }]"
          />
        <van-field
          required
          v-model="userInfo.companyYear"
          type="number"
          :label="$t('userInfo.workingAge')"
          :placeholder="$t('app.enter') + $t('userInfo.workingAge')"
          :rules="[{ required: true, message: $t('app.enter') + $t('userInfo.workingAge') }]"
        />
        <van-field
          required v-model="userInfo.incomeWan"
          type="number"
          :label="$t('userInfo.monthlyPay')"
          :placeholder="$t('app.enter') + $t('userInfo.monthlyPay')"
          :rules="[{ required: true, message: $t('app.enter') + $t('userInfo.monthlyPay') }]"
        />

        <van-field
          v-if="lang === 'zh_CN'"
          v-model="userInfo.companyAddress"
          is-link
          required
          readonly
          :label="$t('userInfo.unitAddress')"
          :placeholder="$t('app.select') + $t('userInfo.unitAddress')"
          :rules="[{ required: true, message: $t('app.select') + $t('userInfo.unitAddress') }]"
          @click="companyAddressShow = true"
        />
        <van-field
          v-else
          v-model="userInfo.companyAddress"
          required
          :label="$t('userInfo.unitAddress')"
          :placeholder="$t('app.enter') + $t('userInfo.unitAddress')"
          :rules="[{ required: true, message: $t('app.enter') + $t('userInfo.unitAddress') }]"
        />
        <van-popup v-model:show="companyAddressShow" round position="bottom">
          <van-cascader
            v-model="cascaderValue"
            :title="$t('app.select') + $t('userInfo.unitAddress')"
            :options="options"
            @close="companyAddressShow = false"
            @finish="onFinish"
          />
        </van-popup>

        <van-field
          required
          v-model="userInfo.companyAddressInfo"
          type="text"
          :label="$t('userInfo.addressInfo')"
          :placeholder="$t('app.enter') + $t('userInfo.addressInfo')"
          :rules="[{ required: true, message: $t('app.enter') + $t('userInfo.addressInfo') }]"
        />


        <van-field
          v-if="lang === 'zh_CN'"
          v-model="userInfo.customerAddress"
          is-link
          required
          readonly
          :label="$t('userInfo.currentResidentialAddress')"
          :placeholder="$t('app.select') + $t('userInfo.currentResidentialAddress')"
          :rules="[{ required: true, message: $t('app.select') + $t('userInfo.currentResidentialAddress') }]"
          @click="customerAddressShow = true"
        />
        <van-field
          v-else
          v-model="userInfo.customerAddress"
          required
          :label="$t('userInfo.currentResidentialAddress')"
          :placeholder="$t('app.enter') + $t('userInfo.currentResidentialAddress')"
          :rules="[{ required: true, message: $t('app.enter') + $t('userInfo.currentResidentialAddress') }]"
        />
        <van-popup v-model:show="customerAddressShow" round position="bottom">
          <van-cascader
            v-model="customerAddressValue"
            :title="$t('app.select') + $t('userInfo.currentResidentialAddress')"
            :options="options"
            @close="customerAddressShow = false"
            @finish="onCustomerAddressFinish"
          />
        </van-popup>

        <van-field
          required
          v-model="userInfo.customerAddressInfo"
          type="text"
          :label="$t('userInfo.addressInfo')"
          :placeholder="$t('app.enter') + $t('userInfo.addressInfo')"
          :rules="[{ required: true, message: $t('app.enter') + $t('userInfo.addressInfo') }]"
        />
      </div>

      <div class="action">
        <view class="tt">
          {{ $t('userInfo.directFamilyContactPerson') }}
        </view>

        <van-field
          required
          v-model="userInfo.kinsfolkName"
          type="text"
          :label="$t('userInfo.name')"
          :placeholder="$t('app.enter') + $t('userInfo.name')"
          :rules="[{ required: true, message: $t('app.enter') + $t('userInfo.name') }]"
        />
        <van-field
          required v-model="userInfo.kinsfolkPhone"
          type="tel"
          :label="$t('app.phoneNumber')"
          :placeholder="$t('app.enter') + $t('app.phoneNumber')"
          :rules="[{ required: true, message: $t('app.enter') + $t('app.phoneNumber') }]"
        />
        <van-field
          v-model="userInfo.kinsfolkRefText"
          is-link
          :rules="[{ required: true, message: $t('app.select') + $t('userInfo.relationship') }]"
          required
          readonly
          :label="$t('userInfo.relationship')"
          :placeholder="$t('app.select') + $t('userInfo.relationship')"
          @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" round position="bottom">
          <van-picker
            :columns="columns"
            @cancel="showPicker = false"
            @confirm="onConfirm"
          />
        </van-popup>


      </div>
    </div>

    <div style="padding: 0 20px 60px">
      <van-button
        color="linear-gradient(to right, #D2A64C, #F9D88D)"
        round
        style="width: 100%; "
        native-type="submit"
        :disabled="!useEdit"
      >
        {{ $t('app.submit') }}
      </van-button>
    </div>
  </van-form>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { getBorrowPage, getUserInfo, updateCustomerCard } from '@/api';
import { resetData } from '@/utils/dataUtil';
import { useRouter } from 'vue-router';
import { useCascaderAreaData } from '@vant/area-data';
import { useI18n } from 'vue-i18n';

const { t } = useI18n()

const companyAddressShow = ref(false);
const customerAddressShow = ref(false);
const lang = localStorage.getItem('lang')
const cascaderValue = ref('');
const customerAddressValue = ref('');
const columns = [
  { text: t('userInfo.parents'), value: '1' },
  { text: t('userInfo.spouse'), value: '2' },
  { text: t('userInfo.children'), value: '3' },
  { text: t('userInfo.grandparents'), value: '4' },
  { text: t('userInfo.friend'), value: '5' }
];
const userInfo = reactive({
  backCardNum: '',
  incomeWan: 0,
  bankType: '',
  cardBackPicture: '',
  cardFrontPicture: '',
  cardNum: '',
  companyAddress: '',
  companyAddressInfo: '',
  companyName: '',
  companyPhone: '',
  companyTitle: '',
  companyYear: '',
  customerAddress: '',
  customerAddressInfo: '',
  customerId: 0,
  id: 0,
  kinsfolkName: '',
  kinsfolkPhone: '',
  kinsfolkRef: '',
  kinsfolkRefText: '',
  realName: ''
});
const _getUserInfo = () => {
  getUserInfo().then(res => {
    resetData(userInfo, res);
    columns.forEach(c => {
      if (c.value == userInfo.kinsfolkRef) {
        userInfo.kinsfolkRefText = c.text;
      }
    });
  });
};

const borrowPage = {
  pageNum: 0,
  pageSize: 3
};
const useEdit = ref(true);
const _getBorrowPage = () => {
  getBorrowPage(borrowPage).then(res => {
    useEdit.value = res.length === 0;
  });
};

const options = useCascaderAreaData();
const onFinish = ({ selectedOptions }) => {
  companyAddressShow.value = false;
  userInfo.companyAddress = selectedOptions.map((option) => option.text).join('/');
};


const onCustomerAddressFinish = ({ selectedOptions }) => {
  customerAddressShow.value = false;
  userInfo.customerAddress = selectedOptions.map((option) => option.text).join('/');
};

const showPicker = ref(false);

const onConfirm = ({ selectedOptions }) => {
  showPicker.value = false;
  userInfo.kinsfolkRef = selectedOptions[0].value;
  userInfo.kinsfolkRefText = selectedOptions[0].text;
};


const router = useRouter();
const saveUserInfoBtn = (values) => {
  updateCustomerCard(userInfo).then(res => {
    router.back();
  });
};


onMounted(() => {
  _getUserInfo();
  _getBorrowPage();
});

</script>

<style lang="scss" scoped>
.content {
  background-image: linear-gradient(to bottom, #f9bf3a, #ffffff) !important;
  padding-bottom: 30px;


  .action {
    margin: 20px;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-flow: column;
    box-shadow: 0 0 1vw 0px #e0e0e0;

    &-content {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      padding: 20px 20px;
      box-shadow: 0 0 1vw 0px #e0e0e0;

      &-item {
        margin: 20px 0;
      }

      .id-card-box {
        border-radius: 10px;
        box-shadow: 0 0 1vw 0px #e0e0e0;
        width: 500px;
        height: 300px;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
      }
    }

    .tt {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      background: #f6f9fd;
      color: #738aa4;
      padding: 20px 0;
    }

    //
  }

}

.font-22 {
  font-size: 22px;
}

</style>
