<template>
  <div class="AddBuildingBox">
    <PageHeader title="房屋信息"></PageHeader>
    <div class="AddBuildingBody">
      <div class="title">
        <span>基本信息</span>
        <el-button v-has-permi="['system:house:edit']" type="primary" text v-if="HouseInfo.house" @click="editHouse">编辑</el-button>
      </div>
      <div class="addBuildingFormBody" v-if="HouseInfo.house">
        <div class="descriptionsbox">
          <div class="label">房号:</div>
          <div class="value">{{ HouseInfo.house?.houseNo ?? '--' }}</div>
        </div>
        <div class="descriptionsbox">
          <div class="label">所属小区:</div>
          <div class="value">{{ HouseInfo.house?.villageName ?? '--' }}</div>
        </div>
        <div class="descriptionsbox">
          <div class="label">楼栋:</div>
          <div class="value">{{ HouseInfo.house?.buildingName ?? '--' }}</div>
        </div>
        <div class="descriptionsbox">
          <div class="label">单元:</div>
          <div class="value">{{ HouseInfo.house?.unitNoName ?? '--' }}</div>
        </div>
        <div class="descriptionsbox">
          <div class="label">楼层:</div>
          <div class="value">{{ HouseInfo.house?.floorNo ? HouseInfo.house?.floorNo + ' 层' : '--' }}</div>
        </div>
        <div class="descriptionsbox">
          <div class="label">建筑面积:</div>
          <div class="value">{{ HouseInfo.house?.houseArea ? `${HouseInfo.house?.houseArea} ㎡` : '--' }}</div>
        </div>
        <div class="descriptionsbox">
          <div class="label">公摊面积:</div>
          <div class="value">{{ HouseInfo.house?.shareArea ? `${HouseInfo.house?.shareArea} ㎡` : '--' }}</div>
        </div>
        <div class="descriptionsbox">
          <div class="label">户型:</div>
          <div class="value">
            {{ HouseInfo.house?.houseType ? HouseInfo.house?.houseType.split('')[0] : '--' }}室
            {{ HouseInfo.house?.houseType ? HouseInfo.house?.houseType.split('')[1] : '--' }}厅
            {{ HouseInfo.house?.houseType ? HouseInfo.house?.houseType.split('')[2] : '--' }}卫
          </div>
        </div>
      </div>
      <div v-else class="w-full h-full flex flex-center min-h-4rem">
        <span style="color: #999; font-weight: 500; font-size: 1.1rem; letter-spacing: 10px">暂无信息</span>
      </div>
    </div>
    <!-- 储藏室信息 -->
    <div class="AddBuildingBody">
      <div class="title">
        <span>储藏室信息 </span>
        <el-button v-has-permi="['storeroom:storeroom:edit']" type="primary" text v-if="HouseInfo.storeroom" @click="editStoreRoom">编辑</el-button>
      </div>
      <div class="" v-if="HouseInfo.storeroom">
        <div class="addBuildingFormBody">
          <div class="descriptionsbox">
            <div class="label">楼栋:</div>
            <div class="value">{{ HouseInfo.storeroom?.buildingName ?? '--' }}</div>
          </div>
          <div class="descriptionsbox">
            <div class="label">单元:</div>
            <div class="value">{{ HouseInfo.storeroom?.unitNoName ? `${HouseInfo.storeroom?.unitNoName} 单元` : '--' }}</div>
          </div>
          <div class="descriptionsbox">
            <div class="label">储藏室号:</div>
            <div class="value">{{ HouseInfo.storeroom?.storeroomNo ? `${HouseInfo.storeroom?.storeroomNo}` : '--' }}</div>
          </div>
          <div class="descriptionsbox">
            <div class="label">建筑面积:</div>
            <div class="value">{{ HouseInfo.storeroom?.houseArea ? HouseInfo.storeroom?.houseArea + ' ㎡' : '--' }}</div>
          </div>
          <div class="descriptionsbox">
            <div class="label">公摊面积:</div>
            <div class="value">{{ HouseInfo.storeroom?.shareArea ? HouseInfo.storeroom?.shareArea + ' ㎡' : '--' }}</div>
          </div>
          <div class="descriptionsbox">
            <div class="label">实用面积:</div>
            <div class="value">{{ HouseInfo.storeroom?.internalArea ? HouseInfo.storeroom?.internalArea + ' ㎡' : '--' }}㎡</div>
          </div>
          <div class="descriptionsbox" style="grid-column-start: 1; grid-column-end: 4">
            <div class="label">备注:</div>
            <div class="value">{{ HouseInfo.storeroom?.remark ?? '--' }}</div>
          </div>
        </div>
      </div>
      <div v-else class="w-full h-full flex flex-center min-h-4rem">
        <span style="color: #999; font-weight: 500; font-size: 1.1rem; letter-spacing: 10px">暂无信息</span>
      </div>
    </div>
    <!-- 车位信息 -->
    <div class="AddBuildingBody">
      <div class="title">
        <span>车位信息</span>
      </div>
      <div class="" v-if="HouseInfo.parkingList.length > 0">
        <el-table :data="HouseInfo.parkingList">
          <el-table-column align="center" prop="areaName" label="区域" />
          <el-table-column align="center" prop="parkingCode" label="车位编号" />
          <el-table-column align="center" width="100" prop="parkingArea" label="车位面积">
            <template #default="scope">
              <span>{{ scope.row.parkingArea ?? '--' }} /㎡</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="50" prop="parkingFloor" label="楼层" />
          <el-table-column align="center" width="100" prop="type" label="车位类型">
            <template #default="scope">
              <dict-tag :options="com_parking_type" :value="scope.row.type"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" width="100" prop="parkingStatus" label="车位状态">
            <template #default="scope">
              <dict-tag :options="com_parking_status" :value="scope.row.parkingStatus"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="residentName" label="持有人">
            <template #default="scope">
              <el-button link type="primary" @click="handleEditUser(scope.row.residentId)">{{ scope.row.residentName }}</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" show-overflow-tooltip prop="remark" label="备注" />
        </el-table>
      </div>
      <div v-else class="w-full h-full flex flex-center min-h-4rem">
        <span style="color: #999; font-weight: 500; font-size: 1.1rem; letter-spacing: 10px">暂无信息</span>
      </div>
    </div>
    <!-- 收费项目 -->
    <div class="AddBuildingBody">
      <div class="title">
        <span>收费项目</span>
      </div>
      <div>
        <el-table :data="HouseInfo.chargeItemList" style="width: 100%">
          <el-table-column prop="itemName" label="收费项目" />
          <el-table-column prop="name" label="收费标准">
            <template #default="scope">
              <div class="flex">
                <span>{{ scope.row.fixedPrice }}</span>
                <span v-if="scope.row.fixedPrice && scope.row.unit">/</span>
                <span v-else>---</span>

                <dict-tag :options="com_charge_item_unit" :value="scope.row.unit"></dict-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="开始时间" />
          <el-table-column prop="name" label="结束时间">
            <template #default>
              <span>---</span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" />
        </el-table>
      </div>
    </div>
    <!-- 相关住户 -->
    <div class="AddBuildingBody">
      <div class="title">
        <span>相关住户</span>
      </div>
      <div>
        <el-table :data="HouseInfo.residentList" style="width: 100%">
          <el-table-column prop="residentName" label="姓名" />
          <el-table-column prop="gender" label="性别">
            <template #default="scope">
              <DictTag :options="sys_user_sex" :value="scope.row.gender"></DictTag>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="联系电话" />
          <el-table-column prop="ownerRelationship" label="身份">
            <template #default="scope">
              <DictTag :options="com_resident_relationship" :value="scope.row.ownerRelationship"></DictTag>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="备注" />
        </el-table>
      </div>
    </div>
    <!-- 缴费账单 -->
    <div class="AddBuildingBody">
      <div class="title">
        <span>缴费账单</span>
      </div>
      <div>
        <el-table :data="HouseInfo.billResidentList" style="width: 100%">
          <el-table-column prop="billCode" label="账单编号" />
          <el-table-column prop="billName" label="账单名称" />
          <el-table-column prop="chargeTypeName" label="账单项目" />
          <el-table-column prop="money" label="金额">
            <template #default="scope">
              <span v-if="scope.row.chargeTypeName === '水费' || scope.row.chargeTypeName === '电费'">--</span>
              <span v-else>{{ scope.row.money }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="payStatus" label="支付状态">
            <template #default="scope">
              <span v-if="scope.row.chargeTypeName === '水费' || scope.row.chargeTypeName === '电费'">--</span>
              <DictTag :options="com_pay_status" :value="scope.row.payStatus"></DictTag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import DictTag from '@/components/DictTag/index.vue';
import PageHeader from '@/components/Pageheader/index.vue';
import { Data, getHouseMain } from '@/api/system/house';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_resident_relationship } = toRefs<any>(proxy?.useDict('com_resident_relationship'));
const { sys_user_sex } = toRefs<any>(proxy?.useDict('sys_user_sex'));
const { com_pay_status } = toRefs<any>(proxy?.useDict('com_pay_status'));
const { com_parking_type } = toRefs<any>(proxy?.useDict('com_parking_type'));
const { com_parking_status } = toRefs<any>(proxy?.useDict('com_parking_status'));
const { com_charge_item_unit } = toRefs<any>(proxy?.useDict('com_charge_item_unit'));

const route = useRoute();
const router = useRouter();
const routeid = ref('');
const HouseInfo = ref<Data>({
  billResidentList: [],
  chargeItemList: [],
  house: null,
  parkingList: [],
  residentList: [],
  storeroom: null
});
function editHouse() {
  router.push({
    path: '/house/editHouse',
    query: {
      id: HouseInfo.value.house.houseId
    }
  });
}
function editStoreRoom() {
  router.push({
    path: '/house/EditStoreRoom',
    query: {
      id: HouseInfo.value.storeroom.storeroomId
    }
  });
}

function handleEditUser(id: string) {
  router.push({
    path: '/house/editResident',
    query: {
      id: id
    }
  });
}
function init() {
  if (route.query.id) {
    routeid.value = route.query.id as string;
    getHouseMain(routeid.value).then((res) => {
      console.log(res);
      HouseInfo.value = res.data;
    });
  }
}
init();
</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(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    &.remarkbuildingformbody {
      display: block;
    }
    .descriptionsbox {
      display: flex;
      align-items: center;
      margin: 10px 0;
      font-size: 15px;
      .label {
        width: 100px;
        text-align: right;
        font-weight: 800;
      }
      .value {
        flex: 1;
        margin-left: 20px;
      }
    }
  }
}
</style>
