<template>
  <view
    class="house-detail"
    :class="{ 'house-detail--elder': $uiStyle === 'elder' }"
  >
    <swiper class="swiper" circular :indicator-dots="true">
      <swiper-item v-for="(item, index) in imgList" :key="index">
        <image class="image" mode="aspectFill" :src="item" />
      </swiper-item>
    </swiper>
    <view class="content">
      <view class="address">{{ houseInfo.mc }}</view>
      <view class="cost">
        <view class="costMonthly">{{ houseInfo.costMonthly }} 元/月</view>
        <uni-tag
          v-if="showCostType"
          :text="fwzlCostDic[houseInfo.costType]"
          size="normal"
          :inverted="true"
        />
      </view>
      <view class="detail">
        <view class="cell">
          <view class="value"
            >{{ houseInfo.shiNum }}室{{ houseInfo.tingNum }}厅{{
              houseInfo.weiNum
            }}卫</view
          >
          <view class="label">房型</view>
        </view>
        <view class="cell">
          <view class="value">{{ houseInfo.areaSquare }}平方米</view>
          <view class="label">面积</view>
        </view>
        <view class="cell">
          <view class="value"
            >{{ houseInfo.floor }}/{{ houseInfo.floorTotal }}</view
          >
          <view class="label">楼层</view>
        </view>
        <view class="cell">
          <view class="value">{{ houseInfo.orientation }}</view>
          <view class="label">朝向</view>
        </view>
      </view>
      <view class="tags">
        <!--  <uni-tag :text="fwzlCostDic[item.costType]" :inverted="true"/> -->
        <uni-tag
          v-if="houseInfo.decoration"
          :text="houseInfo.decoration"
          :inverted="true"
        />
        <uni-tag
          v-if="houseInfo.orientation"
          :text="houseInfo.orientation"
          :inverted="true"
        />
        <uni-tag
          v-if="houseInfo.lookPeriod"
          :text="houseInfo.lookPeriod"
          :inverted="true"
        />
        <uni-tag
          :text="houseInfo.elevator ? '有电梯' : '无电梯'"
          :inverted="true"
        />
        <uni-tag
          v-for="(item, index) in houseInfo.lightSpotList"
          :key="index"
          :text="item"
          :inverted="true"
        />
        <uni-tag
          v-for="(item, index) in houseInfo.configList"
          :key="index"
          :text="item"
          :inverted="true"
        />
        <uni-tag
          v-for="(item, index) in houseInfo.requirementList"
          :key="index"
          :text="item"
          :inverted="true"
        />
      </view>
      <view class="location" @tap="checkMap">
        <view class="left">
          <image
            class="location-icon"
            mode="scaleToFill"
            src="/subPages/static/images/rent/location.png"
          />
          <view class="desc">{{ houseInfo.bzdz }}</view>
        </view>
        <uni-icons type="forward" size="20"></uni-icons>
      </view>
      <view class="requirement">
        <view class="title">看房必读</view>
        <view class="list">
          <view class="label">看房时间</view>
          <view class="value">{{ houseInfo.lookPeriod }}</view>
        </view>
        <view class="list">
          <view class="label">入住要求</view>
          <view class="value">
            <text
              v-for="(item, index) in houseInfo.requirementList"
              :key="index"
              >{{ item }}</text
            >
          </view>
        </view>
      </view>
      <view class="description">
        <view class="title">房屋介绍</view>
        <view class="desc">{{ houseInfo.description }}</view>
      </view>
    </view>
    <button type="primary" class="call-btn" @tap="callPhone">拨打电话</button>

    <view class="operate-btn" v-if="userInfo.uuid === houseInfo.createUserId">
      <button type="primary" size="mini" class="edit" @tap="editHouse">
        编辑
      </button>
      <button type="warn" size="mini" class="delete" @tap="deleteHouse">
        删除
      </button>
    </view>
  </view>
</template>

<script>
import { FWZL_DIC } from "@/utils/const";
import { getDicByNameList } from "@/api/system";
import { downloadFile } from "@/api/system";
import { getHouseDetail, deletePublishRecord } from "@/api/rent";
import { httpApi } from "@/common/js/baseUrl";
const app = getApp();

export default {
  name: "houseDetail",
  components: {},
  props: {},
  data() {
    return {
      userInfo: {},
      houseInfo: {},
      imgList: [],
      fwzlCostDic: {},
      showCostType: false,
    };
  },
  onLoad(options) {
    console.log("houseDetail options", options);
    this.userInfo = uni.getStorageSync("userInfo") || {};
    const globalData = app.globalData;
    this.getDicByNameList();
    this.getHouseDetail(options.uuid);
  },
  methods: {
    // 查询字典
    getDicByNameList() {
      getDicByNameList({ dicName: Object.values(FWZL_DIC).join(",") }).then(
        (res) => {
          res.data.fwzlCostType.forEach((item) => {
            this.fwzlCostDic[item.code] = item.name;
          });
          this.showCostType = true;
        }
      );
    },
    // 获取房屋详情
    getHouseDetail(uuid) {
      const data = {
        userInfoId: this.userInfo.uuid,
        uuid: uuid,
      };
      getHouseDetail(data).then((res) => {
        this.houseInfo = res.data;
        this.houseInfo.lightSpotList = this.houseInfo.lightspot.split(",");
        this.houseInfo.configList = this.houseInfo.config.split(",");
        this.houseInfo.requirementList = this.houseInfo.requirement.split(",");
        if (this.houseInfo.pics) {
          this.imgList = [];
          const fileIdList = this.houseInfo.pics.split(",");
          fileIdList.forEach((item) => {
            const url = `${httpApi}/file/download?fileUuid=${item}`;
            this.imgList.push(url);
          });
        } else if (this.houseInfo.picHome) {
          this.imgList = [this.houseInfo.picHome];
        } else {
          // 为了兼容之前已经上线代码，最新版本代码 图片是必传项
          this.imgList = [
            "https://img1.baidu.com/it/u=2775822367,355751974&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1661533200&t=1a670011c7c4c59444955487c4b46704",
          ];
        }
      });
    },
    // 获取图片链接
    getImageUrl() {
      const fileIdList = this.houseInfo.pics.split(",");
      fileIdList.forEach((item) => {
        downloadFile({ fileUuid: item }).then((res) => {
          let imageType = res.header["Content-Type"];
          const url = `data:${imageType};base64,${uni.arrayBufferToBase64(
            res.data
          )}`;
          this.imgList.push(url);
        });
      });
    },
    //拨打电话
    callPhone() {
      uni.makePhoneCall({
        phoneNumber: this.houseInfo.contactTel,
        success: function () {},
        fail: function () {},
      });
    },
    // 编辑房屋信息
    editHouse() {
      uni.navigateTo({
        url: `/subPages/pages/rent/chuZu/modifyPublishInfo?uuid=${this.houseInfo.uuid}`,
      });
    },
    // 删除房屋信息
    deleteHouse() {
      const data = {
        userInfoId: this.userInfo.uuid,
        uuid: this.houseInfo.uuid,
        createUserId: this.userInfo.uuid,
      };
      deletePublishRecord(data).then((res) => {
        if (res.code === 0) {
          setTimeout(() => {
            const pages = getCurrentPages();
            const beforePage = pages[pages.length - 2];
            beforePage.$vm.getPushRecordList();
            uni.navigateBack({
              delta: 1,
            });
          }, 1000);
        }
      });
    },
    // 查看房屋位置及周边
    checkMap() {
      const data = {
        x: this.houseInfo.x,
        y: this.houseInfo.y,
        title: this.houseInfo.mc,
        address: this.houseInfo.bzdz,
      };
      uni.navigateTo({
        url: `/subPages/pages/rent/map?data=${JSON.stringify(data)}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.house-detail {
  height: 100%;
  background-color: #fff;
  overflow: auto;
  .swiper {
    width: 100%;
    height: 33vh;
    .image {
      width: 100%;
      height: 33vh;
    }
  }
  .content {
    height: calc(65vh - 65px);
    overflow: auto;
    padding: 10px;
    .address {
      font-size: 16px;
      font-weight: 700;
      color: #333333;
    }
    .cost {
      padding: 10px 0;
      display: flex;
      .costMonthly {
        font-size: 17px;
        font-weight: 700;
        color: #f85858;
        margin-right: 8px;
      }
    }
    .detail {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-top: 0.5px solid #f0ecec;
      border-bottom: 0.5px solid #f0ecec;
      .cell {
        width: 25%;
        text-align: center;
        .value {
          font-size: 15px;
          font-weight: 700;
          color: #333333;
          margin-bottom: 2px;
        }
        .label {
          font-size: 13px;
          font-weight: 300;
          color: #999999;
        }
      }
    }
    .tags {
      padding: 10px 0;
      border-bottom: 0.5px solid #f0ecec;
      display: flex;
      flex-wrap: wrap;
    }
    .location {
      border-bottom: 0.5px solid #f0ecec;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      .left {
        display: flex;
        align-items: center;
        .location-icon {
          min-width: 20px;
          width:20px;
          height: 20px;
          margin-right: 6px;
        }
      }
    }
    .requirement {
      border-bottom: 0.5px solid #f0ecec;
      margin-bottom: 10px;
      .title {
        font-size: 17px;
        font-weight: 800;
        color: #333333;
        margin-bottom: 10px;
      }
      .list {
        display: flex;
        margin-bottom: 10px;
        .label {
          font-size: 14px;
          font-weight: 300;
          color: #333333;
          margin-right: 5px;
        }
        .value {
          font-size: 14px;
          font-weight: 600;
          color: #333333;
        }
      }
    }
    .description {
      margin-bottom: 40px;
      .title {
        font-size: 17px;
        font-weight: 800;
        color: #333333;
        margin-bottom: 10px;
      }
      .desc {
        font-size: 14px;
        color: #333333;
        font-weight: 400px;
        padding: 5px 0;
      }
    }
  }
  .call-btn {
    width: calc(100% - 10px);
    background-color: #1676fe;
    position: fixed;
    bottom: 10px;
    left: 5px;
  }
  .operate-btn {
    position: absolute;
    bottom: 80px;
    right: 15px;
    display: flex;
  }
}
.house-detail--elder {
  .uni-tag{
    font-size: 14px;
  }
  .content {
    .address {
      font-size: calc(16px * $zlb-elder-font-scale);
    }
    .cost {
      .costMonthly {
        font-size: calc(17px * $zlb-elder-font-scale);
      }
    }
    .detail {
      .cell {
        .value {
          font-size: calc(10px * $zlb-elder-font-scale);
        }
        .label {
          font-size: calc(13px * $zlb-elder-font-scale);
        }
      }
    }
    .location {
      font-size: calc(14px * $zlb-elder-font-scale);
    }
    .requirement {
      .title {
        font-size: calc(17px * $zlb-elder-font-scale);
      }
       .list {
      .label {
        font-size: calc(14px * $zlb-elder-font-scale);
      }
      .value {
        font-size: calc(14px * $zlb-elder-font-scale);
      }
    }
    }

   

    .description {
      .title {
        font-size: calc(17px * $zlb-elder-font-scale);
      }
      .desc {
        font-size: calc(14px * $zlb-elder-font-scale);
      }
    }
  }
}
</style>

<style>
.uni-tag {
  /* #ifdef MP-WEIXIN */
  line-height: 32px !important;
  /* #endif */
  /* #ifdef MP-ALIPAY */
  line-height: 20px !important;
  /* #endif */
  margin-bottom: 10px;
  margin-right: 7px !important;
  border-color: #e6e2e2 !important;
  color: #3a78f5 !important;
}
</style>
