<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">填写真实有效的信息，审核才会通过哦~</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="单位名称" placeholder="请输入单位名称" :rules="[{ required: true, message: '请输入单位名称' }]"/>
        <van-field required v-model="userInfo.companyTitle" type="text" label="职位" placeholder="请输入职位" :rules="[{ required: true, message: '请输入职位' }]"/>
        <van-field required v-model="userInfo.companyPhone" type="tel" label="单位电话" placeholder="号码加区号（非必填）" :rules="[{ required: true, message: '号码加区号' }]"/>
        <van-field required v-model="userInfo.companyYear" type="number" label="工作年龄" placeholder="请输入工龄" :rules="[{ required: true, message: '请输入工龄' }]"/>
        <van-field required v-model="userInfo.incomeWan" type="number" label="月薪" placeholder="请输入月薪" :rules="[{ required: true, message: '请输入月薪' }]"/>
        <van-field
          v-model="userInfo.companyAddress"
          is-link
          required
          readonly
          :rules="[{ required: true, message: '请选择省市区' }]"
          label="单位地址"
          placeholder="请选择省市区"
          @click="companyAddressShow = true"
        />
        <van-popup v-model:show="companyAddressShow" round position="bottom">
          <van-cascader
            v-model="cascaderValue"
            title="请选择所在地区"
            :options="options"
            @close="companyAddressShow = false"
            @finish="onFinish"
          />
        </van-popup>
        <van-field required v-model="userInfo.companyAddressInfo" type="text" label="详细地址" placeholder="请输入详细地址" :rules="[{ required: true, message: '请输入详细地址' }]"/>


        <van-field
          v-model="userInfo.customerAddress"
          is-link
          required
          readonly
          :rules="[{ required: true, message: '请选择所在地区' }]"
          label="现居住地址"
          placeholder="请选择所在地区"
          @click="customerAddressShow = true"
        />
        <van-popup v-model:show="customerAddressShow" round position="bottom">
          <van-cascader
            v-model="customerAddressValue"
            title="请选择所在地区"
            :options="options"
            @close="customerAddressShow = false"
            @finish="onCustomerAddressFinish"
          />
        </van-popup>
        <van-field required v-model="userInfo.customerAddressInfo" type="text" label="详细地址" placeholder="例：东北石油大学启智寝室楼2A603" :rules="[{ required: true, message: '请输入详细地址' }]"/>
      </div>

      <div class="action">
        <view class="tt">
          直系亲属联系人
        </view>

        <van-field required v-model="userInfo.kinsfolkName" type="text" label="姓名" placeholder="请输入真实姓名" :rules="[{ required: true, message: '请输入真实姓名' }]"/>
        <van-field required v-model="userInfo.kinsfolkPhone" type="tel" label="手机号码" placeholder="请输入手机号码" :rules="[{ required: true, message: '请输入手机号码' }]"/>
        <van-field
          v-model="userInfo.kinsfolkRefText"
          is-link
          :rules="[{ required: true, message: '请选择关系' }]"
          required
          readonly
          label="关系"
          placeholder="请选择关系"
          @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"
      >
        提交
      </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 {showToast} from "vant";
import {useRouter} from "vue-router";
import {useCascaderAreaData} from "@vant/area-data";

const companyAddressShow = ref(false)
const customerAddressShow = ref(false)
const cascaderValue = ref('');
const customerAddressValue = ref('');
const columns = [
  { text: '父母', value: '1' },
  { text: '配偶', value: '2' },
  { text: '子女', value: '3' },
  { text: '祖父母', value: '4' },
];
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>
