<template>
  <view class="container">
    <div class="line"></div>
    <view class="main">
      <view class="table">
        <view class="label">房产</view>
        <view class="flexBox" @click="choseCommunity">
          <input
            type="text"
            v-model="changeComm"
            disabled
            placeholder="请选择房产"
          />
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
      <view class="table">
        <view class="label">姓名</view>
        <input type="text" v-model="nameVal" placeholder="请输入姓名" />
      </view>
      <view class="table">
        <view class="label">手机</view>
        <input type="text" v-model="phoneVal" placeholder="请输入手机号" />
      </view>
      <view class="table">
        <view class="label">身份</view>

        <view class="flexBox" @click="chooseIdentity">
          <input
            type="number"
            v-model="selectedLabel"
            disabled
            placeholder="请选择身份"
          />
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
      <!-- <view class="tip">
				注意：业主为在物业登记在册的人员，需经过物业审 核确认后，即可成为该房产的业主。如需帮助可与物 业或平台联系。
			</view> -->
    </view>
    <view class="btn" @click="headerSubmitClick">确定</view>

    <u-popup
      :show="show"
      @close="close"
      mode="bottom"
      customStyle="width: 500rpx;"
      round="20rpx"
    >
      <u-picker
        :show="show"
        :columns="columns"
        keyName="label"
        @cancel="close"
        @confirm="confirm"
      ></u-picker>
    </u-popup>
  </view>
</template>

<script>
import { request, NavgateTo, isPhone } from "../../../utils";
import { apiArr } from "../../../api/community";
export default {
  onBackPress(options) {
    console.log("from:" + options.from);
  },
  data() {
    return {
      communityId: "",
      roomId: "",
      managementMobile: "",
      show: false,
      changeComm: "",
      columns: [
        [
          {
            label: "业主",
            value: "1",
          },
          {
            label: "家属",
            value: "2",
          },
          {
            label: "租客",
            value: "3",
          },
          {
            label: "访客",
            value: "4",
          },
        ],
      ],
      selectedValue: "",
      selectedLabel: "",
      nameVal: "",
      phoneVal: "",
    };
  },
  methods: {
    close() {
      this.show = false;
    },
    chooseIdentity() {
      this.show = true;
      console.log();
    },
    confirm(selected) {
      console.log(selected.value[0].value);
      this.selectedValue = selected.value[0].value;
      this.selectedLabel = selected.value[0].label;
      this.show = false;
    },
    headerCloseClick() {
      this.show = false;
    },

    headerInputClick(e) {
      const { name } = e.currentTarget.dataset;
      const { value } = e.detail;
      this[name] = value;
    },
    async headerSubmitClick() {
      await request(apiArr.create, "POST", {
        community_id: parseInt(this.communityId),
        room_id: parseInt(this.roomId),
        user_id: uni.getStorageSync("userId"),
        name: this.nameVal, // 姓名
        mobile: this.phoneVal, // 手机号
        type: parseInt(this.selectedValue), // 身份
        id_type: 1,
      }).then((res) => {
        console.log(res);
        uni.showToast({
          title: "提交成功请等待物业审核！",
          icon: "none",
          duration: 1500,
        });
        // 提示显示后延迟跳转
        setTimeout(() => {
          NavgateTo("/packages/community/myCommunity/index");
        }, 1500);
      });
    },
    choseCommunity() {
      NavgateTo("/packages/community/choseCommunity/index");
    },
  },

  onLoad(options) {
    console.log("接收到的参数:", options);
    this.communityId = options.community_id
      ? decodeURIComponent(options.community_id)
      : "";
    this.roomId = options.room_id ? decodeURIComponent(options.room_id) : "";
    this.changeComm = options.changeVal
      ? decodeURIComponent(options.changeVal)
      : "";
  },

  onReachBottom() {},
};
</script>

<style>
@import url("./index.css");
</style>