<template>
  <view class="bangding_form_data">
    <view class="form_card">
      <view class="form_card_title">
        <text :style="`border-left: 3px solid ${getStyleColorValueInfo()}`"></text> 房屋信息
      </view>
      <hs-popup-project
        title="选择房屋"
        @change="method?.handleSelectProject"
        :defaultValueName="useModel?.defaultHouseValueName?.value"
      />
    </view>

    <view class="form_card" v-if="useModel?.formData?.value?.asset_houses_id">
      <view class="form_card_title">
        <text :style="`border-left: 3px solid ${getStyleColorValueInfo()}`"></text> 选择身份
      </view>
      <hs-cell title="身份" required borderTop>
        <hs-radio
          :Enums="HouseRegistersTypeEnum"
          v-model:valueModel="useModel.formData.value.type"
          required
          borderTop
          @onChange="method?.handleSelectType"
        />
      </hs-cell>
      <hs-cell
        title="居住身份"
        v-if="useModel?.formData?.value?.type === 'AddOccupant'"
        required
        borderTop
        :des="desType[useModel?.formData?.value?.residential_relation as keyof typeof desType]"
      >
        <hs-radio
          :Enums="useModel.HouseOccupantsEnum.value"
          v-model:valueModel="useModel.formData.value.residential_relation"
          required
          borderTop
        />
      </hs-cell>
    </view>

    <view class="form_card" v-if="useModel.formData.value.type">
      <view class="form_card_title">
        <text :style="`border-left: 3px solid ${getStyleColorValueInfo()}`"></text> 个人信息
      </view>
      <hs-cell title="真实姓名" required borderTop>
        <hs-input v-model:valueModel="useModel.formData.value.name" textAlign="right" />
      </hs-cell>
      <hs-cell title="手机号" required borderTop>
        <hs-input
          v-model:valueModel="useModel.formData.value.phone"
          maxLength="11"
          textAlign="right"
        />
      </hs-cell>
      <hs-cell title="身份证号" required borderTop>
        <hs-input
          v-model:valueModel="useModel.formData.value.id_card"
          maxLength="18"
          textAlign="right"
        />
      </hs-cell>
    </view>

    <view class="form_card" v-if="useModel.formData.value.type">
      <hs-upload-id-card
        required
        v-model:valueFrontModel="useModel.formData.value.card_front_image"
        v-model:valueBackModel="useModel.formData.value.card_back_image"
      />

      <hs-upload
        v-if="useModel.formData.value.type === 'AddOwner'"
        title="上传房产证"
        :count="10"
        :size="4"
        required
        borderTop
        v-model:valueModel="useModel.formData.value.ownership_info"
      />
    </view>

    <view class="form_card" v-if="useModel.formData.value.residential_relation === 'Resident'">
      <view class="form_card_title">
        <text :style="`border-left: 3px solid ${getStyleColorValueInfo()}`"></text> 与产权人关系
      </view>

      <hs-radio-cell-picker-select
        title="房屋产权人"
        :List="useModel?.ownerList?.value"
        v-model:valueModel="useModel.formData.value.owners_id"
        borderTop
      />

      <hs-radio-cell-picker
        :Enums="HouseOccupantsRelationWithOwnerEnum"
        title="与产权人关系"
        v-model:valueModel="useModel.formData.value.relation_with_owner"
        borderTop
      />
    </view>

    <hs-footer
      btnParimaryName="绑定房屋"
      :loading="useModel?.loading?.value"
      @handleParmaryClick="method?.handleSubmit"
    />
    <hs-popup-custom title="该房屋已有产权人" :show="useModel?.show?.value" mode="center">
      <view class="popup_custom_content">
        <view class="popup_des">
          系统显示，该房屋目前已有绑定产权人<br />请根据您的实际情况选择：
        </view>
        <view class="popup_group_btn">
          <hs-button
            label="我也是产权人之一"
            @click="method?.handleSubmitStore"
            size="md"
            type="primary"
          />
          <view class="display_btn">
            <hs-button
              label="我是新产权人（房屋已过户）"
              @click="method?.handleSubmitStore"
              size="md"
              type="display"
            />
          </view>
          <hs-button label="重选房屋" size="md" type="default" @click="method?.handleClose" />
        </view>
      </view>
    </hs-popup-custom>
    <!-- <canvas canvas-id="myCanvas" class="myCanvas"></canvas> -->
  </view>
</template>
<script setup lang="ts">
import {
  HouseOccupantsResidentialRelationEnum,
  HouseOccupantsRelationWithOwnerEnum
} from '@/gen/Enums'
import method from './method'
import useModel from './model'
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
import { ref, watch } from 'vue'
import { getStyleColorValueInfo } from '@/common/libraries/getPageConfig'

const HouseRegistersTypeEnum = {
  AddOwner: { text: '产权人', color: '#52c41a', value: 'AddOwner' },
  AddOccupant: { text: '非产权人', color: '#108ee9', value: 'AddOccupant' }
}

const desType = {
  Resident: '【住户】指的是产权人的亲属',
  PrimaryTenant: '【主租人】与产权人签订租赁合同的租户',
  Tenant: '【租客】由主租人带入、共同居住的租户'
}

watch(
  () => useModel?.formData?.value?.asset_houses_id,
  () => {
    method?.handleSelectResidentialRelation()
  }
)

onUnload(() => {
  useModel.defaultHouseValueName.value = ''
})

onLoad(e => {
  console.log('绑定', e)
  method?.init(e)
})
</script>

<style lang="scss">
@import './style.scss';
</style>
