<template>
  <div class="safety-info">
    <m-sub>安全排查信息</m-sub>
    <m-form
      :template="[
        'stNameFrst:小区名称|sectAddr:项目地址',
        'streetName:所属街道|wholeBuildingAddr:自然幢地址',
        'houseType:房屋类型|judgeType:排查判断',
        'floor:楼层|isThinPlate:小梁薄板>trueOrFalse',
        'isEmergencyRisk:立即应急排险>trueOrFalse|acquisitionPerson:采集人',
        'acquisitionTime:采集时间|otherRiskTypeDesc:其他隐患',
        'riskTypeDesc:隐患类型',
      ]"
      :data="info"
      :formatter="formatter"
      label-width="1rem"
    />
    <m-sub>配对项目信息</m-sub>
    <m-form
      :template="['stNameFrst:小区名称|sectAddr:项目地址', 'cspName:物业企业|']"
      :data="info"
      label-width="1rem"
    />
  </div>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'

defineProps({
  info: {
    type: Object as PropType<{ [key: string]: unknown }>,
    default: () => ({}),
  },
})
const formatter = {
  trueOrFalse: (val) => (val === true ? '是' : '否'),
}
</script>

<style lang="stylus" scoped>
.safety-info
  >.my-sub
    margin-top .1rem
    font-size .12rem
    padding-left .1rem
    background-clip text
    -webkit-background-clip text
    -webkit-text-fill-color transparent
    background-image linear-gradient(to bottom, #FFD1B2, #FF8635)
</style>
