<template>
  <view class="house-list" :class="{'house-list--elder':$uiStyle==='elder'}">
    <map
      class="map"
      :latitude="mpLatitude"
      :longitude="mpLongitude"
      :markers="markers"
    >
    </map>
    <view class="doorplate">
      <view class="info">
        <view class="name">{{ mpName }}</view>
        <view class="address">{{ mpAddress }}</view>
      </view>
      <image
        class="icon"
        mode="scaleToFill"
        src="/static/images/home/navigation.png"
        @tap="handleAddressGo"
      />
    </view>
    <!--   <view class="list">
      <view class="list-cell" v-for="item in houseList" :key="item.uuid" >
        <image class="icon" mode="scaleToFill" src="/static/images/common/point_common.png"/>
        <view class="info">
          <view class="name">{{item.mc}}</view>
          <view class="distance">距离{{(item.juli/1000).toFixed(1)}}KM</view>
          <view class="address">{{item.bzdz}}</view>
        </view>
        <view class="btn" @tap="checkHouseDetail(item.uuid)">详情</view>
      </view>
    </view> -->
    <view class="records">
      <view
        class="list"
        v-for="item in houseList"
        :key="item.uuid"
        @tap="handleMarker(item)"
      >
        <image class="image" mode="aspectFill" :src="item.picHomeUrl" />
        <view class="info">
          <view class="desc1">{{ item.type }}|{{ item.mc }}</view>
          <view class="desc2"
            >{{ item.shiNum }}室{{ item.tingNum }}厅{{ item.weiNum }}卫.{{
              item.areaSquare
            }}平.{{ item.orientation }}.{{ item.mc }}</view
          >
          <!-- <view class="desc3">
            <uni-tag :text="fwzlCostDic[item.costType]" size="small" :inverted="true"/>
            <uni-tag v-if="item.decoration" :text="item.decoration" size="small" :inverted="true"/>
            <uni-tag v-if="item.lookPeriod" :text="item.lookPeriod" size="small" :inverted="true"/>
            <uni-tag v-for="(item,index) in item.lightSpotList" :key="index" :text="item" size="small" :inverted="true"/>
            <uni-tag v-for="(item,index) in item.requirementList" :key="index" :text="item" size="small" :inverted="true"/>
          </view> -->
          <view class="desc5">
            <view class="desc5__distance"
              >距离{{ (item.juli / 1000).toFixed(1) }}KM</view
            >
            <view class="desc5__detail" @tap="checkHouseDetail(item.uuid)"
              >详情</view
            >
          </view>
          <view class="desc4">{{ item.costMonthly }} 元/月</view>
        </view>
      </view>
    </view>
    <view class="page" v-if="total > pageSize">
      <uni-pagination
        :total="total"
        :current="pageIndex"
        :pageSize="pageSize"
        @change="handelPageChanged"
      />
    </view>
  </view>
</template>

<script>
import { getRentList } from "@/api/rent";
import { httpApi } from "@/common/js/baseUrl";
const app = getApp();

export default {
  name: "publishRecord",
  components: {},
  props: {},
  data() {
    return {
      userInfo: {},
      mpLongitude: 0,
      mpLatitude: 0,
      mpName: "",
      mpAddress: "",
      houseList: [],
      markers: [],
      pageIndex: 1,
      pageSize: 5,
      total: 0,
    };
  },
  onLoad() {
    this.userInfo = uni.getStorageSync("userInfo") || {};
    this.mpName = app.globalData.doorInfo.baseInfo.bzdz;
    this.mpAddress = app.globalData.doorInfo.baseInfo.bzdz1;
    this.mpLongitude = app.globalData.doorInfo.baseInfo.x1;
    this.mpLatitude = app.globalData.doorInfo.baseInfo.y1;
    console.error("mplongitude", this.mpLongitude);
    if (this.mpLongitude) {
      this.getRentList();
    } else {
      this.getCurrentLocation();
    }
  },

  methods: {
    setAddressInfo(item) {
      (this.mpLatitude = Number(item.y)),
        (this.mpLongitude = Number(item.x)),
        (this.mpName = item.mc);
      this.mpAddress = item.bzdz;
    },
    handleMarker(item) {
      console.log(item);
      this.setAddressInfo(item);
    },
    // 获取图片链接
    getImageUrl() {
      this.houseList.forEach((item, index) => {
        item.lightSpotList = item.lightspot.split(",");
        item.requirementList = item.requirement.split(",");
        if (item.picHome) {
          if (item.picHome.startsWith("https")) {
            console.error("https开头");
            item.picHomeUrl = item.picHome;
            this.$set(this.houseList[index], item);
          } else {
            item.picHomeUrl = `${httpApi}/file/download?fileUuid=${item.picHome}`;
            this.$set(this.houseList[index], item);
          }
        } else {
          item.picHomeUrl =
            "https://img1.baidu.com/it/u=2775822367,355751974&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1661533200&t=1a670011c7c4c59444955487c4b46704";
          this.$set(this.houseList[index], item);
        }
      });
    },

    // 获取租房列表
    getRentList() {
      this.markers = [
        {
          id: 0,
          width: 32,
          height: 52,
          title: this.mpName,
          longitude: this.mpLongitude,
          latitude: this.mpLatitude,
          iconPath: "/static/images/common/point_common.png",
        },
      ];
      const data = {
        userInfoId: this.userInfo.uuid,
        createUserId: this.userInfo.uuid,
        x: this.mpLongitude,
        y: this.mpLatitude,
        juliAscFlag: true,
        // juli: '',
        current: this.pageIndex,
        size: this.pageSize,
      };
      getRentList(data).then((res) => {
        this.total = res.total;
        this.houseList = res.data;
        this.houseList.forEach((item, index) => {
          this.markers.push({
            id: index + 1,
            width: 32,
            height: 32,
            title: item.mc,
            longitude: item.x,
            latitude: item.y,
            iconPath: "/static/images/common/point_house.png",
          });
        });
        this.getImageUrl();
      });
    },

    // 查看房屋详情
    checkHouseDetail(val) {
      uni.navigateTo({
        url: `/subPages/pages/rent/houseDetail?uuid=${val}`,
      });
    },

    /* 修改页码 */
    handelPageChanged(event) {
      this.pageIndex = event.current;
      this.getRentList();
    },

    // 获取当前位置信息
    getCurrentLocation() {
      const _this = this;
      uni.getLocation({
        type: "wgs84",
        success: function (res) {
          console.error("获取当前位置", res);
          _this.mpLongitude = res.longitude;
          _this.mpLatitude = res.latitude;
          _this.getRentList();
        },
      });
    },

    // 查看门牌周围地图
    handleAddressGo() {
      uni.openLocation({
        latitude: Number(this.mpLatitude),
        longitude: Number(this.mpLongitude),
        scale: 5,
        name: this.mpName,
        address: this.mpAddress,
        success(res) {
          console.log(res, "wx.getLocation");
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.house-list {
  display: flex;
  flex-direction: column;
  .map {
    width: 100%;
    height: 30vh;
  }
  .doorplate {
    padding: 15px;
    margin-bottom: 8px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .info {
      width: calc(100% - 50px);
      .name {
        padding: 2px 0;
        font-size: 17px;
        font-weight: 900;
        color: #333;
      }
      .address {
        padding: 2px 0;
        font-size: 14px;
        font-weight: 400;
        color: #666;
      }
    }
    .icon {
      width: 40px;
      height: 40px;
    }
  }
  /*  .list {
    height: calc(70vh - 130px);
    background-color: #fff;
    padding: 0 15px;
    overflow: auto;
    .list-cell {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 0.5px solid #f1eeee;
      .icon {
        width: 12px;
        height: 20px;
        margin-top: 5px;
      }
      .info {
        width: calc(100% - 72px);
        .name {
          font-size: 16px;
          font-weight: 700px;
          color: #333;
          padding-bottom: 5px;
        }
        .distance, .address {
          font-size: 13px;
          font-weight: 300;
          color: #999;
          padding-bottom: 1px;
        }
      }
      .btn {
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #3a78f5;
      }
    }
  } */
  .records {
    /*  height: calc(100% - 50px); */
    flex: 1;
    overflow-y: scroll;
    padding-bottom: 48px;
    background: #fff;
    .list {
      display: flex;
      padding: 7px 10px;
      background-color: #fff;
      .image {
        width: 35%;
        height: 90px;
        border-radius: 5px;
      }
      .info {
        width: 65%;
        padding-left: 10px;
        .desc1 {
          margin-bottom: 3px;
          font-size: 14px;
          font-weight: 500;
          color: #333333;
        }
        .desc2 {
          margin-bottom: 2px;
          font-size: 12px;
          font-weight: 200;
          color: #666666;
        }
        .desc3 {
          height: 32px;
          width: 100%;
          overflow: hidden;
        }
        .desc4 {
          font-size: 16px;
          color: #f85858;
          margin-bottom: 3px;
        }
        .desc5 {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          &__distance {
            color: #666666;
          }
          &__detail {
            color: #3a78f5;
          }
        }
      }
    }
  }
  .page {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 10px;
  }
}
.house-list--elder {
  .doorplate {
    .info {
      .name {
        font-size: calc(14px * $zlb-elder-font-scale);
      }
      .address {
        font-size: calc(12px * $zlb-elder-font-scale);
      }
    }
    .icon {
      width: 40px;
      height: 40px;
    }
  }
  .records {
    .list {
      .image {
        width: 35%;
        height: 100px;
        border-radius: 5px;
        margin-top: 5px;
      }
      .info {
        width: 65%;
        padding-left: 10px;
        .desc1 {
          font-size: calc(12px * $zlb-elder-font-scale);
        }
        .desc2 {
          font-size: calc(10px * $zlb-elder-font-scale);
        }
        .desc3 {
        }
        .desc4 {
          font-size: calc(14px * $zlb-elder-font-scale);
        }
        .desc5{
          font-size: calc(10px * $zlb-elder-font-scale);
        }
      }
    }
  }
}
</style>
