<template>
  <view class="body-background"></view>
  <u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      bgColor="#ffffff"
  ></u-navbar>
  <u-row :custom-style="{padding:'16rpx 26rpx 180rpx'}">
    <u-col :span="12" :custom-style="{
      backgroundColor:'#FFFFFF',
      borderRadius:'20rpx',
      padding:'40rpx 32rpx',
      minHeight:'1000rpx',
      position:'relative'
    }">
      <u-form
          labelWidth="auto"
          labelPosition="left"
          :model="model1"
          :rules="rules"
          ref="form1"
      >
        <view class="form-title">
          租房详情
        </view>
        <u-form-item
            label="承租人"
            prop="userInfo.sex"
            borderBottom
            ref="item1"
            :custom-style="{padding:'34rpx 0',fontSize:'32rpx',color:'#020b18',fontWeight:'400',lineHeight:'50rpx'}"
        >
          <u-input
              inputAlign="right"
              disabledColor="#ffffff"
              placeholder="请填写手机号，以便我们联系您"
              border="none"
              :custom-style="{paddingRight:'28rpx'}"
          ></u-input>
        </u-form-item>
        <u-form-item
            label="身份证号"
            prop="userInfo.sex"
            borderBottom
            ref="item1"
            :custom-style="{padding:'34rpx 0',fontSize:'32rpx',color:'#020b18',fontWeight:'400',lineHeight:'50rpx'}"
        >
          <u-input
              inputAlign="right"
              disabledColor="#ffffff"
              placeholder="请填写手机号，以便我们联系您"
              border="none"
              :custom-style="{paddingRight:'28rpx'}"
          ></u-input>
        </u-form-item>
        <u-form-item
            label="联系方式"
            prop="userInfo.sex"
            borderBottom
            ref="item1"
            :custom-style="{padding:'34rpx 0',fontSize:'32rpx',color:'#020b18',fontWeight:'400',lineHeight:'50rpx'}"
        >
          <u-input
              inputAlign="right"
              disabledColor="#ffffff"
              placeholder="请填写手机号，以便我们联系您"
              border="none"
              :custom-style="{paddingRight:'28rpx'}"
          ></u-input>
        </u-form-item>
        <u-form-item
            label="租期"
            prop="userInfo.sex"
            borderBottom
            ref="item1"
            :custom-style="{padding:'34rpx 0',fontSize:'32rpx',color:'#020b18',fontWeight:'400',lineHeight:'50rpx'}"
        >
          <u-input
              inputAlign="right"
              disabledColor="#ffffff"
              placeholder="请填写手机号，以便我们联系您"
              border="none"
              :custom-style="{paddingRight:'28rpx'}"
          ></u-input>
        </u-form-item>
        <u-form-item
            label="租金"
            prop="userInfo.sex"
            borderBottom
            ref="item1"
            :custom-style="{padding:'34rpx 0',fontSize:'32rpx',color:'#020b18',fontWeight:'400',lineHeight:'50rpx'}"
        >
          <u-input
              inputAlign="right"
              disabledColor="#ffffff"
              placeholder="请填写手机号，以便我们联系您"
              border="none"
              :custom-style="{paddingRight:'28rpx'}"
          ></u-input>
        </u-form-item>
        <u-form-item
            prop="userInfo.sex"
            ref="item1"
            :custom-style="{padding:'0 0',fontSize:'32rpx',color:'#020b18',fontWeight:'400',lineHeight:'50rpx'}"
        >
          <view class="form-label">
            打款凭证
          </view>
          <u-upload
              width="160"
              height="160"
              :fileList="fileList1"
              name="1"
              multiple
              :maxCount="10"
              uploadIcon="plus"
          ></u-upload>
        </u-form-item>
        <u-form-item
            prop="userInfo.sex"
            ref="item1"
            :custom-style="{padding:'0 0',fontSize:'32rpx',color:'#020b18',fontWeight:'400',lineHeight:'50rpx'}"
        >
          <view class="form-label no-top-pad">
            租赁协议
          </view>
          <view class="row">
            <view class="">
              <u-upload
                  width="160"
                  height="160"
                  :fileList="fileList1"
                  name="1"
                  multiple
                  :maxCount="10"
                  uploadIcon="plus"

              ></u-upload>
            </view>
            <view class="">
              <u-upload
                  width="160"
                  height="160"
                  :fileList="fileList1"
                  name="1"
                  multiple
                  :maxCount="10"
                  uploadIcon="plus"
              ></u-upload>
            </view>
          </view>
        </u-form-item>
      </u-form>
      <view class="form-title m-t-46">
        兑换详情
      </view>
      <view class="detail-container">
        <view class="detail-item">
          <u-cell-group
              :border="false"
          >
            <u-cell
              custom-style="padding:0;" v-for="i of 4">
              <template #title>
                <view class="item-title">
                  {{i}}月房租
                </view>
              </template>
              <template #label>
                <view class="item-label">
                  2023-06-26
                </view>
              </template>
              <template #value>
                <view class="item-value">
                  兑换 <text class="item-value-price">168</text> 暖新币
                </view>
              </template>
            </u-cell>
          </u-cell-group>
        </view>
      </view>
    </u-col>
  </u-row>
  <view class="foot-button border-box">
    <u-button
        type="primary"
        text="我要兑换"
        shape="circle"
        :custom-style="{
              color:'#020B18',
              backgroundColor:'#FF9545',
              border:'none',
              fontSize:'36',
              fontWeight:'400',
              height:'80rpx'
            }"
    ></u-button>
  </view>
</template>

<script>
import {
  imghost
} from '@/config/host.js'
import MzSubsection from '@/components/MzSubsection/Index.vue';
import api from '@/utils/functions.js';

export default {
  components: {
    MzSubsection
  },
  data() {
    return {
      model1: {
        userInfo: {
          name: '',
          sex: 1,
        },
      },
      rules: {
        'userInfo.name': {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change']
        },
        'userInfo.sex': {
          type: 'string',
          max: 1,
          required: true,
          message: '请选择男或女',
          trigger: ['blur', 'change']
        },
      },
      sexList:[
        {
          id:1,
          name: '男',
          disabled: false,
        },
        {
          i:2,
          name: '女',
          disabled: false,
        },
      ],
      list: [{
        name: '最新资讯'
      }, {
        name: '表彰评优'
      }, {
        name: '活动回顾'
      }],
      // 或者如下，也可以配置keyName参数修改对象键名
      // list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
      current: 1,
      title: '租房详情',
      loading: true,
      staticImage: {
        bg: imghost + '/static/image/BG.png',
        newIcon: imghost + '/static/image/new-icon.png',
      },
      user: {
        avatar: imghost + '/static/image/banner.png',
        nickname: '清晨的风',
        coupons: 221,
        id: 88685,
      },
      isTop: false,
      lists: [
        {
          id: 1,
          thumb: imghost + '/static/image/new-1.png',
          title: '全市公安机关夏季治安打击整治“彭安行动”新闻发布会召开',
          desc: '需要您带一点猫砂上门，谢谢',
          time: '2023/06/16',
          is_new: true
        }, {
          id: 2,
          thumb: imghost + '/static/image/new-2.png',
          title: '全市公安机关夏季治安打击整治“彭安行动”新闻发布会召开',
          desc: '需要您带一点猫砂上门，谢谢',
          time: '2023/06/16',
          is_new: true
        }, {
          id: 3,
          thumb: imghost + '/static/image/new-3.png',
          title: '全市公安机关夏季治安打击整治“彭安行动”111开',
          desc: '需要您带一点猫砂上门，谢谢',
          time: '2023/06/16',
          is_new: false
        },
      ],
      size: {
        height: 500,
      }
    }
  },
  onLoad() {

  },
  onReady() {
    let that = this;
    let height = api.wxSystemInfo().system.windowHeight
    let headerHeight = uni.$u.getPx(44) + uni.$u.sys().statusBarHeight

    let info = uni.createSelectorQuery().in(this).select('.foot-button');
    info.boundingClientRect(function (data) {
      that.size.height = that.size.height = height - headerHeight - data.height - uni.$u.getPx('32rpx');
    }).exec(function (res) {

    });
  },
  computed: {
    api() {
      return api
    },
    sectionStyle() {
      const style = {};
      style.padding = '0 26rpx';
      style.position = 'sticky';
      style.zIndex = '9999';
      style.top = api.navHeight().systemBarHeight + 'px'
      return style;
    },
    listHeight() {
      let that = this;
      let height;
      let info = uni.createSelectorQuery().in(this).select('.subsection');
      info.boundingClientRect(function (data) {
        that.size.height = data.height;
      }).exec(function (res) {

      });
      // that.size.height = (api.navHeight().windowHeight - height);
    }
  },
  methods: {
    chatDetail(item) {
      wx.navigateTo({
        url: '/pages/ChatDetail/index?id=' + item.id
      });
    },
    checkSection(index) {
      this.current = edit;
    },
    scrollToLower() {

    },
  },
  onPageScroll(res) {
    if (res.scrollTop <= 20) {
      uni.$emit('isTop', true);
    } else {
      uni.$emit('isTop', false);
    }
  },
  created() {
    this.listHeight();
    // this.pagePadding = (api.navHeight().navPaddingTop +
    // 	api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
  }
}
</script>

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