<template>
  <div class="AddBuildingBox">
    <PageHeader title="房屋租赁管理"></PageHeader>
    <div class="AddBuildingBody">
      <div class="title flex flex-items-center flex-justify-between">
        <div>
          <span>基础资料 </span>
          <span class="ml-20px color-blue cursor-pointer" @click="hanlededit">编辑</span>
        </div>
        <el-button @click="handlBack" class="mr-10px">返回</el-button>
      </div>
      <div class="addBuildingFormBody">
        <div class="descriptionsbox">
          <div class="label">房屋:</div>
          <div class="value">{{ HouseInfo.house }}</div>
        </div>
        <div class="descriptionsbox">
          <div class="label">业主姓名:</div>
          <div class="value">{{ HouseInfo.rentalName }}</div>
        </div>
        <div class="descriptionsbox">
          <div class="label">租金:</div>
          <div class="value">{{ HouseInfo.rent }}元</div>
        </div>
        <div class="descriptionsbox">
          <div class="label">租赁方式:</div>
          <div class="value">
            <DictTag :options="com_rental_method" :value="HouseInfo.rentalType"></DictTag>
          </div>
        </div>
        <div class="descriptionsbox">
          <div class="label">房屋朝向:</div>
          <div class="value">{{ HouseInfo.houseFace }}</div>
        </div>
        <div class="descriptionsbox">
          <div class="label">房屋面积:</div>
          <div class="value">{{ HouseInfo.houseArea }}㎡</div>
        </div>
        <div class="descriptionsbox">
          <div class="label">房屋楼层:</div>
          <div class="value">{{ HouseInfo.floorNo }}层</div>
        </div>
        <div class="descriptionsbox">
          <div class="label">入住时间:</div>
          <div class="value">{{ HouseInfo.inTime }}</div>
        </div>
      </div>
      <div class="descriptionsbox">
        <div class="label">房屋设施:</div>
        <div class="value">
          <span style="margin-right: 10px" v-for="item in HouseInfo.facilitieslist" :key="item">{{ handlefacilities(item) }} </span>
        </div>
      </div>
      <el-row>
        <el-col :span="10">
          <div class="descriptionsbox">
            <div class="label">房屋照片:</div>
            <div class="value grid grid-cols-4 gap-4">
              <el-image v-for="(item, index) in HouseInfo.houseImageUrls" :key="index" :src="splitImages(item)" class="houseImage"></el-image>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="descriptionsbox">
        <div class="label">租房信息:</div>
        <div class="value">{{ HouseInfo.supInfo }}</div>
      </div>
      <el-row>
        <el-col :span="12">
          <div class="descriptionsbox">
            <div class="label">租房电话:</div>
            <div class="value">{{ HouseInfo.phone }}</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="descriptionsbox">
            <div class="label">微信:</div>
            <div class="value">{{ HouseInfo.vx }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PageHeader from '@/components/Pageheader/index.vue';
import { getHouseRental } from '@/api/system/houseRental';
import { useHouseStore } from '@/store/modules/house';
import { getHousePathById } from '@/utils/house';
import { listHouseFacilities } from '@/api/system/HouseFacilities';
import { splitImages } from '@/utils';

const houseStore = useHouseStore();
const { treedata } = storeToRefs(houseStore);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_rental_method } = toRefs<any>(proxy?.useDict('com_rental_method'));
const { com_house_rental_facilities } = toRefs<any>(proxy?.useDict('com_house_rental_facilities'));

const route = useRoute();
const router = useRouter();
const houseRentalid = ref(null);
const HouseInfo = ref({
  'house': '',
  'name': null,
  'rentalStatus': null,
  'rentalName': '',
  'rent': null,
  'rentalType': '',
  'houseFace': '',
  'houseArea': null,
  'floorNo': null,
  'inTime': '',
  'facilities': '',
  'houseImageUrl': '',
  'supInfo': '',
  'phone': null,
  'vx': '',
  'email': '',
  'houseId': null,
  'houseUse': '',
  'pubBy': null,
  'pubTime': '',
  'facilitieslist': [],
  'houseImageUrls': []
});

const housefacilities = ref([]);
async function init() {
  if (route.query.id) {
    houseRentalid.value = route.query.id;
  }
  const reslist = await listHouseFacilities();
  housefacilities.value = reslist.rows;

  getHouseRental(houseRentalid.value).then((res) => {
    HouseInfo.value = res.data;
    HouseInfo.value.facilitieslist = res.data.facilities.split(',').filter((item) => item);
    HouseInfo.value.houseImageUrls = HouseInfo.value.houseImageUrl.split(',').filter((item) => item);
    const arr = getHousePathById(treedata.value, HouseInfo.value.houseId, 'label');
    HouseInfo.value.house = arr.join(' - ');
  });
}
init();

function handlefacilities(id: string) {
  const find = housefacilities.value.find((item) => item.id === id);
  return find ? find.name : '';
}

function hanlededit() {
  router.push({
    path: '/house/edithouseRental',
    query: {
      id: HouseInfo.value.id
    }
  });
}

function handlBack() {
  router.push({
    path: '/house/houseRental'
  });
}
</script>

<style scoped lang="scss">
.AddBuildingBox {
  padding: 15px;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}
.AddBuildingBody {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: white;
  padding: 15px;
  .title {
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    font-size: 15px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    border-bottom: 1px solid #bbbbbb;
    margin-bottom: 20px;
  }
  .addBuildingFormBody {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }

  .houseImage {
    width: 200px;
    height: 100px;
  }
  .descriptionsbox {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    font-size: 15px;
    .label {
      width: 100px;
      text-align: right;
      font-weight: 800;
    }
    .value {
      flex: 1;
      margin-left: 20px;
    }
  }
}
</style>
