<template>
  <div class="container">
    <NavBar title="项目信息明细" left-arrow @click-left="goBack" />

    <div class="content">
      <section class="form-area">
        <AuForm v-model="formBaseConfig" :key="form" moduleName="项目基本信息"/>
        <GuarantorList :values="listArr" moduleName="担保方信息" />
        <AuForm v-model="formBillingInfoConfig" :key="form" moduleName="开票信息"/>
        <AuForm v-model="formleaseInfoConfig" :key="form" moduleName="租赁物信息"/>
        <Cell title="还款计划" is-link class="cell-title" @click="gotoRepayPlan"/>
      </section>
    </div>
  </div>
</template>

<script setup>
import { goBack } from "@/utils/globalFun"
import { NavBar, Button, Field, Cell } from "vant";
import AuForm from '@/components/AuForm.vue';
import AuFormClass from "@/components/useAuForm";
import GuarantorList from '../components/GuarantorList.vue'
import { onActivated } from "vue";
import api from "../api";
import { useProjectList } from "../store";
import { useRouter, useRoute } from "vue-router"
import { currency } from "@/utils/textFormat";

const route = useRoute();
const router = useRouter();

const formStore = useProjectList()
const formBaseConfigArr = [
  {
    title: '合同编号',
    propName: 'projectNumber',
    type: 'input',
    value: '',
    isRequired: false,
    disabled: true,
  },
  {
    title: '项目编号',
    propName: 'itemProjectNumber',
    type: 'input',
    value: '',
    isRequired: false,
    disabled: true,
  },
  {
    title: '代理店',
    propName: 'agencyBpName',
    type: 'input',
    value: '',
    isRequired: false,
    disabled: true
  },
  {
    title: '申请日期',
    propName: 'applyDate',
    type: 'input',
    value: '',
    isRequired: false,
    disabled: true
  },
  {
    title: '租赁类型',
    propName: 'refV06N',
    type: 'input',
    value: '',
    isRequired: false,
    disabled: true
  },
  {
    title: '物件属性',
    propName: 'leasePropertiesN',
    type: 'input',
    value: '',
    isRequired: false,
    disabled: true
  },
  {
    title: '开户行',
    propName: 'bankAccountName',
    type: 'input',
    value: '',
    isRequired: false,
    disabled: true
  },
  {
    title: '开户行名称',
    propName: 'bankBranchName',
    type: 'input',
    value: '',
    isRequired: false,
    disabled: true
  },
  {
    title: '开户行账号',
    propName: 'bankAccountNum',
    type: 'input',
    value: '',
    isRequired: false,
    disabled: true
  },
]
const formBillingInfoArr = [
  {
    title: '纳税人类型',
    propName: 'taxpayerTypeN',
    type: 'input',
    value: '',
    isRequired: false,
    disabled: true,
  },
  {
    title: '纳税人识别',
    propName: 'taxRegistryNum',
    type: 'input',
    value: '',
    isRequired: false,
    disabled: true,
  },
  {
    title: '发票抬头',
    propName: 'invoiceTitle',
    type: 'textarea',
    value: '',
    isRequired: false,
    disabled: true
  },
  {
    title: '发票电话',
    propName: 'invoiceBpPhoneNum',
    type: 'input',
    value: '',
    isRequired: false,
    disabled: true
  },
  {
    title: '发票地址',
    propName: 'invoiceBpAddressPhoneNum',
    type: 'textarea',
    value: '',
    isRequired: false,
    disabled: true
  },
  {
    title: '发票开户行',
    propName: 'invoiceBpBankAccount',
    type: 'textarea',
    value: '',
    isRequired: false,
    disabled: true
  },
  {
    title: '发票账号',
    propName: 'invoiceBpAccount',
    type: 'input',
    value: '',
    isRequired: false,
    disabled: true
  }
]
const formleaseInfoArr = [
  {
    title: '金融产品',
    propName: 'productReqNumber',
    type: 'input',
    value: '',
    isRequired: false,
    disabled: true,
  },
  {
    title: '测算方式',
    propName: 'calculationMethodN',
    type: 'input',
    value: '',
    isRequired: false,
    disabled: true,
  },
  // {
  //   title: '租赁物分类',
  //   propName: 'leaseTypeN',
  //   type: 'input',
  //   value: '',
  //   isRequired: false,
  //   disabled: true
  // },
  {
    title: '物件名称',
    propName: 'fullName',
    type: 'input',
    value: '',
    isRequired: false,
    disabled: true
  },
  {
    title: '机型',
    propName: 'model',
    type: 'input',
    value: '',
    isRequired: false,
    disabled: true
  },
  {
    title: '机号',
    propName: 'machineNumber',
    type: 'input',
    value: '',
    isRequired: false,
    disabled: true
  },
  {
    title: '物件价格',
    propName: 'leaseValue',
    type: 'currency',
    value: '',
    isRequired: false,
    disabled: true
  }
];
const form = $ref();
let listArr = $ref([]);
const formBaseConfig = $ref(new AuFormClass(formBaseConfigArr));
const formBillingInfoConfig = $ref(new AuFormClass(formBillingInfoArr));
const formleaseInfoConfig = $ref(new AuFormClass(formleaseInfoArr));
let contractId = $ref(formStore.contractId);

const projectInfoDetail = async () => {
  let result = await api.getProjectDetail({"contractId": formStore.contractId});
  if(result.success) {
    let rows = result.rows;
    let baseInfo = [];
    let guarantorInfo = [];
    let billingInfo = [];
    let leaseInfo = [];
    if (rows[0]?.basicInformationList.length !== 0) {
      baseInfo = rows[0].basicInformationList[0]
      baseInfo.applyDate = baseInfo.applyDate?.split(' ')[0] || ''
      formBaseConfig.replace(formBaseConfigArr.map(item => {
        item.value = baseInfo[item.propName] || '';
        return item
      }))
      contractId= baseInfo.contractId;
    }

    if(rows[0]?.guarantorInformationList.length !== 0){
      guarantorInfo = rows[0].guarantorInformationList
      listArr = guarantorInfo.map((item, index) =>({
        sortId: index +1,
        bpName: item.bpName
      }))
      listArr.unshift({
          sortId: '序号',
          bpName: '担保方名称'
      })
    }
    if(rows[0]?.billingInformationList.length !== 0){
      billingInfo = rows[0].billingInformationList[0];
      formBillingInfoConfig.replace(formBillingInfoArr.map(item => {
        item.value = billingInfo[item.propName] || '';
        return item
      }))
    }
    if(rows[0]?.leaseInformationList.length !== 0){
      leaseInfo = rows[0].leaseInformationList[0]
      leaseInfo.leaseValue = currency(leaseInfo.leaseValue)
      formleaseInfoConfig.replace(formleaseInfoArr.map(item => {
        item.value = leaseInfo[item.propName] || '';
        return item
      }))
    }
  }
};

projectInfoDetail();

const gotoRepayPlan = () =>{
  router.push({
    name: 'projectList-views-plan',
  })
}


</script>

<style lang="less" scoped>
.cell-title {
  :deep(.van-cell__title span::before) {
    display: inline-block;
    height: 50%;
    width: 3px;
    background-color: #3D59C0;
    content: "";
    margin-right: 5px;
  }

  :deep(.van-cell__value) {
    color: black;
  }
}
.sub {
  width: 70%;
  margin: 50px auto 5px;
}

.form-area {
  padding: 10px;
  .myformList+.myformList {
    margin-top: 0px;
  }
  :deep(.van-field__label) {
    color: #019ae5;
    width: 35%;
  }
  :deep(.van-field__control--right){
    text-align: left;
    color: #323233 !important;
  }
}

.content {
  height: calc(100% - var(--van-nav-bar-height));
  overflow-y: auto;
}
</style>